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

# Advanced Configuration

### Attribute List

| Attribute              | Type                  | Requirement                                   |
| :--------------------- | :-------------------- | :-------------------------------------------- |
| `data-amount`          | Number (decimal)      | Required if `data-amount-selector` is omitted |
| `data-amount-selector` | String (CSS selector) | Required if `data-amount` is omitted          |

> #### Price Observers
>
> Assign a value to `data-amount-selector` to watch for text content changes on a given element; the component will automatically update with the newly calculated price.

#### Boolean Attributes

| Attribute                     | Type    | Default |
| :---------------------------- | :------ | :------ |
| `data-show-interest-free`     | Boolean | true    |
| `data-is-eligible`            | Boolean | true    |
| `data-cart-is-eligible`       | Boolean | true    |
| `data-show-upper-limit`       | Boolean | true    |
| `data-show-lower-limit`       | Boolean | true    |
| `data-show-with`              | Boolean | true    |
| `data-payment-amount-is-bold` | Boolean | false   |
| `data-cbt-enabled`            | Boolean | false   |

### `data-show-lower-limit`

![](/_fern-img/f6e46b0905bff486986b6761c1de5a4911d17d5a9bfdca81721ed7a782fd8067.webp)

```html
<afterpay-placement
    data-amount="2000"
    data-locale="en_GB"
    data-currency="GBP"
    data-show-lower-limit="false">
</afterpay-placement>
```

> **Set Messaging for unavailable items**
>
> **Product Page**\
> Add the attribute `data-is-eligible` to the `<afterpay-placement>` tag and assign its value to **false**.
>
> ```html
> <afterpay-placement
>    data-is-eligible="false"
>    data-locale="en_GB"
>    data-currency="GBP"
>    data-amount="120.00">
> </afterpay-placement>
> ```
>
> ![eligibility](https://files.readme.io/2f49239-clearpay-is-eligible.png)
>
> **Cart Page**\
> Add the attribute `data-cart-is-eligible` to the `<afterpay-placement>` tag and assign its value to **false**.
>
> ```html
> <afterpay-placement
>    data-cart-is-eligible="false"
>    data-locale="en_GB"
>    data-currency="GBP"
>    data-amount="120.00">
> </afterpay-placement>
> ```
>
> To return the component back to its standard messaging, either assign `data-is-eligible`/`data-cart-is-eligible` to 'true', or remove the attribute from the web component.

## Customize Text

| Attribute               | Default             | Accepted Values                                                                    |
| :---------------------- | :------------------ | :--------------------------------------------------------------------------------- |
| `data-intro-text`       | "or"                | `In`, `in`, `Or`, `or`, `Pay`, `pay`, `Pay in`, `pay in`                           |
| `data-modal-link-style` | "circled-info-icon" | `more-info-text` , `learn-more-text`, `circled-question-icon`, `circled-info-icon` |

Documentation on dynamically creating Afterpay Placements can be found below:\
[Dynamic Placements](advanced-usage)