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

## Dynamically Create Placements

The **createPlacements** function binds to the `Afterpay` window object, exposing new functionality to dynamically create Afterpay Placements.

```html
<script>
    window.addEventListener('Afterpay.ready', function() {
      Afterpay.createPlacements({
        targetSelector: '.placement-card .product-price-basic',
        attributes: {
          amountSelector: '.placement-card .product-price-basic',
        }
      });
    });
</script>
```

This method injects \<afterpay-placement> onto the page taking into consideration all the configuration values provided as an object.

| Key              | Type   | Description                                                                                                      | Required |
| ---------------- | ------ | ---------------------------------------------------------------------------------------------------------------- | -------- |
| `targetSelector` | string | A selector to specify the reference element adjacent to which the `<afterpay-placement>` element would be placed | yes      |
| `attributes`     | object | An object holding a collection of attributes to be applied to the `<afterpay-placement>` element                 | no       |

> **Accepted keys on the attributes object**
>
> The keys specified on the `attributes` object are the camel-cased version of the hyphenated data attributes passed to the `<afterpay-placement>` element.

\


*NOTE: Default values in bold*

| Attribute name   | Example of a value                              | Supported constants/values                                                                    | Comments                                                            |
| ---------------- | ----------------------------------------------- | --------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- |
| `locale`         | `Afterpay.locale.EN_AU`                         | **`EN_US`**, `EN_AU`, `EN_CA`, ` EN_GB`, `EN_NZ`                                              |                                                                     |
| `currency`       | `Afterpay.currency.AUD`                         | **`USD`**, `AUD`, `CAD`, `GBP`, `NZD`                                                         |                                                                     |
| `amount`         | Any numeric value between `1-2000`              | -                                                                                             | Takes the highest precedence for an amount value                    |
| `amountSelector` | Any CSS selector to read the amount from        | -                                                                                             |                                                                     |
| `logoType`       | `Afterpay.logoType.LOCKUP`                      | **`BADGE`**, `LOCKUP`                                                                         | This is a required attribute when setting the logo type to a lockup |
| `badgeTheme`     | `Afterpay.theme.badge.MINT_ON_BLACK`            | **`BLACK_ON_MINT`**, `BLACK_ON_WHITE`, `MINT_ON_BLACK`, `WHITE_ON_BLACK`                      |                                                                     |
| `lockupTheme`    | `Afterpay.theme.lockup.BLACK`                   | **`BLACK`**, `WHITE`, `MINT`                                                                  | Make sure the `logoType` is set to `lockup`                         |
| `size`           | `Afterpay.size.SM`                              | `XS`, `SM`, **`MD`**, `LG`                                                                    | These are the different messaging sizes supported                   |
| `isEligible`     | `false`                                         | **`true`**, `false`                                                                           |                                                                     |
| `modalLinkStyle` | `Afterpay.modalLinkStyle.CIRCLED_AFTERPAY_ICON` | **`CIRCLED_INFO_ICON`**, `LEARN_MORE_TEXT`, `MORE_INFO_TEXT`, `CIRCLED_QUESTION_ICON`, `NONE` |                                                                     |
| `showUpperLimit` | `false`                                         | **`true`**, `false`                                                                           |                                                                     |
| `showLowerLimit` | `false`                                         | **`true`**, `false`                                                                           |                                                                     |
| `modalTheme`     | `Afterpay.theme.modal.WHITE`                    | **`MINT`** ,`WHITE`                                                                           |                                                                     |

```html
<script>
    window.addEventListener('Afterpay.ready', function() {
      Afterpay.createPlacements({
        targetSelector: '.product-price-selector',
        attributes: {
          locale: Afterpay.locale.EN_GB,
          currency: Afterpay.currency.GBP,
          amount: 120,
          amountSelector: '.placement-card .product-price-selector',
          size: Afterpay.size.SM,
        }
      });
    });
  </script>
```