Embed SDK Snippets

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

Next.js
React SPA
WordPress
Webflow

'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>
    </>
  );
}

import { useEffect } from 'react';

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

export function BuyButton() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://checkout.shoppex.io/embed/embed.iife.js';
    script.defer = true;
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return (
    <button
      onClick={() =>
        window.Shoppex?.open({
          items: [{ productId: 'PRODUCT_ID', variantId: 'VARIANT_ID', quantity: 1 }],
          theme: 'auto',
          affiliateCode: 'CREATOR123',
        })
      }
    >
      Buy now
    </button>
  );
}

Paste this into a Custom HTML block:

<button
  data-shoppex-product-id="PRODUCT_ID"
  data-shoppex-variant-id="VARIANT_ID"
  data-shoppex-quantity="1"
  data-shoppex-theme="auto"
  data-shoppex-referral-code="CREATOR123"
  data-shoppex-return-url="https://your-site.com/thank-you"
>
  Buy now
</button>

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

If your theme strips script tags, add the script globally (for example in footer settings or theme template), and keep only the button markup in content.

Add an Embed element and paste:

<button
  data-shoppex-product-id="PRODUCT_ID"
  data-shoppex-variant-id="VARIANT_ID"
  data-shoppex-quantity="1"
  data-shoppex-email="[email protected]"
  data-shoppex-coupon-code="SAVE20"
  data-shoppex-metadata='{"source":"webflow"}'
>
  Buy now
</button>

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

If you already load the script site-wide in Webflow project settings, keep only the button in each Embed block.

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.

Start Here

Concepts

Webhooks

Headless Commerce

Use Cases

Embed SDK

Embed SDK Snippets

Bonus: Programmatic Multi-Item Button

Group Embed Button

Hybrid Example: Your Own Product Cards + Shoppex Checkout

Event Snippet (Analytics)

Embed SDK Overview

Embed SDK Reference

Security & Troubleshooting

Embed Demo

​Bonus: Programmatic Multi-Item Button

​Group Embed Button

​Hybrid Example: Your Own Product Cards + Shoppex Checkout

​Event Snippet (Analytics)

​Related Docs

Embed SDK Overview

Embed SDK Reference

Security & Troubleshooting

Embed Demo

Bonus: Programmatic Multi-Item Button

Group Embed Button

Hybrid Example: Your Own Product Cards + Shoppex Checkout

Event Snippet (Analytics)

Related Docs