# 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, so c

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](/platforms/embedded-payments/shuttlejs/), so card data stays with Shuttle and doesn't enter your platform. The page that hosts the iframe is still yours to protect: see [Your PCI DSS obligations](/platforms/getting-started/pci-dss/) for what PCI DSS still asks of you.

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

### [Merchant Setup](/platforms/embedded-payments/onboarding/)

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](/platforms/embedded-payments/onboarding-integration-guide/) · [Merchant Setup Options](/platforms/embedded-payments/onboarding-options/). Screen by screen: [Merchant Setup user guide](/platforms/user-guides/onboarding/).

### [Checkout](/platforms/embedded-payments/checkout/)

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](/platforms/embedded-payments/checkout-integration-guide/). Screen by screen: [Checkout user guide](/platforms/user-guides/checkout/).

### [Express Checkout](/platforms/embedded-payments/express-checkout/)

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.

### [BNPL Messaging](/platforms/embedded-payments/bnpl-messaging/)

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.

### [Merchant View](/platforms/embedded-payments/activity-view/)

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](/platforms/embedded-payments/activity-view-integration-guide/) · [Merchant View Options](/platforms/embedded-payments/activity-view-options/). Screen by screen: [Merchant View - Operations](/platforms/user-guides/operations/) and [Merchant View - Admin](/platforms/user-guides/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](/platforms/user-guides/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](/platforms/embedded-payments/shuttlejs/), 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](/platforms/embedded-payments/shuttlejs/) for available releases, SRI checksums, and upgrade notes.