Checkout Elements Overview

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: "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@0"
  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

Overlay Close Behavior

By default a buyer can dismiss the overlay checkout by clicking the dark backdrop around it, using the X button, or pressing the Esc key. To protect a part-filled checkout from a stray click, enable Keep the checkout open when the buyer clicks outside it on the Checkout Element in your dashboard — the X button and Esc keep working.

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.

Redirect-based payment methods

Some payment methods — iDEAL, Bancontact, Przelewy24, Revolut Pay and similar — are completed on the provider's own website rather than inside the checkout. When a buyer picks one, the browser leaves your page for that provider and returns when they are done. Cards and Link are completed in place and never navigate away.

Two things follow for an embedded checkout:

• Your page is unloaded during the handoff. Anything your page was holding in memory is gone by the time the buyer comes back, so don't rely on in-page state surviving a purchase made this way.
• The buyer may return without the payment being confirmed yet — they used the back button, or the provider's return didn't complete. The checkout shows a Confirm payment prompt in that case, which checks the payment's real status and finishes the order if it went through. They can also choose a different payment method from there.

A payment that is still clearing when the buyer returns is reported as pending, and the order is completed automatically once the provider settles it.

Next Steps