Checkout Elements Overview

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=US

When 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.

Developer Guides

Checkout Elements Overview

Integration Methods

JavaScript SDK (Embedded)

HTML Data Attributes (Embedded)

Query Parameters (Hosted Checkout)

When to Use Each Method

Browser Support

Next Steps

SDK Reference

Billing Data

​Integration Methods

​JavaScript SDK (Embedded)

​HTML Data Attributes (Embedded)

​Query Parameters (Hosted Checkout)

​When to Use Each Method

​Browser Support

​Next Steps

SDK Reference

Billing Data

Integration Methods

JavaScript SDK (Embedded)

HTML Data Attributes (Embedded)

Query Parameters (Hosted Checkout)

When to Use Each Method

Browser Support

Next Steps