Skip to main content
The Checkout Embed SDK lets you open Shoppex checkout in a modal, directly on your site.

​
What this is (and what it is not)

Use caseBest choice
Open checkout in a modal from any pageCheckout Embed SDK (window.Shoppex)
Build a full storefront UI (products/cart/state)Storefront SDK (@shoppex/sdk)
Naming we should keep in docs and product language:
  • Product name: Checkout Embed SDK
  • Short name: Embed SDK
  • JS global: window.Shoppex

​
Quick Start

<script src="https://checkout.shoppex.io/embed/embed.iife.js" defer></script>

​
Option A: Data attributes (fastest)

<button
  data-shoppex-product-id="PRODUCT_ID"
  data-shoppex-variant-id="VARIANT_ID"
  data-shoppex-quantity="1"
  data-shoppex-email="[email protected]"
>
  Buy now
</button>

​
Option B: JavaScript API (more control)

<script>
  Shoppex.open({
    items: [{ productId: 'PRODUCT_ID', variantId: 'VARIANT_ID', quantity: 1 }],
    theme: 'auto',
    returnUrl: 'https://your-site.com/thank-you',
    couponCode: 'SAVE20'
  });
</script>

​
Common events

document.addEventListener('shoppex:success', (event) => {
  console.log('Paid invoice:', event.detail.invoiceId);
});

document.addEventListener('shoppex:error', (event) => {
  console.error('Checkout error:', event.detail.error);
});

​
Current behavior to know

  • Multiple items are accepted by the API, but current modal flow uses the first valid item.
  • Quantity is normalized to 1..999.
  • Invalid or empty items do not open checkout.

​
Next Steps

Copy/Paste Snippets

Ready-to-use snippets for Next.js, React, WordPress, and Webflow.

Embed SDK Reference

Full config, data attributes, API methods, and event contracts.

Security & Troubleshooting

CSP, origin rules, and production debugging checklist.

Embed Demo

Interactive demo with real embed patterns.

Storefront SDK

Build full storefront UI when modal-only checkout is not enough.