Clearpay Online Europe

The Clearpay Online Europe Developer Information Hub

Welcome to the Clearpay Online Europe developer information hub. You'll find comprehensive guides and documentation to help you start working with Clearpay Online Europe as quickly as possible, as well as support if you get stuck. Let's jump right in!

JavaScript Library

📘

Utilising the Global JavaScript Library

As an Afterpay organisation, Clearpay utilises Afterpay's global JavaScript library.

Afterpay's JavaScript Library allows you to easily display payment amounts throughout the checkout flow.

To display the Afterpay Lockup, visit Afterpay's Developer docs for more information: (https://developers.afterpay.com/afterpay-online/docs/afterpay-messaging)

Loading the Library

The Afterpay.js script loads various Clearpay Messaging and Assets for merchants to utilize throughout their store. To load the Afterpay.js library add the following async script tag to the <head> section of your site.

<script src="https://js.sandbox.afterpay.com/afterpay-1.x.js"
    async
></script>

Clearpay Simulator

To display the Instalment Messaging add the <afterpay-placement> tag to the product and cart HTML files. The messaging should be placed immediately below the price element on both product and cart pages.


To render Clearpay messaging with the correct language and calculated installment amount, provide the locale, currency, and amount attributes to the custom element.

<afterpay-placement 
    data-locale="fr_FR"
    data-currency="EUR" 
    data-amount="44.00"
 ></afterpay-placement>
<afterpay-placement 
    data-locale="es_ES"
    data-currency="EUR" 
    data-amount="44.00"              
        async
 ></afterpay-placement>
<afterpay-placement 
    data-locale="it_IT"
    data-currency="EUR" 
    data-amount="44.00"
        async
 ></afterpay-placement>

Attribute

Type

Default

data-locale

String required

data-currency

String required

data-amount

String required

data-show-upper-limit

String

"true"

data-show-lower-limit

String

"true"

data-badge-theme

String

"black-on-mint"

Setting a price range to show Clearpay (optional)

data-min and data-max define the minimum and maximum for the messaging. When a product or cart total is outside of this range, the messaging will read like so:

Often merchants want to restrict customers from using Clearpay on items that fall outside a specific price range. To configure the minimum an maximum threshold, add the following attribute to the Afterpay.js Script tag:
E.g)

<script
    src="https://js.sandbox.afterpay.com/afterpay-1.x.js"
    data-min="1.00"
    data-max="1000.00"
></script>

Attribute

Type

Default

data-min

String

"1.00"

data-max

String

"1000.00"

Please note: The min and max values only affect the amounts used in the simulator.

Updated 10 days ago


Next Step

Examples

JavaScript Library


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.