Clearpay Messagingjavascript-library

Advanced Usage

Dynamically Create Placements

The createPlacements function binds to the Afterpay window object, exposing new functionality to dynamically create Afterpay Placements.

1<script>
2    window.addEventListener('Afterpay.ready', function() {
3      Afterpay.createPlacements({
4        targetSelector: '.placement-card .product-price-basic',
5        attributes: {
6          amountSelector: '.placement-card .product-price-basic',
7        }
8      });
9    });
10</script>

This method injects <afterpay-placement> onto the page taking into consideration all the configuration values provided as an object.

KeyTypeDescriptionRequired
targetSelectorstringA selector to specify the reference element adjacent to which the <afterpay-placement> element would be placedyes
attributesobjectAn object holding a collection of attributes to be applied to the <afterpay-placement> elementno
Accepted keys on the attributes object

The keys specified on the attributes object are the camel-cased version of the hyphenated data attributes passed to the <afterpay-placement> element.


NOTE: Default values in bold

Attribute nameExample of a valueSupported constants/valuesComments
localeAfterpay.locale.EN_AUEN_US, EN_AU, EN_CA, EN_GB, EN_NZ
currencyAfterpay.currency.AUDUSD, AUD, CAD, GBP, NZD
amountAny numeric value between 1-2000-Takes the highest precedence for an amount value
amountSelectorAny CSS selector to read the amount from-
logoTypeAfterpay.logoType.LOCKUPBADGE, LOCKUPThis is a required attribute when setting the logo type to a lockup
badgeThemeAfterpay.theme.badge.MINT_ON_BLACKBLACK_ON_MINT, BLACK_ON_WHITE, MINT_ON_BLACK, WHITE_ON_BLACK
lockupThemeAfterpay.theme.lockup.BLACKBLACK, WHITE, MINTMake sure the logoType is set to lockup
sizeAfterpay.size.SMXS, SM, MD, LGThese are the different messaging sizes supported
isEligiblefalsetrue, false
modalLinkStyleAfterpay.modalLinkStyle.CIRCLED_AFTERPAY_ICONCIRCLED_INFO_ICON, LEARN_MORE_TEXT, MORE_INFO_TEXT, CIRCLED_QUESTION_ICON, NONE
showUpperLimitfalsetrue, false
showLowerLimitfalsetrue, false
modalThemeAfterpay.theme.modal.WHITEMINT ,WHITE
1<script>
2    window.addEventListener('Afterpay.ready', function() {
3      Afterpay.createPlacements({
4        targetSelector: '.product-price-selector',
5        attributes: {
6          locale: Afterpay.locale.EN_GB,
7          currency: Afterpay.currency.GBP,
8          amount: 120,
9          amountSelector: '.placement-card .product-price-selector',
10          size: Afterpay.size.SM,
11        }
12      });
13    });
14  </script>