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

# 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.
>
> Default values are 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                                               |                                                                     |
| introText      | Pay in                                        | In, in, Or, or, Pay, pay, Pay in, pay in                                        |                                                                     |
| 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>
```