ucp-embedded-checkout
Implement UCP Embedded Checkout Protocol — iframe/webview-based checkout UI for human escalation using JSON-RPC 2.0 over postMessage. Use when the checkout status is requires_escalation and the buyer needs a merchant-hosted UI.
Best use case
ucp-embedded-checkout is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Implement UCP Embedded Checkout Protocol — iframe/webview-based checkout UI for human escalation using JSON-RPC 2.0 over postMessage. Use when the checkout status is requires_escalation and the buyer needs a merchant-hosted UI.
Teams using ucp-embedded-checkout should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/ucp-embedded-checkout/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How ucp-embedded-checkout Compares
| Feature / Agent | ucp-embedded-checkout | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Implement UCP Embedded Checkout Protocol — iframe/webview-based checkout UI for human escalation using JSON-RPC 2.0 over postMessage. Use when the checkout status is requires_escalation and the buyer needs a merchant-hosted UI.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# UCP Embedded Checkout Protocol (EP) ## Before writing code **Fetch live spec**: Web-search `site:ucp.dev specification checkout-embedded` or fetch https://developers.google.com/merchant/ucp/guides/checkout/embedded for the exact JSON-RPC method definitions, handshake flow, and security requirements. ## Conceptual Architecture ### When Embedded Checkout Is Used When a checkout reaches `requires_escalation` status, the agent cannot resolve the issue via API alone. The checkout response includes a `continue_url` — the Platform opens this URL in an iframe or webview so the buyer can interact with the merchant's checkout UI directly. ### Communication Protocol The iframe communicates with the host (Platform) using **JSON-RPC 2.0 over `postMessage`**. Both sides send and receive structured messages. ### Key JSON-RPC Methods | Method | Direction | Purpose | |--------|-----------|---------| | `ec.ready` | Merchant → Host | Handshake; merchant declares which capabilities it delegates to the host | | `ec.start` | Merchant → Host | Checkout UI is visible and ready | | `ec.payment.credential_request` | Merchant → Host | Merchant asks host to acquire a payment credential | | `ec.line_items.change` | Merchant → Host | Cart was modified in the UI | | `ec.buyer.change` | Merchant → Host | Buyer details were updated | | `ec.complete` | Merchant → Host | Order was placed successfully | | `ec.messages.change` | Merchant → Host | Errors or warnings updated | | `ec.payment.instruments_change_request` | Merchant → Host | Merchant requests updated payment instruments | | `ec.payment.change` | Merchant → Host | Payment state was updated | | `ec.fulfillment.address_change_request` | Merchant → Host | Merchant requests updated fulfillment address | ### Handshake Flow 1. Host loads `continue_url` in a sandboxed iframe 2. Merchant sends `ec.ready` with a `delegate` array listing capabilities it wants the host to handle (e.g., `["payment.credential", "fulfillment.address_change"]`) 3. Host acknowledges and provides delegated capabilities 4. Merchant sends `ec.start` when UI is fully rendered ### URL Parameters The `continue_url` may include: - `ec_version`: Protocol version - `ec_auth`: Session validation token - `ec_delegate`: Comma-separated delegated actions ### Security Requirements - CSP with `frame-ancestors <host_origin>` — merchant page must allow being framed only by the Platform - Strict `postMessage` origin validation on both sides - iframe `sandbox` attribute: `allow-scripts allow-forms allow-same-origin` with `credentialless` - HTTPS required for all URLs - **Silent tokenization is strictly PROHIBITED when the trigger originates from the Embedded Checkout** ### W3C DOMException Error Codes Embedded Checkout methods may reject with W3C DOMException error codes: - `abort_error` — The operation was aborted - `security_error` — The operation violates security constraints - `not_supported_error` — The requested capability is not supported - `invalid_state_error` — The object is in an invalid state for this operation - `not_allowed_error` — The operation is not allowed in the current context ### Implementation Guidance **Business (iframe content):** - Render checkout UI at the `continue_url` - Implement the JSON-RPC sender/receiver over postMessage - Send `ec.ready` on load, `ec.start` when visible - Delegate payment credential acquisition to the host when possible - Send `ec.complete` with order details when checkout finishes **Platform (host):** - Open `continue_url` in a sandboxed iframe - Listen for postMessage events, parse JSON-RPC - Handle `ec.payment.credential_request` by invoking the payment provider - Handle `ec.complete` to update the agent's checkout state - Validate message origins strictly Fetch the exact current method signatures from the live spec before implementing.
Related Skills
woo-checkout
Customize WooCommerce checkout — classic and block-based checkout, custom fields, validation, order processing, and checkout extensibility. Use when modifying the checkout flow, adding custom checkout fields, or integrating checkout extensions.
ucp-checkout-rest
Implement UCP Checkout over the REST binding — create, get, update, complete, and cancel checkout sessions with proper headers, idempotency, status transitions, and error handling. Use when building REST-based UCP checkout endpoints or clients.
ucp-checkout-mcp
Implement UCP Checkout over the MCP (Model Context Protocol) binding — expose checkout operations as MCP tools for AI agents. Use when building an MCP server that AI agents like Claude or Gemini can call for commerce, or when integrating with Shopify's MCP endpoint.
ucp-checkout-a2a
Implement UCP Checkout over the A2A (Agent-to-Agent) binding — enable autonomous agent-to-agent commerce using Agent Cards and structured message parts. Use when building agent-to-agent commerce flows.
spree-checkout
Implement Spree's checkout — the Order state machine (cart → address → delivery → payment → confirm → complete), the Payment and Shipment sub-state machines, the return flow (ReturnAuthorization → CustomerReturn → Reimbursement → Refund), guest checkout, payment-step skipping for credit-covered orders, and the V3 checkout API surface. Use when building or customizing checkout flows, debugging state transitions, or wiring custom checkout steps.
shopify-checkout-ui
Build Shopify checkout UI extensions — extension targets, UI primitives, Preact/Remote DOM rendering, checkout APIs, metafield access, post-purchase extensions, and thank-you page customization. Use when customizing Shopify checkout.
saleor-checkout
Implement the Saleor checkout flow — checkout creation, line items, shipping/billing addresses, delivery methods, payment, and completion. Use when building checkout experiences.
medusa-cart-checkout
Implement Medusa v2 cart and checkout — cart lifecycle, line items, shipping and payment selection, sales channels, and checkout completion flow. Use when building cart and checkout features.
magento-checkout
Customize Magento 2 checkout — payment methods, shipping carriers, totals collectors, and checkout UI. Use when building custom payment/shipping integrations or modifying the checkout flow.
bc-checkout
Customize BigCommerce checkout — Checkout SDK, embedded checkout, server-side checkout API, custom checkout UI, and checkout extensions. Use when modifying the checkout experience or building headless checkout flows.
acp-checkout-rest
Implement the ACP REST checkout API — create, update, retrieve, complete, and cancel checkout sessions. Use when building merchant-side checkout endpoints, handling the checkout session state machine, or integrating with AI agent checkout flows.
acp-checkout-mcp
Implement ACP checkout as an MCP server, exposing checkout operations as MCP tools. Use when building an MCP-based commerce server for AI agents that use tool-calling to complete purchases.