Skip to main content
The Fungies JavaScript SDK provides a programmatic way to open checkout experiences in your web application.

​
Installation

npm install @fungies/fungies-js

​
Initialization

import { Fungies } from "@fungies/fungies-js";

// Initialize the SDK
Fungies.Initialize({
  enableDataAttributes: true // default: true
});

​
Opening Checkout

​
Overlay Mode

Opens checkout in a full-screen modal overlay: 
Fungies.Checkout.open({
  checkoutUrl: "https://yourstore.fungies.io/checkout-element/your-checkout-id",
  settings: {
    mode: "overlay"
  }
});

​
Embed Mode

Renders checkout inside a target DOM element: 
Fungies.Checkout.open({
  checkoutUrl: "https://yourstore.fungies.io/checkout-element/your-checkout-id",
  settings: {
    mode: "embed",
    frameTarget: "checkout-container" // ID of the target element
  }
});

<div id="checkout-container"></div>

​
Checkout Options

OptionTypeDescription
checkoutUrlstringRequired. The checkout URL from your Fungies dashboard
settings.mode"overlay" | "embed"Display mode for the checkout
settings.frameTargetstringDOM element ID for embed mode
customerEmailstringCustomer email (deprecated, use billingData.email)
billingDataobjectPrefilled billing information (see below)
discountCodestringDiscount code to apply
quantitynumberProduct quantity
itemsarrayItems for multi-product checkout
customFieldsobjectCustom field values

​
Billing Data Object

Prefill customer billing information: 
Fungies.Checkout.open({
  checkoutUrl: "...",
  settings: { mode: "overlay" },
  billingData: {
    email: "[email protected]",
    firstName: "John",
    lastName: "Doe",
    country: "US",      // ISO 3166-1 alpha-2 code
    state: "CA",        // State/province code
    city: "Los Angeles",
    zipCode: "90001"
  }
});
FieldTypeDescription
emailstringCustomer email address
firstNamestringCustomer first name
lastNamestringCustomer last name
countrystringCountry code (ISO 3166-1 alpha-2, e.g., US, GB, PL)
statestringState or province
citystringCity name
zipCodestringPostal/ZIP code

​
Multi-Product Checkout

Specify quantities for multiple offers: 
Fungies.Checkout.open({
  checkoutUrl: "...",
  settings: { mode: "overlay" },
  items: [
    { offerId: "offer-id-1", quantity: 2 },
    { offerId: "offer-id-2", quantity: 1 }
  ]
});

​
Custom Fields

Pass custom field values to the checkout: 
Fungies.Checkout.open({
  checkoutUrl: "...",
  settings: { mode: "overlay" },
  customFields: {
    user_id: "usr_123",
    server_region: "US-West"
  }
});

​
Closing Checkout

Programmatically close the checkout: 
Fungies.Checkout.close();

​
DOM Scanning

If you dynamically add checkout buttons after page load, trigger a manual scan: 
Fungies.ScanDOM();

​
Complete Example

import { Fungies } from "@fungies/fungies-js";

// Initialize
Fungies.Initialize();

// Open checkout with all options
document.getElementById("buy-button").addEventListener("click", () => {
  Fungies.Checkout.open({
    checkoutUrl: "https://yourstore.fungies.io/checkout-element/abc123",
    settings: {
      mode: "overlay"
    },
    billingData: {
      email: currentUser.email,
      firstName: currentUser.firstName,
      lastName: currentUser.lastName,
      country: currentUser.country
    },
    discountCode: "SUMMER20",
    quantity: 1,
    customFields: {
      user_id: currentUser.id
    }
  });
});