Embedded Checkout

To use the embedded checkout on your custom website or web app, you need to include our embed script and use the provided JavaScript API. This allows you to keep users in context and reduce friction.

1. Add the Embed Script

Include the following script tag anywhere in your HTML (preferably right before the closing body tag):

<script src="https://js.blink.store/embed.js"></script>

Modern Frameworks (React, Next.js, etc.) If you are using a modern SPA framework like Next.js, do not use a raw HTML <script> tag. Instead, use your framework’s built-in script loader (e.g., import Script from 'next/script' and <Script src="https://js.blink.store/embed.js" strategy="afterInteractive" />) to ensure the script loads reliably across client-side navigations.

2. Using the JavaScript API

Once the script is loaded, it automatically binds to any clickable element with the class blink-button.

Automatic Binding (HTML)

<a href="https://yourstore.blink.store/product-slug" class="blink-button">Buy Now</a>

Programmatic Binding (React / Next.js)

If you are building a Single Page Application (SPA) where you need to trigger the checkout programmatically, the script exposes a global window.Blink object:

// Trigger the checkout overlay manually
window.Blink.openCheckout('https://yourstore.blink.store/product-slug');

// Close the overlay manually
window.Blink.closeCheckout();

Advanced Options (Theme Auto-Detection)

By default, the embedded checkout will automatically detect the host website’s theme (light or dark mode) and apply the correct backdrop and checkout UI seamlessly. This overrides the store’s default “Overlay Theme Mode” setting. If you want to manually force a specific theme, or disable auto-detection, you can pass an options object:

// Force dark mode
window.Blink.openCheckout('https://...', { theme: 'dark' });

// Force light mode
window.Blink.openCheckout('https://...', { theme: 'light' });

// Disable auto-detection (respects the store's default setting)
window.Blink.openCheckout('https://...', { theme: 'none' });

When generating the checkout URL dynamically via the API (POST /v1/checkouts), ensure you pass "options": { "layout": "overlay" } in the payload. Our embed.js script will automatically handle formatting the URL correctly to trigger the embed mode.

Guides

Core

Financials

Growth & Marketing

Webhooks & Events

Embedded Checkout

1. Add the Embed Script

2. Using the JavaScript API

Automatic Binding (HTML)

Programmatic Binding (React / Next.js)

Advanced Options (Theme Auto-Detection)

​1. Add the Embed Script

​2. Using the JavaScript API

​Automatic Binding (HTML)

​Programmatic Binding (React / Next.js)

​Advanced Options (Theme Auto-Detection)

1. Add the Embed Script

2. Using the JavaScript API

Automatic Binding (HTML)

Programmatic Binding (React / Next.js)

Advanced Options (Theme Auto-Detection)