Afterpay Messaging

Advanced Usage

Dynamically Create Placements

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

<script>
    window.addEventListener('Afterpay.ready', function() {
      Afterpay.createPlacements({
        targetSelector: '.placement-card .product-price-basic',
        attributes: {
          amountSelector: '.placement-card .product-price-basic',
        }
      });
    });
</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.

Default values are in bold

Attribute nameExample of a valueSupported constants/valuesComments
localeAfterpay.locale.EN_AUEN_US, EN_AU, EN_CA, EN_GB, EN_NZ
introTextPay inIn, in, Or, or, Pay, pay, Pay in, pay in
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
<script>
    window.addEventListener('Afterpay.ready', function() {
      Afterpay.createPlacements({
        targetSelector: '.product-price-selector',
        attributes: {
          locale: Afterpay.locale.EN_GB,
          currency: Afterpay.currency.GBP,
          amount: 120,
          amountSelector: '.placement-card .product-price-selector',
          size: Afterpay.size.SM,
        }
      });
    });
  </script>