Skip to main content
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:
AttributeDescription
data-auto-initAutomatically initialize the SDK on page load
data-auto-display-checkoutAutomatically open checkout on page load (for dedicated checkout pages)
data-fungies-checkout-urlCheckout URL (required with data-auto-display-checkout)
data-fungies-modeDisplay mode: overlay or embed
data-fungies-frame-targetTarget 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

AttributeDescription
data-fungies-checkout-urlThe checkout URL from your Fungies dashboard

​
Display Options

AttributeValuesDescription
data-fungies-modeoverlay, embedHow to display the checkout (default: overlay)
data-fungies-frame-targetElement IDTarget element for embed mode

​
Billing Data

AttributeDescription
data-fungies-billing-emailCustomer email
data-fungies-billing-first-nameCustomer first name
data-fungies-billing-last-nameCustomer last name
data-fungies-billing-countryCountry code (e.g., US, GB, PL)
data-fungies-billing-stateState/province
data-fungies-billing-cityCity
data-fungies-billing-zip-codePostal/ZIP code

​
Other Options

AttributeDescription
data-fungies-discount-codeDiscount code to apply
data-fungies-quantityProduct quantity
data-fungies-itemsJSON array of items (for multi-product)
data-fungies-custom-fieldsJSON object of custom fields

​
Legacy (Deprecated)

AttributeDescription
data-fungies-customer-emailUse data-fungies-billing-email instead
data-fungies-buttonLegacy 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="[email protected]"
  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();