Afterpay Messaging

Launch Afterpay Info Modal Anywhere

This page is a short guide on how to use JavaScript to enable any element to open the Afterpay information modal.

For the customer, it should be a single click operation; click on any element and the Afterpay information modal opens.

Instructions

Do the following:

  1. Open your existing messaging script with an HTML editor.

  2. Load square-marketplace.js script in the HTML, see the example below:

1<script src="https://js.squarecdn.com/square-marketplace.js" async></script>
  1. Add data-afterpay-modal attribute to any element. When a customer clicks that element, it now opens the Afterpay information modal. Here’s an example code snippet that opens when a customer clicks the icon symbol:
1<div>
2  Or 4 interest-free payments with 
3  <strong>[Afterpay Logo] <span data-afterpay-modal>ⓘ</span></strong>
4</div>

Regional Modal Themes

RegionAccepted Values
Australia”en_AU”, “en_AU-theme-white”
Canada”en_CA”, “en_CA-theme-white”
New Zealand”en_NZ”, “en_NZ-theme-white”

For example:

<strong>[Afterpay Logo] <span data-afterpay-modal="en_NZ">ⓘ</span></strong>

Results in a modal suitable for New Zealand merchants.

<strong>[Afterpay Logo] <span data-afterpay-modal="en_AU">ⓘ</span></strong>

Results in a modal suitable for Australian merchants.

See similar examples in the Optional - Change Info Modal Theme section below.

Optional - Change Info Modal Theme

This is an option for merchants who want to use a non-default modal theme. Only assign a value to the data-afterpay-modal attribute if you want to use a non-default modal theme.

Warning

If you try to assign an invalid value to the data-afterpay-modal attribute, you will cause an error. For the standard Afterpay modal theme, leave the data-afterpay-modal attribute without an assigned value.

Here is a code example of a default modal theme:

1<script src="https://js.squarecdn.com/square-marketplace.js" async></script>
2<div>
3  Or 4 interest-free payments with
4<strong>[Afterpay Logo] <span data-afterpay-modal>ⓘ</span></strong>
5</div>

The code example above produces a standard Bondi Mint modal theme:

AP25-BuyNow-updated.png

Here is a code example of a non-default modal theme:

1<script src="https://js.squarecdn.com/square-marketplace.js" async></script>
2<div>
3  Or 4 interest-free payments with
4<strong>[Afterpay Logo] <span data-afterpay-modal="en_AU-theme-white">ⓘ</span></strong>
5</div>

The code example above has extra text in this line that defines the non-default theme:

<strong>[Afterpay Logo] <span data-afterpay-modal="en_AU-theme-white">ⓘ</span></strong>

Remember the default is Bondi Mint modal theme. The code example above produces a standard White modal theme that is not the default:

AP25-BuyNow-White.png

If you assign an incorrect value to the data-afterpay-modal= part of the code, an error message appears:

error-mess-1.png