JavaScript Library
How can I easily add Afterpay Messaging to my site?
NOTE: Merchants using our legacy documentation
If you're using a previous version of our Javascript documentation you can find them here
The current JavaScript library Afterpay.js is the primary integration tool for merchants to use. Merchants who integrated before August 2020 are encouraged to upgrade to the new library.
Afterpay's JavaScript Library allows you to easily display installment amounts throughout the checkout flow.
Loading the Library
The Afterpay.js script loads various Afterpay Messaging and Assets for merchants to utilize throughout their store. To load the Afterpay.js library add the following async script tag to the <head> section of your site.
<script src="https://js.afterpay.com/afterpay-1.x.js" data-analytics-enabled
async
></script>
Afterpay Messaging
To display the Installment Messaging add the <afterpay-placement> tag to the product and cart HTML files. The messaging should be placed immediately below the price element on both product and cart pages.
To render Afterpay messaging with the correct language and calculated installment amount, provide the locale, currency, and amount attributes to the custom element.
<afterpay-placement
data-locale="en_US"
data-currency="USD"
data-amount="44.00"
></afterpay-placement>
| Attribute | Type | Default |
|---|---|---|
| data-locale | String required | |
| data-currency | String required | |
| data-amount | String required | |
| data-show-upper-limit | String | "true" |
| data-show-lower-limit | String | "true" |
| data-logo-type | String | "badge" |
| data-badge-theme | String | "black-on-mint" |
| data-size | String | "md" |
Pay Monthly enhanced messaging feature - US merchants only
If you are a US merchant with a direct integration, you can use Pay Monthly enhanced messaging. This displays specific messages on the product detail page and the shopping cart. See Pay Monthly enhanced messaging feature for more details.
Setting a price range to show Afterpay (optional)
data-min and data-max define the minimum and maximum for the messaging. When a product or cart total is outside of this range, the messaging will read like so:
Often merchants want to restrict customers from using Afterpay on items that fall outside a specific price range. To configure the minimum an maximum threshold, add the following attribute to the Afterpay.js Script tag:
E.g)
<script
src="https://js.afterpay.com/afterpay-1.x.js"
data-analytics-enabled
data-min="35.00"
data-max="1000.00"
async
></script>
| Attribute | Type | Default |
|---|---|---|
| data-min | String | "1.00" |
| data-max | String | "1000.00" |
Please note: The min and max values only affect the amounts used in the messaging. To request a different minimum or maximum threshold for your account, please reach out to your sales rep.
Updated 5 months ago