Afterpay.js Reference

Attribute List

Amount

The value provided to the AfterpayPlacement through the amount attribute reflects the full price displayed to the customer on the page. The library calculates the installments and displays the messaging appropriately.

On a product page, the amount should be the product price. On the cart page, the amount should be the total.

The Afterpay Messaging will automatically calculate the new instalment price when the amount attribute changes.

HTML

1
<afterpay-placement data-amount="400"></afterpay-placement>

JavaScript

1
const AfterpayPlacement = new Afterpay.AfterpayPlacement()
2
AfterpayPlacement.amount = 400;

amount-selector

Accepts the CSS selector corresponding to the price element on the page. The AfterpayPlacement element reads the price text from the page and sets the amount attribute on the component.

This attribute takes the second highest precedence after amount, and if neither are specified the default amount is set to zero.

HTML

1
<div class="pdp-wrapper">
2
   <span id="productPrice">59.99</span>
3
 </div>
4
5
<afterpay-placement
6
   data-amount-selector ="#productPrice">
7
</afterpay-placement>

Configuring the placement with data-amount-selector enables the placement to track updates to the price element. When a change is detected, the installment messaging automatically updates with the new calculated installment amount.

amount-mutation-selector

Accepts any CSS selector corresponding to the “target” element on the page to watch for changes.

When amount-mutation-selector is defined, an attribute to retrieve the current amount on the page must also be defined. There are two ways to achieve this:

1. Setting data-amount .

2. Retrieving the price text from data-amount-selector.

HTML

1
<afterpay-placement
2
     data-amount-mutation-selector = "#targetElement"
3
     data-amount-selector ="#productPrice">
4
</afterpay-placement>

Useful for eCommerce platforms like Shopify and BigCommerce where the product price is available to template pages.

HTML

1
<afterpay-placement
2
     data-amount-mutation-selector = "#targetElement"
3
     data-amount ="{{product.price}}">
4
</afterpay-placement>

badge-theme

Themes specific to data-logo-type = "badge" and data-logo-type="compact-badge"
See the logo-type section for details on switching between logos.

cart-is-eligible

Accepted values: true, false
When true, the price paragraph displays the normal installment messaging.
When false, the price paragraph renders Afterpay not available messaging.

For more information, see Set Messaging For Unavailable Items.

cbt-enabled

Displays Afterpay cross border trade information in the modal content.

currency

When provided, formats the currency for a given locale.

HTML

1
<afterpay-placement
2
	data-amount="300"
3
	data-locale="en_CA"
4
	data-currency="USD">
5
</afterpay-placement>

data-amount-range

When you specify a range of possible prices for a product using the data-amount-range attribute and the data-amount attribute is set to 0, a new messaging variant appears. This new messaging variant is based on the lowest price within the range that fits the minimum and maximum price thresholds set by the merchant.

HTML

1
<afterpay-placement
2
 data-amount="0"
3
 data-locale="en_US"
4
 data-min="100"
5
 data-max="1000"
6
 data-amount-range="[95, 111.11, 222, 333.33, 444, 555.55, 666, 777.777, 888, 999.99, 1111]"             
7
 data-currency="USD">
8
</afterpay-placement>

In the HTML code example above, the message displayed is:

When the above attributes are set and the data-amount is a valid amount, the messaging with the exact instalment amount is displayed.

decimal-separator

Accepts: ".", ","
Sets how the component should parse the provided amount.

intro-text

The first word(s) of the Afterpay Messaging Paragraph.

HTML

1
<afterpay-placement
2
	data-amount="300"
3
	data-intro-text="Pay in"
4
	data-currency="USD">
5
</afterpay-placement>

is-eligible

Accepted values: true, false
When true, the price paragraph displays the normal installment messaging.
When false, the price paragraph renders “Afterpay not available” messaging

For more information see Set Messaging For Unavailable Items

locale

Accepted values: en_US, en_AU, en_NZ, en_CA, en_GB, fr_CA

logo-type

Accepted values: badge, lockup, compact-badge

Badge	Lockup	Compact Badge
See badge themes for all variants	 See lockup themes for all variants.	 See badge themes for all variants.

Badge HTML

Badge:

1
<afterpay-placement
2
	data-amount="55.95"
3
	data-locale="en_AU"
4
	data-logo-type="badge">
5
</afterpay-placement>

Lockup:

1
<afterpay-placement
2
	data-amount="55.95"
3
	data-locale="en_AU"
4
	data-logo-type="lockup">
5
</afterpay-placement>

Compact Badge:

1
<afterpay-placement
2
	data-amount="55.95"
3
	data-locale="en_AU"
4
	data-logo-type="compact-badge">
5
</afterpay-placement>

lockup-theme

Accepted values are: mint, black, and white Mint

Black

White

mobile-view-layout

Changes the price table layout for mobile devices and on smaller screen sizes.

