> ## Documentation Index
> Fetch the complete documentation index at: https://docs.shoppex.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Embed SDK Snippets

> Copy/paste snippets for Next.js, React, WordPress, and Webflow

Use these snippets to integrate the **Checkout Embed SDK** quickly.

<Info>
  Replace all placeholder values:

  * `PRODUCT_ID`
  * `GROUP_ID`
  * `VARIANT_ID`
  * `https://your-site.com/thank-you`
</Info>

<Tabs>
  <Tab title="Next.js">
    ```tsx theme={"system"}
    '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>
        </>
      );
    }
    ```

    ***
  </Tab>

  <Tab title="React SPA">
    ```tsx theme={"system"}
    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>
      );
    }
    ```

    ***
  </Tab>

  <Tab title="WordPress">
    Paste this into a Custom HTML block:

    ```html theme={"system"}
    <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.

    ***
  </Tab>

  <Tab title="Webflow">
    Add an Embed element and paste:

    ```html theme={"system"}
    <button
      data-shoppex-product-id="PRODUCT_ID"
      data-shoppex-variant-id="VARIANT_ID"
      data-shoppex-quantity="1"
      data-shoppex-email="customer@example.com"
      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.
  </Tab>
</Tabs>

***

## Bonus: Programmatic Multi-Item Button

```html theme={"system"}
<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>
```

<Warning>
  Current modal flow uses the first valid item when multiple items are passed.
</Warning>

***

## Group Embed Button

```html theme={"system"}
<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.

```tsx theme={"system"}
'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)

```html theme={"system"}
<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>
```

***

## Related Docs

<CardGroup cols={2}>
  <Card title="Embed SDK Overview" icon="window-maximize" href="/guides/embeds">
    Start here for concept and quick setup.
  </Card>

  <Card title="Embed SDK Reference" icon="book" href="/guides/embeds-reference">
    Full options and behavior reference.
  </Card>

  <Card title="Security & Troubleshooting" icon="shield" href="/guides/embeds-security">
    CSP and production debugging.
  </Card>

  <Card title="Embed Demo" icon="laptop-binary" href="https://checkout.shoppex.io/embed/demo.html">
    Interactive demo page.
  </Card>
</CardGroup>