To display the Afterpay Lockup, visit Afterpay's Developer docs for more information: (https://developers.afterpay.com/afterpay-online/docs/afterpay-messaging)
The Afterpay.js script loads various Clearpay 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" async ></script>
To display the Instalment 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 Clearpay messaging with the correct language and calculated instalment amount, provide the locale, currency, and amount attributes to the custom element.
<afterpay-placement data-locale="en_GB" data-currency="GBP" data-amount="44.00" ></afterpay-placement>
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 Clearpay 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:
<script src="https://js.afterpay.com/afterpay-1.x.js" data-min="1.00" data-max="1000.00" async ></script>
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 over 1 year ago
Learn how to change the Clearpay badge theme