HTML Data Attributes

HTML data attributes provide a no-code way to add Fungies checkout buttons to any website. Simply add attributes to your HTML elements and include the SDK script.

Quick Start

<!-- Checkout button -->
<button
  data-fungies-checkout-url="https://yourstore.fungies.io/checkout-element/abc123"
  data-fungies-mode="overlay">
  Buy Now
</button>

<!-- Include the SDK -->
<script
  src="https://cdn.jsdelivr.net/npm/@fungies/fungies-js@latest"
  defer
  data-auto-init>
</script>

Script Attributes

Add these attributes to the <script> tag:

Attribute	Description
`data-auto-init`	Automatically initialize the SDK on page load
`data-auto-display-checkout`	Automatically open checkout on page load (for dedicated checkout pages)
`data-fungies-checkout-url`	Checkout URL (required with `data-auto-display-checkout`)
`data-fungies-mode`	Display mode: `overlay` or `embed`
`data-fungies-frame-target`	Target element ID for embed mode

Auto-Display Example

For dedicated checkout pages that should immediately show the checkout:

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

<script
  src="https://cdn.jsdelivr.net/npm/@fungies/fungies-js@latest"
  defer
  data-auto-init
  data-auto-display-checkout
  data-fungies-checkout-url="https://yourstore.fungies.io/checkout-element/abc123"
  data-fungies-mode="embed"
  data-fungies-frame-target="checkout-container">
</script>

Button Attributes

Add these attributes to any clickable element (button, anchor, div, etc.):

Required

Attribute	Description
`data-fungies-checkout-url`	The checkout URL from your Fungies dashboard

Display Options

Attribute	Values	Description
`data-fungies-mode`	`overlay`, `embed`	How to display the checkout (default: `overlay`)
`data-fungies-frame-target`	Element ID	Target element for embed mode

Billing Data

Attribute	Description
`data-fungies-billing-email`	Customer email
`data-fungies-billing-first-name`	Customer first name
`data-fungies-billing-last-name`	Customer last name
`data-fungies-billing-country`	Country code (e.g., `US`, `GB`, `PL`)
`data-fungies-billing-state`	State/province
`data-fungies-billing-city`	City
`data-fungies-billing-zip-code`	Postal/ZIP code

Other Options

Attribute	Description
`data-fungies-discount-code`	Discount code to apply
`data-fungies-quantity`	Product quantity
`data-fungies-items`	JSON array of items (for multi-product)
`data-fungies-custom-fields`	JSON object of custom fields

Legacy (Deprecated)

Attribute	Description
`data-fungies-customer-email`	Use `data-fungies-billing-email` instead
`data-fungies-button`	Legacy URL format, use `data-fungies-checkout-url` instead

Complete Examples

Basic Overlay Button

<button
  data-fungies-checkout-url="https://yourstore.fungies.io/checkout-element/abc123"
  data-fungies-mode="overlay"
  class="buy-button">
  Buy Now - $29
</button>

With Prefilled Billing Data

<button
  data-fungies-checkout-url="https://yourstore.fungies.io/checkout-element/abc123"
  data-fungies-mode="overlay"
  data-fungies-billing-email="customer@example.com"
  data-fungies-billing-first-name="John"
  data-fungies-billing-last-name="Doe"
  data-fungies-billing-country="US">
  Complete Purchase
</button>

With Discount Code

<button
  data-fungies-checkout-url="https://yourstore.fungies.io/checkout-element/abc123"
  data-fungies-mode="overlay"
  data-fungies-discount-code="SUMMER20">
  Buy Now (20% Off!)
</button>

With Quantity

<button
  data-fungies-checkout-url="https://yourstore.fungies.io/checkout-element/abc123"
  data-fungies-mode="overlay"
  data-fungies-quantity="3">
  Buy 3 for $59
</button>

Multi-Product Checkout

<button
  data-fungies-checkout-url="https://yourstore.fungies.io/checkout-element/abc123"
  data-fungies-mode="overlay"
  data-fungies-items='[{"offerId":"offer-1","quantity":2},{"offerId":"offer-2","quantity":1}]'>
  Buy Bundle
</button>

With Custom Fields

<button
  data-fungies-checkout-url="https://yourstore.fungies.io/checkout-element/abc123"
  data-fungies-mode="overlay"
  data-fungies-custom-fields='{"user_id":"123","server":"US-West"}'>
  Buy Now
</button>

Embedded Checkout

<div id="checkout-container" style="min-height: 600px;"></div>

<button
  data-fungies-checkout-url="https://yourstore.fungies.io/checkout-element/abc123"
  data-fungies-mode="embed"
  data-fungies-frame-target="checkout-container">
  Load Checkout
</button>

Styling

The SDK doesn’t add any styles to your buttons. Style them however you want:

<style>
  .fungies-btn {
    background: #6035EC;
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
  }
  .fungies-btn:hover {
    background: #4c2abd;
  }
</style>

<button
  class="fungies-btn"
  data-fungies-checkout-url="https://yourstore.fungies.io/checkout-element/abc123"
  data-fungies-mode="overlay">
  Buy Now
</button>

Dynamic Elements

If you add checkout buttons dynamically (e.g., via JavaScript or a framework), call Fungies.ScanDOM() to attach click handlers:

// After adding new elements to the DOM
Fungies.ScanDOM();

Or import and call directly:

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

// After dynamically adding elements
Fungies.ScanDOM();

​Quick Start

​Script Attributes

​Auto-Display Example

​Button Attributes

​Required

​Display Options

​Billing Data

​Other Options

​Legacy (Deprecated)

​Complete Examples

​Basic Overlay Button

​With Prefilled Billing Data

​With Discount Code

​With Quantity

​Multi-Product Checkout

​With Custom Fields

​Embedded Checkout

​Styling

​Dynamic Elements