# Checkout integration guide

> Follow the steps below to implement the checkout component:

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](/platforms/reference/operations/createcheckout/)

## Page embedding

* Include the current version of `shuttle.js` in your checkout page (see [shuttle.js](/platforms/embedded-payments/shuttlejs/) 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](/platforms/reference/operations/tags/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](/platforms/reference/operations/tags/checkouts/#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](/platforms/reference/webhooks/) API for more details.