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@0"
  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@0"
  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`	Quantity for every adjustable offer on the element
`data-fungies-items`	Parsed and forwarded, but not applied — see the note below
`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

A checkout element sells the offers it was created with. To sell a bundle, create one element containing all of them — data-fungies-quantity then applies to each offer whose quantity is adjustable.

<button
  data-fungies-checkout-url="https://yourstore.fungies.io/checkout-element/abc123"
  data-fungies-mode="overlay"
  data-fungies-quantity="2">
  Buy Bundle
</button>

data-fungies-items is parsed and forwarded, but currently has no effect — per-offer quantities are not applied, and an offerId that is not on the element is neither added nor reported as an error. Use data-fungies-quantity. See Quantity.

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>

By default the embedded checkout fills the full width of its container. If you'd rather it cap at 768px and center with side gutters in wider containers, enable that under this checkout's Embed settings in your dashboard.

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();

HTML Data Attributes

On this page