Checkout Elements Overview
Embed checkout experiences directly in your website or redirect customers to hosted checkout pages.
Checkout Elements allow you to integrate Fungies checkout into your website in two ways:
- Embedded Checkout - Display the checkout directly within your page using an iframe
- Hosted Checkout - Redirect customers to a Fungies-hosted checkout page
Both methods support prefilling customer billing data to streamline the checkout experience.
Integration Methods
JavaScript SDK (Embedded)
Use the Fungies JavaScript SDK to embed checkout directly in your website:
import { Fungies } from "@fungies/fungies-js";
Fungies.Initialize();
Fungies.Checkout.open({
checkoutUrl: "https://yourstore.fungies.io/checkout-element/your-checkout-id",
settings: {
mode: "embed", // or "overlay"
frameTarget: "checkout-container" // DOM element ID for embed mode
},
billingData: {
email: "customer@example.com",
firstName: "John",
lastName: "Doe",
country: "US",
state: "CA",
city: "Los Angeles",
zipCode: "90001"
}
});HTML Data Attributes (Embedded)
For simpler integrations, use HTML data attributes:
<button
data-fungies-checkout-url="https://yourstore.fungies.io/checkout-element/your-checkout-id"
data-fungies-mode="overlay"
data-fungies-billing-email="customer@example.com"
data-fungies-billing-first-name="John"
data-fungies-billing-country="US">
Buy Now
</button>
<script
src="https://cdn.jsdelivr.net/npm/@fungies/fungies-js@latest"
defer
data-auto-init>
</script>Query Parameters (Hosted Checkout)
For hosted checkout pages, pass customer data via URL query parameters:
https://yourstore.fungies.io/checkout/offer-id?fngs-customer-email=customer@example.com&fngs-customer-first-name=John&fngs-customer-country=USWhen to Use Each Method
| Method | Best For |
|---|---|
| SDK (Embed) | Single-page apps, custom UX, keeping users on your site |
| SDK (Overlay) | Quick integration, modal checkout experience |
| HTML Attributes | Static sites, no-code solutions |
| Query Parameters | Email campaigns, external links, redirects |
Browser Support
Checkout Elements are built and tested against modern, up-to-date browsers and WebViews — Chrome, Safari, Firefox, and Edge, and the Android WebView and iOS WKWebView components mobile apps embed them in.
This covers the large majority of in-app browsers and WebViews used by mobile apps that embed the checkout. If a buyer's browser falls below this floor, the checkout shows a message asking them to open the link in an up-to-date browser instead of failing silently.
Next Steps
Last updated