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

​
1) Next.js (App Router, Client Component)

'use client';

import Script from 'next/script';

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

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

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

​
2) React SPA (Vite/CRA)

import { useEffect } from 'react';

declare global {
  interface Window {
    Shoppex?: {
      open: (options: {
        items: Array<{ productId: string; variantId?: string; quantity?: number }>;
        theme?: 'light' | 'dark' | 'auto';
      }) => 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',
        })
      }
    >
      Buy now
    </button>
  );
}

​
3) WordPress (Custom HTML Block)

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-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.

​
4) Webflow (Embed Element)

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]"
>
  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.

​
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.