---
title: "Overlay checkout · Fungies"
description: "Open a tax-compliant checkout in a modal over your own page — no redirect, no card data in your code. One HTML attribute, or one call to the JavaScript SDK."
image: "https://fungies.io/og-image.jpg"
canonical: "https://fungies.io/overlay-checkout/"
---
Developers · Overlay checkout
# Checkout that opens over your page, not somewhere else
A redirect is the moment a stranger's domain asks your customer for a card number. Overlay checkout opens in a modal on top of the page they are already reading — one HTML attribute, or one call from the SDK — and we remain the Merchant of Record underneath it.
[Start free](https://app.fungies.io/register)
[Book a demo](https://calendly.com/duke-vuh/fungies-io-demo-clone)
No upfront costs. No credit card required.
Already selling with Fungies
[](/customer-story/hosted-checkout-solution-for-leadsin-io-a-saas-business "Leadsin.io — read the story")[ ](/customer-story/helping-renderai-reduce-their-ai-saas-payment-integration-from-days-to-just-a-couple-of-minutes "RenderAI — read the story")[ ](/customer-story/nimblebits-revenue-boost-with-a-web-store-solution "SuperScale — read the story")[ ](/customer-story/freevocals-com-and-fungies-io-a-seamless-solution-for-digital-e-commerce "FreeVocals — read the story")
The same checkout as the hosted page, drawn over your own. The address bar never changes.
One attribute
## Add it to a page you already have
The SDK loads from a CDN, finds anything carrying a checkout URL, and opens the overlay on click. It adds no styles of its own, so your button stays your button.
[Checkout elements docs](https://docs.fungies.io/developers/checkout-elements/overview) [Compare all three modes](/saas-checkout-service)
HTMLPrefillJavaScriptReact
```
```
## What you can pass in when it opens
Billing prefill
Email, first and last name, country, state, city and postcode. Someone already signed in to your product should not be retyping what you know.
Discount codes
Apply a coupon as the overlay opens, so the price in the modal matches the offer that was on the page behind it.
Quantity
Open at three seats rather than one, without modelling a second product to do it.
Multiple offers
An array of offer IDs and quantities puts a bundle or a whole cart through a single overlay.
Custom fields
Send your own identifiers through the purchase — user ID, server region, licence seat — and read them back off the order afterwards.
Embed mode
The same button switches to rendering the checkout inside an element you nominate, if a modal is not the right shape for the page.
Completion events
fungies:checkout:complete and fungies:checkout:close fire on document, so you can redirect, refresh entitlements or unwind your own UI.
Late-rendered buttons
Fungies.ScanDOM() attaches handlers to anything your framework added after load, so client-side routing does not break the integration.
## Why an overlay rather than a redirect
01
### The buyer never leaves your domain
The address bar does not change and your page stays visible behind the modal. Someone who closes it lands back exactly where they were, rather than on a back button and an empty cart.
02
### Your brand carries the trust
Handing a customer to a payment page they have never seen asks them to trust a second company mid-purchase. An overlay borrows the credibility of the page they already chose to be on.
03
### Card details never touch your code
The overlay is an iframe we serve. Payment data is entered inside it and goes straight to us, so it never enters your DOM, your logs, or the part of the system you have to answer for.
04
### It improves without you deploying
New payment methods, tax rules and checkout changes arrive inside the iframe. An integration shipped a year ago keeps collecting them.
## What sellers say once they have switched
[★★★★★ 4.8/5 from 10 reviews on G2 →](https://www.g2.com/products/fungies-io/reviews)
[Vadim Finayev Head of Growth, Leadsin.io
“We work with quite a few merchants of record, but none comes close to the support and speed of implementation of Fungies. If you want a payment partner that actually gives you the feeling they want to work with you — rather than leaving you on read for three days or randomly restricting your account — you are in the right place.”
Read the story →](/customer-story/hosted-checkout-solution-for-leadsin-io-a-saas-business) [David Elliott Creative Director, Freevocals.com
“I researched the options and Fungies was the best fit for functionality and customisation within a store builder you can connect to your own domain. Taking a small percentage of sales, instead of charging a subscription for every environment and plugin, is refreshing.”
Read the story →](/customer-story/freevocals-com-and-fungies-io-a-seamless-solution-for-digital-e-commerce) [Elnura Abdimanap Kyzy Founder, TextToVideo.bot
“The platform is user-friendly, integrates easily with APIs and webhooks, and simplifies managing digital products and subscriptions. We were up and running quickly and support has been responsive throughout. Fungies is clearly tailored to the needs of SaaS businesses.”
Read the story →](/customer-story/how-fungies-enabled-texttovideo-bot-to-integrate-payments-in-minutes) [Francisco Magnone Rienzi Founder, Renderai.app
“Fungies has been a great partner — fast setup, competitive pricing, and real humans providing quick answers. They are constantly rolling out new features, and I am excited to see what is next.”
Read the story →](/customer-story/helping-renderai-reduce-their-ai-saas-payment-integration-from-days-to-just-a-couple-of-minutes)
## Before you wire it up
### Do I actually have to write code?
### Where does the checkout URL come from?
### What is the difference between overlay, embedded and hosted?
### How do I know when someone has paid?
### Does it work with React, Vue or Next.js?
### Is card data going through my site?
### Does the overlay still handle tax?
## Put a buy button on it this afternoon
Build a checkout element, copy the URL onto a button, and take a test payment through it. No monthly fee and no card needed to reach that point.
[Start free](https://app.fungies.io/register)
[Book a demo](https://calendly.com/duke-vuh/fungies-io-demo-clone)
No upfront costs. No credit card required.
```json
{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://fungies.io/#organization","name":"Fungies","legalName":"Fungies Inc.","url":"https://fungies.io/","description":"Merchant of Record for SaaS, games, and digital products. Fungies handles global payments, VAT and sales tax, and checkout. Free to start, commission only.","slogan":"Tax-compliant payments for everything digital","logo":{"@type":"ImageObject","url":"https://fungies.io/brand/fungies-logo-black.svg"},"image":"https://fungies.io/og-image.jpg","address":{"@type":"PostalAddress","streetAddress":"2100 Geng Road, Suite 210","addressLocality":"Palo Alto","addressRegion":"CA","postalCode":"94303","addressCountry":"US"},"sameAs":["https://www.facebook.com/fungies.io","https://www.linkedin.com/company/fungies","https://twitter.com/fungies_io","https://t.me/fungies_announcements","https://discord.gg/yfH5ZyTZH4","https://www.youtube.com/@Fungies","https://www.tiktok.com/@fungies_io"],"contactPoint":[{"@type":"ContactPoint","contactType":"customer support","email":"support@fungies.io","url":"https://help.fungies.io/","availableLanguage":["en"]}]},{"@type":"WebSite","@id":"https://fungies.io/#website","name":"Fungies","url":"https://fungies.io/","description":"Merchant of Record for SaaS, games, and digital products. Fungies handles global payments, VAT and sales tax, and checkout. Free to start, commission only.","inLanguage":"en","publisher":{"@id":"https://fungies.io/#organization"}},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://fungies.io/"},{"@type":"ListItem","position":2,"name":"Overlay checkout","item":"https://fungies.io/overlay-checkout"}]},{"@type":"FAQPage","mainEntity":[{"@type":"Question","name":"Do I actually have to write code?","acceptedAnswer":{"@type":"Answer","text":"One attribute on a button and one script tag. If your site can serve HTML it can serve the overlay, which covers WordPress, Webflow, Framer, a landing page builder or a hand-written page. The SDK exists for the cases where a button is not enough."}},{"@type":"Question","name":"Where does the checkout URL come from?","acceptedAnswer":{"@type":"Answer","text":"From a checkout element you build in the dashboard. Configure it once, point as many buttons at it as you like, and change it later without touching your site. Elements can also be created through the API."}},{"@type":"Question","name":"What is the difference between overlay, embedded and hosted?","acceptedAnswer":{"@type":"Answer","text":"Overlay opens a modal over your page. Embedded renders the same checkout inside an element you choose, inline with your content. Hosted is a full page we serve and you link to. It is the same checkout in all three, so the choice is about where it appears rather than what it can do."}},{"@type":"Question","name":"How do I know when someone has paid?","acceptedAnswer":{"@type":"Answer","text":"Two ways, and you want both. In the browser the SDK fires fungies:checkout:complete so you can redirect to a thank-you page. On your server, grant access from the payment_success webhook — the browser event can be missed if someone closes the tab, and the webhook cannot."}},{"@type":"Question","name":"Does it work with React, Vue or Next.js?","acceptedAnswer":{"@type":"Answer","text":"Yes. Install @fungies/fungies-js, initialise once, and call Fungies.Checkout.open on click. If checkout buttons are rendered after the first paint, call Fungies.ScanDOM() so the SDK picks up their attributes."}},{"@type":"Question","name":"Is card data going through my site?","acceptedAnswer":{"@type":"Answer","text":"No. The overlay is an iframe served by us, and payment details are entered inside it. Nothing sensitive passes through your page, which is what keeps this out of scope for your own compliance work."}},{"@type":"Question","name":"Does the overlay still handle tax?","acceptedAnswer":{"@type":"Answer","text":"Yes. Tax is calculated for the buyer's country inside the modal and shown before they pay, and we remit and file it as Merchant of Record. Where the checkout is drawn does not change who is liable."}}]}]}
```