Express Checkout

Checkout Widget

Place the Checkout Widget component on your site if the order value is subject to change after the Express Checkout flow. The widget displays the customer payment schedule and can be updated as the total changes (e.g. in response to shipping costs and promo codes).

You can also use the widget to enable dynamic order total updates on a review page for both Express Checkout and standard Afterpay, Clearpay (UK) and Cash App Afterpay (US) Checkout.

checkout-widget.png

It serves several purposes:

  • To ensure the customer has seen and agreed to an accurate payment schedule

  • To verify that the final amount captured matches what the customer has seen

  • To inform the merchant of any barriers to purchase, for instance the customer having gone over their payment limit with Afterpay, Clearpay (UK), or Cash App Afterpay (US)

checkout-widget2.png

Rendering the Checkout Widget

The widget can be rendered into a target container on your page using Javascript. It is responsive and fits any container with a minimum width of 300 pixels.

1<html>
2<body>
3 <afterpay-widget>           
4 </afterpay-widget>
5 <div id="afterpay-widget-container"></div>
6  <script>
7    // Ensure this function is defined before loading afterpay-button.js
8    afterpayWidget.widgetConfig = {
9       target: '#afterpay-widget-container',
10       locale: 'en-US',
11       onReady: function (event) {
12         // Fires when the widget is ready to accept updates. 
13         console.log('Widget onReady', event);
14       },
15       onChange: function (event) {
16         // Fires after each update and on any other state changes.
17         // See "Getting the widget's state" for more details.
18         console.log('Widget onChange', event);
19       },
20     }
21    }
22  </script>
23  </script>
24  <script src="https://static-us.afterpay.com/javascript/button/afterpay-button.js" type="text/javascript"></script>
25</body>
26</html>

Updating the Order Total

Any time the order total changes (e.g. a change of shipping option, promo code, or cart contents), the widget must be notified of the new amount. Make an initial update in the onReady callback to initialize the widget.

1afterpayWidget.update({
2             "amount": {
3               "amount": “123.45”,
4               "currency": “USD”
5             }
6           })
Note

The information on this page also applies to Cash App Afterpay (US) and Clearpay (UK).