Developer Playground

Test the Shoppex Embed SDK with data attributes or the JavaScript API. Configure options, trigger checkout modals, and monitor events in real time.

1 Data Attributes Declarative — no JavaScript required

HTML

<button
  data-shoppex-shop-id="demo-shop"
  data-shoppex-product-id="your-product-id"
  data-shoppex-quantity="1"
  data-shoppex-theme="auto"
>
  Buy Now
</button>

2 JavaScript API Programmatic — full control over checkout

JavaScript

Shoppex.open({
  shopId: 'your-shop',
  items: [{ productId: 'abc-123', quantity: 1 }],
  theme: 'auto',
  email: '[email protected]',
  returnUrl: 'https://example.com/thank-you'
});

Target Environment

Checkout Base URL

Shop ID

Product ID

Quantity

Email (optional)

3 Event Log Real-time checkout events

JavaScript

document.addEventListener('shoppex:success', (e) => {
  console.log('Payment successful!', e.detail.invoiceId);
});

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

No events yet — trigger a checkout above

4 Installation Add to your website in one line

Include the embed script before your closing </body> tag:

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

Or initialize manually with options:

JavaScript

document.addEventListener('DOMContentLoaded', () => {
  Shoppex.init({
    nonce: 'your-csp-nonce' // Optional: for CSP compliance
  });
});