Add The Button

We provide two buttons, one is a sandbox button for testing. The other is a production button for live use.

Import the JavaScript

This script tag is used to load Afterpay’s button JavaScript SDK into a webpage. Import the AfterpayButton.js script as a script tag.

Test your integration with the Sandbox Button. When you’re satisfied, switch to the Production Button.

Sandbox Button

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

Production Button

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

Add the Afterpay Button Element

Insert the following HTML to initialize the afterpay-button element.

You need your merchant public key, provided by Afterpay. Public keys are safe to publish in JavaScript code or mobile applications.

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

Region Specific Configuration

If you are a merchant based in Australia, or the United Kingdom, include region="AU" or region="UK". Merchants in the United States or Canada do not need a regional setting.

Changing the appearance of the button - optional

See the Changing the Appearance page to cutomize the button.

Set Order Attributes

Before a customer can checkout with Afterpay, we need to know, at a minimum:

• Merchant Reference - The merchant’s unique order id/reference that this payment corresponds to. This is used to reconcile orders in the Afterpay 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 (US, UK, and Canada) or the virtual Mastercard (Australia)
• Currency - The currency in ISO 4217 format. The value provided must correspond to the currency of the Merchant account making the request
• Consumer details - The customer’s phone number, name, and email address
• Shipping details - The shipping name and shipping address
• Items - This contains information about the line items in the order

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
);

Buy Now Flag

Enabling buyNow = true shows a Buy Now button at checkout. If not set, the button displays Confirm instead.

Increase Conversion Rates

Providing customer details speeds up checkout by pre-filling name and address fields.

Object Types

In-Store Pickup

If the customer chooses in-store pickup, no shipping address is needed. Instead, set instorePickup = true.

Money Object

Item object

Consumer object

Contact Object