Checkout Integration Guide

Follow the steps below to implement the checkout component:

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

Checkout Creation

Page Embedding

Include the latest shuttle.js script in your checkout page
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.3.js" integrity="sha384-1sQj8veCQ/ii3HrET278lGljNlzfSEucMTnxLlU/S2/0dL+V7wsO+VLN0dDGPu/f" crossorigin="anonymous"></script>

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

Please see: Page Embedding

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
PAYMENT_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 intevention 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.