Headless Embed

The Swft headless embed lets you use the Swft checkout UI on any site — React, Vue, plain HTML, Shopify headless, custom Laravel storefronts — without a WooCommerce backend. You provide the cart data; Swft handles the checkout UI, payment processing, and order confirmation.

CDN script tag

Add the Swft embed script to your page <head>:

<script src="https://cdn.swft.co.uk/embed/v1/swft-embed.js" defer></script>

The script is ~14kb gzipped and loads asynchronously. It exposes a global SwftEmbed object once the DOM is ready.

`SwftEmbed.init()`

Call init() once with your configuration:

SwftEmbed.init({
  merchantKey: 'pk_swft_live_xxxxxxxxxxxxxxxx',
  trigger:     '#checkout-btn',
  mode:        'modal',       // 'modal' | 'redirect' | 'inline'
  locale:      'en-GB',
  currency:    'GBP',
  theme:       'minimal',     // matches your Swft template
  onSuccess: (order) => {
    console.log('Order placed:', order.id)
    window.location.href = `/thank-you?order=${order.id}`
  },
  onError: (err) => {
    console.error('Checkout error:', err)
  },
})

Config options

Option	Type	Default	Description
`merchantKey`	`string`	required	Your public merchant key from the dashboard
`trigger`	`string\|Element`	required	CSS selector or DOM element that opens the checkout
`mode`	`string`	`'modal'`	How the checkout renders (`modal`, `redirect`, `inline`)
`locale`	`string`	`'en-GB'`	BCP 47 locale for the checkout UI
`currency`	`string`	merchant default	ISO 4217 currency code
`theme`	`string`	merchant default	Template name to render
`cart`	`object`	`null`	Pre-set cart data (see below)
`onSuccess`	`function`	`null`	Called with the completed order object
`onError`	`function`	`null`	Called with an error object
`onClose`	`function`	`null`	Called when the modal is dismissed without completing

WooCommerce Store API cart detection

If your site has the WooCommerce Store API available (standard on WooCommerce 6.9+), Swft detects it automatically and reads the cart from /wp-json/wc/store/v1/cart on trigger. No extra configuration needed — SwftEmbed.init() without a cart option will use the Store API cart.

`SwftEmbed.setCart()`

For non-WordPress sites, pass your cart data before the checkout opens:

SwftEmbed.setCart({
  lineItems: [
    {
      id:       'prod_abc123',
      name:     'Organic Cotton T-Shirt',
      price:    2999,          // pence / cents
      quantity: 2,
      image:    'https://example.com/img/shirt.jpg',
      meta: [
        { label: 'Size',   value: 'M' },
        { label: 'Colour', value: 'Forest Green' },
      ],
    },
  ],
  subtotal:  5998,
  shipping:  299,
  tax:       1259,
  total:     7557,
  currency:  'GBP',
})

Call setCart() whenever your cart changes (item added, quantity updated, coupon applied). Swft will use the latest cart state the next time the checkout opens.

Inline mode

For a fully embedded checkout (no modal), use mode: 'inline' and provide a container element:

<div id="swft-checkout"></div>

<script>
  SwftEmbed.init({
    merchantKey: 'pk_swft_live_xxxxxxxxxxxxxxxx',
    mode:        'inline',
    container:   '#swft-checkout',
    onSuccess:   (order) => { /* handle */ },
  })
</script>

The checkout renders directly into the container. Useful for dedicated checkout pages.

Example: non-WordPress storefront

A typical integration for a custom PHP or Node storefront:

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://cdn.swft.co.uk/embed/v1/swft-embed.js" defer></script>
</head>
<body>
  <button id="checkout-btn">Checkout</button>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      SwftEmbed.init({
        merchantKey: 'pk_swft_live_xxxxxxxxxxxxxxxx',
        trigger:     '#checkout-btn',
        mode:        'modal',
        locale:      'en-GB',
        currency:    'GBP',
        onSuccess: (order) => {
          fetch('/api/orders', {
            method:  'POST',
            headers: { 'Content-Type': 'application/json' },
            body:    JSON.stringify({ swftOrderId: order.id, ...order }),
          }).then(() => {
            window.location.href = `/thank-you?ref=${order.id}`
          })
        },
      })

      // Set cart from your own state management
      SwftEmbed.setCart(getCartFromLocalStorage())
    })
  </script>
</body>
</html>

Webhook fulfilment for non-WP stores

When an order completes on a non-WooCommerce site, Swft fires a order.completed webhook to your configured endpoint:

{
  "event":    "order.completed",
  "orderId":  "swft_ord_xxxxxxxx",
  "merchant": "mer_xxxxxxxx",
  "customer": {
    "email":   "[email protected]",
    "name":    "Jane Smith",
    "address": { ... }
  },
  "lineItems": [ ... ],
  "total":    7557,
  "currency": "GBP",
  "payment":  {
    "method":        "card",
    "stripeChargeId": "ch_xxxxxxxx"
  }
}

Configure your webhook URL in the dashboard under Settings > Webhooks.