Navigation
Getting Started
Business Setup
Money
WebApp Modules
Developers
Embeddable & Overlay Checkout
Overview
The DashNex embed script is a lightweight (~5 KB) vanilla JavaScript IIFE that requires no build tools, no framework, and no dependencies. Drop one script tag into any HTML page and your checkout is ready to go.
Two embed modes are available:
- Overlay — A modal popup that opens over your existing page when a button is clicked
- Inline — A fixed-height iframe embedded directly in your page content
Getting the Embed Code
In your WebApp admin, open a checkout and click the Deploy tab. You'll find ready-to-paste snippets for both modes, along with a copy-link button for direct checkout URLs.
Overlay Mode (Popup)
The overlay opens your checkout in a centered modal with a dimmed backdrop. Customers complete their purchase without leaving your page. The modal closes automatically on success or when the customer presses Escape / clicks the close button.
1. Add the script tag
<script src="https://your-webapp.com/api/public/offers/checkout-embed.js"></script>
Replace your-webapp.com with your WebApp domain. The script tag can go anywhere in the page — it loads asynchronously and does not block rendering.
2. Add a buy button
<button onclick="DnxCheckout.open('YOUR_CHECKOUT_ID')">
Buy Now
</button>
3. Handle events (optional)
// With callbacks
DnxCheckout.open('YOUR_CHECKOUT_ID', {
onComplete: (purchaseId) => {
console.log('Purchase complete:', purchaseId);
}
onError: (message) => {
console.error('Checkout error:', message);
}
});
Inline Mode (iframe)
Inline mode embeds the checkout directly in your page as an iframe. The iframe resizes automatically as the checkout content changes height.
Basic iframe embed
<iframe
id="checkout-frame"
src="https://your-webapp.com/checkout/YOUR_CHECKOUT_ID?embed=1"
width="100%"
style="border:none;"
></iframe>
Auto-resize and event listening
// After adding the script tag
const iframe = document.getElementById('checkout-frame');
const unlisten = DnxCheckout.listen(iframe, {
onResize: (height) => {
iframe.style.height = height + 'px';
}
onComplete: (purchaseId) => {
console.log('Done:', purchaseId);
}
});
‘// Call unlisten() to remove the event listener when no longer needed
// unlisten();
Social Login in Embedded Mode
When an embedded checkout needs to handle social login (e.g., "Continue with Google"), it opens the OAuth flow in a small popup window rather than navigating the iframe. This keeps your page intact while the customer authenticates.
After the customer completes login, the popup closes automatically and the checkout continues. No action is needed on your end.
PostMessage Events
If you prefer to handle cross-frame communication manually, the embedded checkout emits the following window.postMessage events:
| Event type | Payload | Description |
|---|---|---|
| dnx:checkout:complete | { purchaseId } | Purchase completed successfully |
| dnx:checkout:resize | { height } | Checkout content height changed |
| dnx:checkout:error | { message } | An error occurred during checkout |
Direct Checkout Link
In addition to the embed snippets, the Deploy tab provides a Copy Link button for the checkout's direct URL. Share this link in emails, social posts, or anywhere you can't embed a script — it opens the full checkout page directly.
Next Steps
- Checkouts — Configure the checkout you want to embed
- Coupons — Add discount codes to your embedded checkout
- Lifecycle Events — Handle post-purchase automation after an embedded checkout completes