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