A checkout is a hosted payment experience you can embed in your application. It handles payment method capture, 3D Secure authentication, and receipt display — so you don't have to build any of that yourself.

Integration Flow

Server-side: Create a checkout session via POST /checkouts with your payment options
Client-side: Include shuttle.js on your page
Client-side: Add a div with the checkout ID to render it

<div data-shuttle-checkout="CHECKOUT_ID" data-shuttle-style="INLINE"></div>
<script src="https://app.shuttleglobal.com/shuttle-1.4.X.js"></script>

If the div is added to the DOM after page load (e.g., in a React app), call Shuttle.bind() to trigger rendering.

Display Styles

DEFAULT: presents a modal popup over your page
INLINE: renders the checkout directly within your div

Payment Options

Checkouts accept all the same fields as the Create Payment API (amount, currency, account, frequency, etc.) except payment_method — the checkout captures that from the customer directly.

Additional UX options control the hosted experience: custom titles, logos, locale, restricting payment method types, and controlling save-card behaviour.

Browser Events

Listen for these window messages to handle the checkout result in a single-page app:

Event	Description
`PAYMENT_CLOSE`	The checkout dialogue was closed. Check `success` or `cancelled`
`PAYMENT_SUCCESS`	A payment was successfully processed (raised before `PAYMENT_CLOSE`)
`PAYMENT_FAILURE`	A payment attempt failed (user is prompted to retry)

For multi-page apps, use the success_url and cancel_url options to redirect the user after payment.