Accepted values: two-by-two, four-by-one

Above - two-by-two layout.

modal-id

An attribute provided by Afterpay to display custom modal content.

1
<afterpay-placement
2
     data-modal-id="en_US-theme-white-lockup"
3
     data-amount="400">
4
</afterpay-placement>

modal-link-style

Value	Column Title
circled-info-icon	ⓘ
learn-more-text	Learn More
more-info-text	More Info
circled-question-icon
none	No icon or text displayed

HTML

1
<afterpay-placement
2
     data-locale="en_AU"
3
     data-currency="AUD"
4
     data-amount="120.00"
5
     data-modal-link-style="circled-question-icon">
6
</afterpay-placement>

Fully Customize “learn more link” using Slots

Provide a child element to AfterpayPlacement with the attribute/value pair slot="learn-more-link" to render a custom element which opens the Afterpay information modal when clicked.

For example:

1
<afterpay-placement>
2
      <img slot="learn-more-link" src="./custom-info-icon.png" >
3
</afterpay-placement>

modal-theme

Configures the modal theme using one of two predefined colors: mint and white.

1
<afterpay-placement
2
     data-locale="en_AU"
3
     data-currency="AUD"
4
     data-amount="120.00"
5
     data-modal-theme="white">
6
</afterpay-placement>

White and Mint Modal Themes

payment-amount-is-bold

Accepts a boolean, true , or false. True = payment amount is in bold.

You can also apply this attribute to the afterpay-price-table component:

In the example above, the $50 prices are all in bold.

price-table-theme

Configures the modal theme using one of two predefined colors: mint (default), and white.

Mint Theme

Mint Theme HTML

1
<afterpay-placement 
2
    data-type="price-table" 
3
    data-price-table-theme="mint" 
4
    data-amount="200">
5
</afterpay-placement>

White Theme

White Theme HTML

1
<afterpay-placement 
2
    data-type="price-table" 
3
    data-price-table-theme="white" 
4
    data-amount="200">
5
</afterpay-placement>

show-interest-free

Accepts a boolean, true , or false. If neither are provided, defaults to true

True example

*Or 4 interest-free payments of $10.25 with *

False example

*Or 4 payments of $10.25 with *

show-lower-limit

Determines whether to show the lower amount e.g) **$1.00** –$1,000 for products outside of the provided minimum/maximum threshold. See setting a price range

Accepts a boolean, true , or false. If neither are provided, defaults to true

True example

available for orders between $1 -$2,000.

False example

available for orders over $1.

show-upper-limit

Accepts a boolean, true , or false. If neither are provided, defaults to true.

True example

available for orders between $1 -$2,000.

False example available for orders over $1.

show-with

Accepts a boolean, true , or false. If neither are provided, defaults to true

True example

or 4 interest-free payments of $75.00 with

False example

or 4 interest-free payments of $75.00

size

Accepted values: xs, sm, md, lg
The default size for an AfterpayPlacement is md (medium).

thousands-separator

Accepts: ".", ","
Sets how the component should parse the provided amount.

By default, US, CA, AU, and NZ use a comma to parse the amount in thousands.

However, in Europe, the thousands separator is automatically configured to accept amounts formatted with a decimal in the thousands place.

type

Refer to constants for a list of possible values.

Price Table

1
<afterpay-placement
2
  data-type="price-table"
3
  data-amount="400"
4
<Info>
5
</afterpay-placement
6
</Info>

1
const priceTable = new Afterpay.AfterpayPlacement()
2
priceTable.type = Afterpay.placementTypes.PRICE_TABLE
3
priceTable.amount = 400;
4
document.body.appendChild(priceTable);

Price Paragraph

1
<afterpay-placement
2
  data-type="price-paragraph"
3
  data-amount="400"
4
<Info>
5
</afterpay-placement
6
</Info>

1
const placement = new Afterpay.AfterpayPlacement()
2
placement.type = Afterpay.placementTypes.PRICE_PARAGRAPH
3
placement.amount = 400;
4
document.body.appendChild(placement);

Constants

1
console.log(Afterpay.locale.EN_US) //  "en_US"
2
console.log(Afterpay.theme.lockup) //  "{"BLACK":"black","WHITE":"white","MINT":"mint"}"
3
console.log(Afterpay.theme.lockup.BLACK) //  "black"

Functions

Window Events

Constructors

Constructors must be instantiated with “new”.

const Placement = new Afterpay.AfterpayPlacement();

Full example:

1
// setup event listener for the Afterpay.js initialization function. 
2
3
window.addEventListener("Afterpay.ready", function(){
4
    const Placement = new Afterpay.AfterpayPlacement();
5
    Placement.locale = "en_AU";
6
    Placement.amount = 40.00;   
7
8
    const parentElement = document.getElementById("#product-price-wrapper")
9
    parentElement.appendChild(Placement);
10
11
});