Clearpay Messagingjavascript-library

Advanced Configuration

Attribute List

AttributeTypeRequirement
data-amountNumber (decimal)Required if data-amount-selector is omitted
data-amount-selectorString (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

AttributeTypeDefault
data-show-interest-freeBooleantrue
data-is-eligibleBooleantrue
data-cart-is-eligibleBooleantrue
data-show-upper-limitBooleantrue
data-show-lower-limitBooleantrue
data-show-withBooleantrue
data-payment-amount-is-boldBooleanfalse
data-cbt-enabledBooleanfalse

data-show-lower-limit

1<afterpay-placement
2    data-amount="2000"
3    data-locale="en_GB"
4    data-currency="GBP"
5    data-show-lower-limit="false">
6</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.

1<afterpay-placement
2   data-is-eligible="false"
3   data-locale="en_GB"
4   data-currency="GBP"
5   data-amount="120.00">
6</afterpay-placement>
eligibility

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

1<afterpay-placement
2   data-cart-is-eligible="false"
3   data-locale="en_GB"
4   data-currency="GBP"
5   data-amount="120.00">
6</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

AttributeDefaultAccepted 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