Add the Clearpay Button

This topic shows you how to add the Clearpay Button to your page, and also how to change the appearance of the button.

Add the Clearpay Button

Follow the instructions below:

1. Import the Clearpay.js script as a script tag:

1
<script src="https://static-us.afterpay.com/javascript/button/afterpay-button.js" type="text/javascript"></script>

2. Add the Clearpay Button element. To do this, insert the following HTML to initialize the afterpay-button element:

1
<afterpay-button merchantPublicKey="d2da7000bb4811eb85290242ac130003"></afterpay-button>

You will need your merchant public key, provided by Clearpay. Your public key is used solely to identify your account with Clearpay. The public key can safely be published in places like your JavaScript code, or in an Android or iPhone app. .

3. Add the region setting. You must add a region setting to HTML afterpay-button element above. The code is:

UK = region="UK"

Set the Order Attributes

Assuming you have added the Clearpay Button by following the instructions above, your next task is to make sure the order attributes are available. Before a customer can checkout with Clearpay, Clearpay needs the following information:

• Merchant Reference - This is your (the merchant’s) unique order id/reference that this payment corresponds to. We use it reconcile orders in the Clearpay merchant portal

• Amount - The total amount of the order to be charged to the customer. This includes any shipping and tax, minus any discounts. This is the maximum amount that you can charge to the virtual Visa card

• Currency - The currency in ISO 4217 format. The value provided must correspond to the currency of the Merchant account that makes the request

• Consumer details - The customer’s phone number, name, and email address

• Shipping details - The shipping name and shipping address

• Items - Information about the line items in the order

An example of the above attributes is in the JavaScript below:

1
const afterpayButton = document.getElementsByTagName('afterpay-button')[0];
2
afterpayButton.addEventListener('click', 
3
    function (e) {
4
        afterpayButton.merchantReference= "";
5
        //Money Object 
6
        afterpayButton.amount= "";
7
        afterpayButton.currency= "";
8
        //Item Object
9
        afterpayButton.items= JSON.stringify(lineItems);
10
        //Consumer Object 
11
        afterpayButton.consumerPhoneNumber= "";
12
        afterpayButton.consumerGivenNames= "";
13
        afterpayButton.consumerSurname= "";
14
        afterpayButton.consumerEmail= "";
15
        //Contact Object 
16
        afterpayButton.shippingName= "";
17
        afterpayButton.shippingLine1= "";
18
        afterpayButton.shippingLine2= "";
19
        afterpayButton.shippingArea1= "";
20
        afterpayButton.shippingArea2= "";
21
        afterpayButton.shippingRegion= "";
22
        afterpayButton.shippingPostcode= "";
23
        afterpayButton.shippingCountryCode= "";
24
        afterpayButton.shippingPhoneNumber= "";
25
        // In-Store Pickup
26
        afterpayButton.instorePickup = false;
27
28
        //Contact Object 
29
        afterpayButton.billingName= "";
30
        afterpayButton.billingLine1= "";
31
        afterpayButton.billingLine2= "";
32
        afterpayButton.billingArea1= "";
33
        afterpayButton.billingArea2= "";
34
        afterpayButton.billingRegion= "";
35
        afterpayButton.billingPostcode= "";
36
        afterpayButton.billingCountryCode= "";
37
        afterpayButton.billingphoneNumber = "";
38
  
39
        // Buy Now Flag (CTA button)
40
        afterpayButton.buyNow = true;
41
  
42
        // Custom fields (optional)
43
       afterpayButton.custom = {
44
           "flightDetails":{
45
              "origin":"SFO"
46
           }
47
        }
48
    }, true
49
);

The Buy Now flag (CTA Button)

This attribute shows the customer a Buy Now button at the end of the Clearpay checkout flow. When it is not set, the button displays Confirm.

Object Types

Money Object

Item Object

This contains information about a line item in the order. The value given to the afterpayButton.items is a string. To pass line item details, provide an array of item objects using JSON.stringify. For example,
afterpayButton.items= JSON.stringify(itemsArray);

1
{
2
  "name": "Blue Carabiner",
3
  "sku": "12341234",
4
  "quantity": 1,
5
  "pageUrl": "https://merchant.example.com/carabiner-354193.html",
6
  "imageUrl": "https://merchant.example.com/carabiner-7378-391453-1.jpg",
7
  "price": {
8
    "amount": "40.00",
9
    "currency": "GBP"
10
  },
11
  "categories": [
12
    ["Sporting Goods", "Climbing Equipment", "Climbing", "Climbing Carabiners"],
13
    ["Sale", "Climbing"]
14
  ],
15
  "estimatedShipmentDate": "2021-03-01"
16
}

Consumer Object

Contact Object

Change the Appearance of the Clearpay Button (Optional)

To change the appearance of the button, see the Changing the Appearance topic.

Return to the Clearpay Button guide menu