> This page is for Afterpay Online Developer, version Main (default).
> For other versions, use one of these documentation indexes:
> - Main (default): https://developers.afterpay.com/afterpay-online-developer/main/llms.txt
> - v1: https://developers.afterpay.com/afterpay-online-developer/v-1/llms.txt
> - Chinese: https://developers.afterpay.com/afterpay-online-developer/chinese/llms.txt

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers.afterpay.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.afterpay.com/_mcp/server.

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

```html
<script src="https://js.squarecdn.com/square-marketplace.js" async></script>
```

3. 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:

```html
<div>
  Or 4 interest-free payments with 
  <strong>[Afterpay Logo] <span data-afterpay-modal>ⓘ</span></strong>
</div>
```

### Regional Modal Themes

| Region      | Accepted 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:

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

```

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

![AP25-BuyNow-updated.png](/_fern-img/920a38e1ff4c4c7776dc08562627750fa29b21a2ead046c69b8891edfbd70eda.webp)

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

```html
<script src="https://js.squarecdn.com/square-marketplace.js" async></script>
<div>
  Or 4 interest-free payments with
<strong>[Afterpay Logo] <span data-afterpay-modal="en_AU-theme-white">ⓘ</span></strong>
</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](/_fern-img/2886721b49e221bf914a799ea2ee5e7bb4ebd3696151cec848ac58767ace4f7e.webp)

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

![error-mess-1.png](/_fern-img/46f5d32c43f255edc91ed0b3c9818437f3e0510ca5ce0ffacdc368db478abc2a.webp)