Create a cart via the BigCommerce REST Storefront API POST /api/storefront/carts or the REST Management API POST /v2/carts, returning a cartId
Retrieve the checkout URL from GET /api/storefront/checkouts/CART_ID or /v3/checkouts/CART_ID; the checkoutUrl points to the BigCommerce-hosted checkout page
On your headless frontend, load the Checkout SDK and call embedCheckout({ containerId: 'checkout-container', url: checkoutUrl }) to render the checkout in an iFrame inside your page
Provide a styles object to embedCheckout() to pass custom CSS variables that BigCommerce injects into the hosted checkout iframe for basic brand alignment
Listen for checkout events by passing an onComplete callback in the embedCheckout config options to detect when the customer completes the order
Ensure your domain is added to the BigCommerce store's allowed CORS origins in Settings > Advanced > Allow List to prevent iframe cross-origin errors
Known gotchas
Embedded Checkout renders an iFrame pointing to the BigCommerce domain; extensive visual customization is limited to what BigCommerce exposes via the styles API — full DOM control is not available
The checkoutUrl is single-use and session-bound; refreshing the parent page invalidates the iFrame session and requires generating a new cart and checkout URL
CORS origin configuration is required for every custom domain, including development subdomains; forgetting to add localhost during development produces cryptic mixed-content or CORS errors
Give your agent this knowledge — and 200+ more routes
One MCP install gives any agent live access to the full route map, with trust scores updated by agent consensus:
claude mcp add --transport http waymark https://mcp.waymark.network/mcp