> This page is for version v2 (default).
> For other versions, use one of these documentation indexes:
> - v2 (default): https://developers.clearpay.co.uk/v-2/llms.txt
> - v1: https://developers.clearpay.co.uk/v-1/llms.txt

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

# JavaScript Library

> **Utilising the Global JavaScript Library**
>
> As an Afterpay organisation, Clearpay utilises Afterpay's global JavaScript library.
>
> Afterpay's JavaScript Library allows you to easily display payment amounts throughout the checkout flow.
>
> To display the **Afterpay** Lockup, visit Afterpay's Developer docs for more information: ([https://developers.afterpay.com/afterpay-online/docs/afterpay-messaging](https://developers.afterpay.com/afterpay-online/docs/afterpay-messaging))

## Loading the Library

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.

**`HTML`**

```html HTML
<script src="https://js.afterpay.com/afterpay-1.x.js"
    async
></script>
```

> **Note**
>
> If you are using a specific version of the script, please update to version `1.x.js`

## Clearpay Messaging

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.

![](file:docs/assets/images/e22aaca-Pasted_Image_8_13_20__2_58_PM.png "Pasted_Image_8_13_20__2_58_PM.png")

\


To render Clearpay messaging with the correct language and calculated instalment amount, provide the **locale**, **currency**, and **amount** attributes to the custom element.

```html
<afterpay-placement 
    data-locale="en_GB"
    data-currency="GBP" 
    data-amount="44.00"
 ></afterpay-placement>
```

| Attribute                                                                    | Type              | Default           |
| :--------------------------------------------------------------------------- | :---------------- | :---------------- |
| [data-locale](afterpay-js-glossary#constants)                                | String `required` |                   |
| [data-currency](afterpay-js-glossary#constants)                              | String `required` |                   |
| [data-amount](js-lib-advanced-configuration)                                 | String `required` |                   |
| [data-show-upper-limit](js-lib-advanced-configuration)                       | String            | `"true"`          |
| [data-show-lower-limit](js-lib-advanced-configuration#data-show-lower-limit) | String            | `"true"`          |
| [data-logo-type](style-messaging#logo-types)                                 | String            | `"badge"`         |
| [data-badge-theme](style-messaging#badge-themes)                             | String            | `"black-on-mint"` |
| [data-size](style-messaging#adjust-the-size-of-afterpay-messaging)           | String            | `"md"`            |

## Setting a price range to show Clearpay (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:

![](file:docs/assets/images/0561035-Screen_Shot_2020-09-10_at_8.25.31_AM.png "Screen Shot 2020-09-10 at 8.25.31 AM.png")

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:\
E.g)

```html
<script
    src="https://js.afterpay.com/afterpay-1.x.js"
    data-min="1.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.