Skip to main content
Use these snippets to integrate the Checkout Embed SDK quickly.
Replace all placeholder values:
  • PRODUCT_ID
  • GROUP_ID
  • VARIANT_ID
  • https://your-site.com/thank-you
'use client';

import Script from 'next/script';

declare global {
  interface Window {
    Shoppex?: {
      open: (options: {
        shopId?: string;
        groupId?: string;
        items: Array<{ productId: string; variantId?: string; quantity?: number }>;
        theme?: 'light' | 'dark' | 'auto';
        returnUrl?: string;
        email?: string;
        couponCode?: string;
        affiliateCode?: string;
        metadata?: Record<string, string>;
      }) => void;
    };
  }
}

export default function BuyButton() {
  const openCheckout = () => {
    window.Shoppex?.open({
      shopId: 'YOUR_SHOP',
      items: [{ productId: 'PRODUCT_ID', variantId: 'VARIANT_ID', quantity: 1 }],
      theme: 'auto',
      returnUrl: 'https://your-site.com/thank-you',
      affiliateCode: 'CREATOR123',
      metadata: { source: 'landing' },
    });
  };

  return (
    <>
      <Script
        src="https://checkout.shoppex.io/embed/embed.iife.js"
        strategy="afterInteractive"
      />
      <button onClick={openCheckout}>Buy now</button>
    </>
  );
}

​
Bonus: Programmatic Multi-Item Button

<button id="open-checkout">Checkout bundle</button>
<script src="https://checkout.shoppex.io/embed/embed.iife.js" defer></script>
<script>
  document.getElementById('open-checkout').addEventListener('click', () => {
    Shoppex.open({
      items: [
        { productId: 'PRODUCT_ID_1', variantId: 'VARIANT_1', quantity: 1 },
        { productId: 'PRODUCT_ID_2', quantity: 2 }
      ],
      theme: 'auto',
      couponCode: 'SAVE20'
    });
  });
</script>
Current modal flow uses the first valid item when multiple items are passed.

​
Group Embed Button

<button
  data-shoppex-group-id="GROUP_ID"
  data-shoppex-theme="auto"
  data-shoppex-referral-code="CREATOR123"
  data-shoppex-return-url="https://your-site.com/thank-you"
>
  Open group
</button>

<script src="https://checkout.shoppex.io/embed/embed.iife.js" defer></script>
Use this when you want buyers to choose one product from a Shoppex group inside the modal. The group view opens first, and when the buyer picks a product, Shoppex continues into the normal product checkout flow.

​
Hybrid Example: Your Own Product Cards + Shoppex Checkout

Use this when you already render your own catalog UI and only want Shoppex for the checkout modal. Fetch product data however you want, render your own cards, and put data-shoppex-product-id on the CTA button — Shoppex handles the rest. 
'use client';

import Script from 'next/script';

type Product = {
  id: string;
  title: string;
  price: string;
  imageUrl?: string;
};

export function ProductGrid({ products }: { products: Product[] }) {
  return (
    <>
      <Script
        src="https://checkout.shoppex.io/embed/embed.iife.js"
        strategy="afterInteractive"
      />

      <div className="grid gap-4 md:grid-cols-3">
        {products.map((product) => (
          <article key={product.id} className="rounded-xl border p-4">
            {product.imageUrl ? (
              <img src={product.imageUrl} alt={product.title} />
            ) : null}

            <h3>{product.title}</h3>
            <p>{product.price}</p>

            <button
              data-shoppex-product-id={product.id}
              data-shoppex-quantity="1"
              data-shoppex-theme="auto"
            >
              Buy now
            </button>
          </article>
        ))}
      </div>
    </>
  );
}
Notes:
  • The product card layout is yours, not Shoppex’s.
  • The checkout modal is Shoppex’s.
  • You can get products from the Storefront API, @shoppexio/storefront, or your own backend.
  • You do not need to copy any specific lib/shoppex.ts file from another project. That kind of helper is just one possible app structure.

​
Event Snippet (Analytics)

<script>
  document.addEventListener('shoppex:success', (event) => {
    console.log('Invoice paid:', event.detail.invoiceId);
    // Example: analytics.track('checkout_paid', { invoiceId: event.detail.invoiceId });
  });

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

Embed SDK Overview

Start here for concept and quick setup.

Embed SDK Reference

Full options and behavior reference.

Security & Troubleshooting

CSP and production debugging.

Embed Demo

Interactive demo page.