Checkout integration guide

Follow the steps below to implement the checkout component:

1. (serverside) Create a checkout via the checkout creation API, this will return you an ID
2. (clientside) Embed the checkout into your checkout page, using our Web SDK
3. (clientside) Handle events via our browser events API
4. (serverside) Handle webhooks

Checkout creation

Please see: Create a checkout

Page embedding

• Include the current version of shuttle.js in your checkout page (see shuttle.js for versions and SRI checksums)
• Embed the checkout component in your checkout page
• If using a single page app eg React, call Shuttle.bind(); after embedding the component

<script src="https://app.shuttleglobal.com/shuttle-1.4.7.js" integrity="sha384-4M/kxbiSD8jmfTM8DWfYMqTBpp/0A4G9CpLPtYNSqfIDEVDJ6Uix/lgs2nnhwjjW" crossorigin="anonymous"></script>

<div data-shuttle-checkout="2b7a186da84441f98dbac1c773150325"></div>

Please see: Checkouts

Handling events

You should handle the following browser events:

• PAYMENT_SUCCESS: To detect when a payment has been successfully submitted (approved or pending)
• PAYMENT_CLOSE: (optional) If you are using a dismissable popup
• CHECKOUT_DISPLAY: (optional) For iFrame size / modal popups

Please see: Browser events

Alternatively, you can use a success_url / cancel_url in “Checkout Creation” and Shuttle will redirect here upon successful (or pending) payment.

Handling webhooks

To handle both browser closing, connectivity issues and pending payment, you should handle the following webhooks:

Payment / Authorisation:

• PAYMENT.SUCCESS: A payment was successful
• PAYMENT.FAILED: A payment failed
• PAYMENT.PENDING: A payment is pending (you will get a subsequent PAYMENT.SUCCESS or PAYMENT.FAILED webhook)
• PAYMENT.UNRESOLVED: A payment status is unresolved ie manual intervention required (you will get a subsequent PAYMENT.SUCCESS or PAYMENT.FAILED webhook)

Tokenisation:

• PAYMENT_METHOD.ACTIVE: A payment method is active
• PAYMENT_METHOD.FAILED: A payment method failed
• PAYMENT_METHOD.PENDING: A payment method is pending

Scheduled Payments / Recurring Payments:

• CONTRACT.START: The payment(s) have been successfully scheduled

Additional webhooks are available, please see the Webhooks API for more details.