> This page is for Afterpay.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers.cash.app/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.cash.app/_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              |
| ------------- | ---------------------------- |
| United States | "en_US", "en_US-theme-white" |

For example:

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

Results in a modal suitable for US merchants.