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

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

<afterpay-placement
    data-is-eligible="false"
    data-locale="en_GB"
    data-currency="GBP"
    data-amount="120.00">
</afterpay-placement>

eligibilityeligibility

Cart Page
Add the attribute data-cart-is-eligible to the <afterpay-placement> tag and assign its value to false.

<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


Additional Components

Price Table ( Harvey Balls )

 <afterpay-price-table></afterpay-price-table>
AttributeType
data-amountNumber (required)
data-localeAfterpay.locale
data-currencyAfterpay.currency
data-price-table-themeAfterpay.theme.priceTable

Rendering via <afterpay-placement>

  <afterpay-placement
    data-type="price-table"
    data-amount="100.00"
    data-currency="en_GB"
> </afterpay-placement>

What’s Next