> ## Documentation Index
> Fetch the complete documentation index at: https://docs.blink.store/llms.txt
> Use this file to discover all available pages before exploring further.

# Overlay checkout

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](/api-reference/embedded-checkout)** 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.