Skip to main content
Checkout Elements allow you to integrate Fungies checkout into your website in two ways:
  1. Embedded Checkout - Display the checkout directly within your page using an iframe
  2. 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: "[email protected]",
    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="[email protected]"
  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/[email protected]&fngs-customer-first-name=John&fngs-customer-country=US

​
When to Use Each Method

MethodBest For
SDK (Embed)Single-page apps, custom UX, keeping users on your site
SDK (Overlay)Quick integration, modal checkout experience
HTML AttributesStatic sites, no-code solutions
Query ParametersEmail campaigns, external links, redirects

​
Next Steps

SDK Reference

Complete SDK options and methods

Billing Data

All available billing prefill fields