For AI agents: a documentation index is available at the root level at /llms.txt and /llms-full.txt. Append /llms.txt to any URL for a page-level index, or .md for the markdown version of any page.
HomeGuidesAPI Reference
HomeGuidesAPI Reference
  • Welcome
    • Business Hub
  • Platforms
    • Platforms Quickstart
    • Adyen
    • Ecwid
    • Shopify
    • Stripe
  • Afterpay Messaging
    • Getting Started
    • Implementation
    • Migration
    • Legacy Messaging Products
    • Advanced Usage
    • Launch Afterpay Info Modal Anywhere
  • API Development
    • API Quickstart
    • Test Environments
    • Certification
    • Disputes
    • Upgrade from API v1 to v2
  • SDK
    • iOS SDK
    • Android SDK
    • React Native SDK
    • PHP SDK
  • Marketing
    • Shop Directory
    • Brand Assets
LogoLogo
On this page
  • Dynamically Create Placements
Afterpay Messaging

Advanced Usage

Was this page helpful?
Previous

Launch Afterpay Info Modal Anywhere

Next
Built with

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.

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
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>