Integrate the Subicon checkout

Add the snippet below to your site (HTML, WordPress, Webflow, React...) and your visitors can buy without leaving your domain.

#Quick start

HTML

<script async defer src="https://js.subicon.io/embed.js"></script>

<div data-subicon-product-id="prod_xxx"></div>

You will find your prod_xxx in the dashboard for each product, in the "Embed code" section.

#Display modes

Inline — the checkout is rendered directly in the page, auto-resizing to its content (default)
Modal — your element becomes a trigger — clicking it opens the checkout in a centered modal (close with Escape or by clicking outside)
Redirect — your element sends the buyer to a Subicon-hosted checkout page

#Reference of data-* attributes

Attribute	Description
`data-subicon-product-id`	Required. Public product ID (prod_xxx) — find it in the dashboard.
`data-subicon-plan-id`	Optional. Locks the checkout to a specific pricing plan (plan_xxx).
`data-subicon-mode`	Optional. inline (default), modal, or redirect.
`data-subicon-accent`	Optional. Accent color for buttons — default purple. Choices: purple, blue, green, red, orange, pink, cyan, gray.
`data-subicon-ref`	Optional. Affiliate referral code.
`data-subicon-return-url`	Optional. URL to redirect to after a successful payment.
`data-subicon-lang`	Optional. fr or en. Default: detected from the buyer's browser.
`data-subicon-on-complete`	Optional. Name of a global function called on a successful payment with the result, e.g. data-subicon-on-complete="myCb" calls window.myCb({ orderId }).
`data-subicon-on-error`	Optional. Name of a global function called if the payment fails or is cancelled.

#JavaScript API

For advanced use cases, open the checkout programmatically — this always uses modal mode:

JavaScript

Subicon.openCheckout({
  productId: 'prod_xxx',
  planId: 'plan_xxx',                         // optional — lock to one plan
  accent: 'purple',                           // optional — brand color (default)
  ref: 'AFFILIATE_CODE',                      // optional — affiliate referral
  returnUrl: 'https://your-site.com/thanks',  // optional — redirect after payment
  lang: 'fr',                                 // optional — 'fr' | 'en'
  onComplete: (data) => console.log('Paid! order:', data.orderId),
  onError: (err) => console.error('Checkout failed', err),
});

openCheckout(options) takes the following options:

Option	Description
`productId`	Required. Public product ID (prod_xxx) — find it in the dashboard.
`planId`	Optional. Locks the checkout to a specific pricing plan (plan_xxx).
`accent`	Optional. Accent color for buttons — default purple. Choices: purple, blue, green, red, orange, pink, cyan, gray.
`ref`	Optional. Affiliate referral code.
`returnUrl`	Optional. URL to redirect to after a successful payment.
`lang`	Optional. fr or en. Default: detected from the buyer's browser.
`onComplete`	Optional. Function called on a successful payment, receiving the result (see Callbacks).
`onError`	Optional. Function called if the payment fails or is cancelled.

Dynamic content — If you add data-subicon-* elements after the page has loaded (single-page apps, React…), call Subicon.scan() to mount them. It is safe to call multiple times.

JavaScript

// Mount data-subicon-* elements added to the DOM after load (SPA, React…)
Subicon.scan();

#Callbacks & result

React to the checkout outcome via the data-subicon-on-* attributes or the openCheckout callbacks:

onComplete(data) — called when the payment succeeds; data contains the orderId.
onError(error) — called if the payment fails or the buyer cancels.

With data-* attributes, the value is the NAME of a global function (e.g. data-subicon-on-complete="myCb" → window.myCb). With the JavaScript API, you pass the function directly.

If returnUrl is set, the buyer is redirected there after payment with ?status=success&order_id=… appended — onComplete still fires just before the redirect.

#Examples

Plain HTML — drop these tags into any page:

HTML

<!-- Load the loader once (e.g. in <head>) -->
<script async defer src="https://js.subicon.io/embed.js"></script>

<!-- Inline checkout -->
<div data-subicon-product-id="prod_xxx"></div>

<!-- …or a modal trigger (any element) -->
<button data-subicon-product-id="prod_xxx" data-subicon-mode="modal">Buy now</button>

<!-- …or a redirect link -->
<a data-subicon-product-id="prod_xxx" data-subicon-mode="redirect">Buy now</a>

React / Next.js — load the script once and re-scan on mount:

React

import Script from 'next/script';
import { useEffect } from 'react';

export function BuyButton() {
  // Re-scan after this component mounts so the loader picks up the button.
  useEffect(() => { window.Subicon?.scan(); }, []);
  return (
    <>
      <Script src="https://js.subicon.io/embed.js" strategy="afterInteractive" />
      <button data-subicon-product-id="prod_xxx" data-subicon-mode="modal">
        Buy now
      </button>
    </>
  );
}

#Custom styling

In modal and redirect modes, the button or link is your own HTML element — Subicon only attaches a click handler. You can fully style it with your own CSS, Tailwind classes, framework components, etc. In inline mode, you can style the wrapper div (size, margin, max-width) but the checkout itself is rendered inside an iframe and cannot be styled from outside — use the accent color to match your brand.