OpenStockCheckout embed
Try an interactive checkout, copy the integration, and choose your language.
Open your product checkout in a modal on your own website. The embed loads the same compact checkout your buyers see on your store subdomain: order summary, email, enabled payment methods, coupons, and optional Discord linking. Product, pricing, stock, and payments come from your dashboard; you never put a secret API key in the browser.
Try the checkout embed#
This preview runs the production embed.js script (v3.2) against a demonstration checkout. Open the modal, change language, toggle light or dark mode, pick a payment method, apply coupon code WELCOME10, and complete the flow. Nothing is charged and no order is created.
Creative toolkit
$29.00 · Demo product
No payment will be taken.
Get your button code#
Open Catalog → Products, choose a product’s actions menu, and select Embed checkout to copy its button code. Add the script once per page, then place a button wherever customers should be able to buy.
<script src="https://openstock.dev/embed.js" defer></script>
<button data-product="your-product-id" data-store="your-store" data-lang="en">
Buy now
</button>Use a product from your store
The preview always uses sample data. Replace the store slug and product ID in your integration with values copied from your dashboard. A demo product identifier is not a live catalog item.
Customize checkout appearance#
In Settings → Checkout embed, set colors and the pay button finish for every checkout opened through your embed buttons. A live preview updates as you edit; saved settings apply the next time a customer opens checkout (sessions already open keep their current colors).
| Setting | Applies to |
|---|---|
| Background | Main checkout panel behind the form. |
| Product summary | Header and line-item area at the top. |
| Text / Secondary text | Headings, labels, and helper copy (must meet contrast checks before save). |
| Button / Button text | Primary pay action; defaults follow your store accent when you have not customized embed colors. |
| Button texture | Solid, soft sheen, or fine dots on the pay button. |
Buyers can still switch light or dark mode inside checkout; that preference is stored for the session and does not change your saved brand colors.
What buyers see#
Live embed checkout is optimized for the modal: store name and logo, compact language control, stacked payment method cards with card/crypto badges, collapsible coupon and gift card fields, terms acceptance, and a single pay button using your appearance settings. Methods match what you enable under Payments; Discord connect appears when your store requires it for the product. On small screens the host script presents checkout as a bottom sheet.
Button attributes#
| Attribute | Required | Purpose |
|---|---|---|
data-product | Yes | The product ID to open. |
data-store | Yes | Your store slug. The older data-store-slug attribute also works. |
data-lang | No | Initial language: en, es, fr, de, ja, or zh. Otherwise the page or browser language is used, with English as the fallback. |
data-store-url | No | Your custom store origin, such as https://shop.example.com. Otherwise checkout opens on your store’s openstock.dev subdomain. |
The script handles buttons added after the page loads, including buttons rendered by React. Disabled buttons do not open checkout.
JavaScript API#
After the script has loaded, you can open a checkout programmatically. Pass the store explicitly when there is no matching product button on the page.
Open options#
| Option | Purpose |
|---|---|
store | Store slug (required when no matching button is on the page). |
lang | Initial checkout language (same codes as data-lang). |
storeUrl | Custom store origin instead of the default openstock.dev subdomain. |
checkoutPath | Path on the store origin (default /checkout). Use only for advanced setups; product checkout normally stays on the default path. |
window.OpenStock.open('your-product-id', { store: 'your-store', lang: 'en' })
// Custom-domain store
window.OpenStock.open('your-product-id', {
store: 'your-store',
storeUrl: 'https://shop.example.com',
lang: 'en',
})
window.OpenStock.close()Lifecycle methods#
| Method | Use |
|---|---|
open(productId, options) | Open a product checkout. |
close() | Close the active modal and restore focus. |
preload(productId, options) | Load a checkout ahead of a purchase interaction. |
retry(productId) | Reload a checkout that failed to load. |
clearCache() | Remove inactive cached checkouts. |
destroy() | Remove the modal, cached frames, and listeners when intentionally removing the integration. |
configure(options) | Adjust script defaults such as checkoutPath, animations, mobileBottomSheet, or iframeTimeout before opening checkout. |
The global alias window.Swiftly exposes the same API for older integrations. Checkout height grows with content; the modal close control stays in the host page while buyers can also close from inside checkout or with Escape.
Events#
Listen on window. Purchase events are useful for interface feedback and analytics; verify payment on your backend before fulfilling an order.
window.addEventListener('openstock-purchase-complete', (event) => {
console.log('Checkout reported completion:', event.detail)
})
window.addEventListener('openstock-purchase-error', (event) => {
console.error('Checkout error:', event.detail)
})| Event | When it fires |
|---|---|
openstock-checkout-open | A product checkout is opened; details include productId, storeSlug, and lang. |
openstock--open | The modal opens. |
openstock--close | The modal closes. |
openstock-purchase-complete | The active checkout reports completion. |
openstock-purchase-error | The active checkout reports an error. |
A confirmed purchase keeps its receipt visible until the buyer closes checkout. A closed, completed checkout starts fresh the next time it is opened. The demo stays open on a confirmation screen and never creates a real order.
Before going live#
Check product and payment settings
Use an active product with stock and a valid delivery method. Enable at least one compatible payment method in the store.
Allow the script and checkout frame
If your website uses Content Security Policy, allow the platform script in script-src, your checkout origin in frame-src, and the embed’s injected styles through your style policy.
Test the buyer experience
Check the button on mobile and desktop, language and light/dark toggles, payment method selection, coupons, keyboard focus between the modal and iframe, and reopening an unfinished checkout. Confirm embed appearance in Settings, then verify a controlled real payment separately.
Troubleshooting#
If nothing opens, check that the script loaded and the product and store identifiers are present. A blocked script, blocked iframe, or invalid custom-domain URL can prevent checkout from loading. If checkout opens but cannot take payment, inspect its displayed error and the store’s payment settings.