Advanced Configuration
Attribute List
Attribute | Type | Requirement |
---|---|---|
| Number (decimal) | Required if |
| String (CSS selector) | Required if |
Price ObserversAssign 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 |
---|---|---|
| Boolean | true |
| Boolean | true |
| Boolean | true |
| Boolean | true |
| Boolean | true |
| Boolean | true |
| Boolean | false |
| Boolean | false |
data-show-lower-limit
data-show-lower-limit


<afterpay-placement
data-amount="2000"
data-locale="fr_FR || es_ES || it_IT"
data-currency="EUR"
data-show-lower-limit="false">
</afterpay-placement>
Set Messaging for unavailable items
Product Page
Add the attributedata-is-eligible
to the<afterpay-placement>
tag and assign its value to false.<afterpay-placement data-is-eligible="false" data-locale="fr_FR || es_ES || it_IT" data-currency="EUR" data-amount="120.00"> </afterpay-placement>
Cart Page
Add the attributedata-cart-is-eligible
to the<afterpay-placement>
tag and assign its value to false.<afterpay-placement data-cart-is-eligible="false" data-locale="fr_FR || es_ES || it_IT" data-currency="EUR" 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 |
---|---|---|
| "or" |
|
| "circled-info-icon" |
|
Documentation on dynamically creating Afterpay Placements can be found below:
Dynamic Placements
Additional Components
Price Table ( Harvey Balls )


<afterpay-price-table></afterpay-price-table>
Attribute | Type |
---|---|
data-amount | Number (required) |
data-locale | Afterpay.locale |
data-currency | Afterpay.currency |
data-price-table-theme | Afterpay.theme.priceTable |
Rendering via <afterpay-placement>
<afterpay-placement
data-type="price-table"
data-amount="100.00"
data-currency="EUR"
> </afterpay-placement>
Updated 5 months ago