UX Components
Shuttle provides a set of ready-made UX components that you can embed directly into your platform. Each component is delivered as an iFrame via shuttle.js and handles its own PCI DSS scope, keeping card data out of your platform entirely.
All components are instantiated via a server-side deep link that encodes the context and user session. The deep link ID is then passed to a data-shuttle-embed attribute on your page, and shuttle.js handles the rest.
Each component below has a page here, describing how to embed and configure it, and a user guide describing what the merchant or customer actually sees on every screen. Use this section to integrate; use the guide when you need to know what a control does, or to write your own help material for your merchants.
Components
Allows a merchant to connect and configure their payment processor(s). Presented in your merchant admin interface, it handles processor selection, OAuth or API key authentication, checkout customisation, and fraud tool configuration. Shuttle manages the T&Cs on your behalf, or you can incorporate them into your own.
Integrating: Merchant Setup Integration Guide · Merchant Setup Options. Screen by screen: Merchant Setup user guide.
Captures payment details from your customers. Renders as a modal popup or inline within your page, supporting one-time payments, recurring contracts, saved payment methods, and wallet payments. Communicates back to your page via JavaScript window.postMessage events or redirect URLs.
Integrating: Checkout Integration Guide. Screen by screen: Checkout user guide.
Integrates wallet-based express checkout buttons (e.g. PayPal) directly into your page. The merchant's connected gateway authenticates the customer and returns an account, shipping address, and payment token — your server then completes the payment via the REST API. Requires shuttle.js 1.3 or later.
Injects buy-now-pay-later marketing messages from connected providers onto your product and checkout pages. If the merchant has no connected BNPL providers, nothing is rendered. Requires shuttle.js 1.3 or later.
Embeds a searchable view of payment activity — transactions, accounts, and recurring contracts — directly into your platform. Can be scoped to a specific account or contract, making it suitable for embedding in merchant admin portals or your own support tooling.
Integrating: Merchant View Integration Guide · Merchant View Options. Screen by screen: Merchant View - Operations and Merchant View - Admin.
What each control actually does
Every control in Merchant Setup, Checkout and Merchant View follows the same rules as the equivalent API call, and those rules are written once in Business Rules: what is accepted, what is refused and why, what changes beyond the obvious, and what reaches your webhooks. When you need to know whether a screen is stricter than the API you are integrating against, that is where it is recorded.
Referencing shuttle.js
Every component above is delivered by shuttle.js, the client-side library you reference on your page. It renders the iFrames, binds embeds via data-shuttle-embed, and dispatches window.postMessage events back to your page. See its version history for available releases, SRI checksums, and upgrade notes.
Updated 12 days ago