For AI agents: a documentation index is available at the root level at /llms.txt and /llms-full.txt. Append /llms.txt to any URL for a page-level index, or .md for the markdown version of any page.
HomeGuides
HomeGuides
  • About Afterpay
    • What Is Afterpay?
    • How Does Afterpay Work?
  • Afterpay Button
    • Afterpay Messaging
  • Express Checkout
    • Express Checkout Overview
    • Adding the Afterpay Express Checkout Button
    • Process The Credit Card
    • Complete the Express Checkout Process
    • Integrated Shipping
    • Checkout Widget
  • Cash App Pay
    • Using the Cash App Pay Button
    • Getting Started
    • Advanced Rendering Control
    • Mobile Redirection
    • Customer On-File Payments
LogoLogo
On this page
  • Rendering the Checkout Widget
  • Updating the Order Total
Express Checkout

Checkout Widget

Was this page helpful?
Previous

Using the Cash App Pay Button

Next
Built with

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