Skip to main content
A lightweight, modal-style checkout that opens on top of your website. Perfect for landing pages, portfolios, or embeds where you want users to complete a purchase without leaving the page.

​
How it works

Instead of redirecting customers to a separate checkout page, the overlay opens instantly as a popup. This keeps users in context, reduces friction, and typically improves conversion.

​
Select Product

Choose which product the overlay preview will display. The preview on the right updates in real-time so you can see exactly how your checkout will look.

​
Integration

Adding the overlay checkout to your site is extremely easy if you are using a site builder like Webflow, Framer, or WordPress. For advanced programmatic integration (e.g., using React, Next.js, or dynamically generating checkouts via our API), please see the Embedded Checkout Integration guide in our Developer API section.

​
Override Theme

Turn this on to fully customize the overlay’s appearance. If disabled, the overlay will inherit your store’s default styles.

​
Theme Mode

Choose between: Dark
Best for modern, high-contrast experiences or dark websites. Light
Better for clean, minimal, or light-themed pages. Pick the one that matches your website for a seamless feel.

​
Checkout Theme Overrides

Fine-tune the visual details of your overlay. Button
Primary call-to-action color (e.g. “Checkout”). Button hover
Button color on hover. Button text
Text color inside buttons. Button text hover
Text color on hover. Link
Color for links inside the checkout. Checkbox
Color for selection controls. Selection border
Border color for selected options. Selection background
Background color for selected states.

​
When to use Overlay Checkouts

Overlay checkouts work best when:
  • You’re embedding checkout on your website or a landing page
  • You want a smooth, interruption-free buying flow
  • You’re selling directly from your portfolio or product page
  • You want faster conversions with fewer redirects

​
Post-Purchase Mechanics

When a customer successfully completes a purchase via the overlay, you have 5 distinct options for how to handle the fulfillment and UX:
  1. Default Success Message: If no redirect is provided, the overlay simply shows a sleek “Payment Successful” screen.
  2. Built-in Deliverables: If digital files are attached to the product, they are automatically fetched and displayed inside the overlay’s success screen for instant download.
  3. Custom Redirect (success_url): If you pass a success_url when creating the checkout session via API, the iframe will redirect to this URL. (Note: This navigates inside the iframe. Best for full-page hosted checkouts rather than overlays).
  4. Frontend JS Callback (onSuccess): The most powerful option for SaaS and marketplaces. When opening the checkout via Javascript, pass an onSuccess callback. Blink will emit a real-time event when the payment completes, allowing you to instantly update your UI and close the modal programmatically without reloading the page.
  5. Webhooks (order.paid): A secure, server-to-server event. The only 100% reliable way to provision SaaS accounts, as it triggers even if the customer’s browser closes prematurely.

​
Pro tip

Match your overlay colors to your website’s branding.
If the transition feels seamless, users are far more likely to complete the purchase.