---
title: "Fungies JavaScript SDK · Fungies"
description: "@fungies/fungies-js — open a tax-compliant checkout from your own page in one call. Zero dependencies, TypeScript types included, and a CDN build that needs no bundler at all."
image: "https://fungies.io/og-image.jpg"
canonical: "https://fungies.io/fungies-sdk/"
---

Developers · JavaScript SDK

# One package between your page and a paid order

@fungies/fungies-js opens the Fungies checkout over your page or inside it, prefills what you already know about the customer, and tells you the moment payment lands. It has no dependencies, ships its own TypeScript types, and works from a script tag if you have no build step to speak of.

[Start free](https://app.fungies.io/register)

[Book a demo](https://calendly.com/duke-vuh/fungies-io-demo-clone)

No upfront costs. No credit card required.

[@fungies/fungies-js ↗](https://www.npmjs.com/package/@fungies/fungies-js)

Dependencies

None

Types

Bundled

Licence

MIT

Build step

Optional

Quickstart

## Install it, initialise it, open a checkout

Three lines is a working integration. Everything after that — prefill, discounts, quantities, custom fields, embedding it in an element of your own — is an option on the same call.

[SDK docs](https://docs.fungies.io/developers/checkout-elements/sdk) [View on npm](https://www.npmjs.com/package/@fungies/fungies-js)

InstallOverlayWith optionsEventsNo build step

```
npm install @fungies/fungies-js
# or: pnpm add @fungies/fungies-js
# or: yarn add @fungies/fungies-js
```

## The whole API surface

Fungies.Initialize()

Starts the SDK and begins listening for messages from the checkout frame. Pass enableDataAttributes: false if you would rather it ignored the DOM and did only what you ask it to.

Fungies.Checkout.open()

Takes a checkoutUrl and a settings object with mode 'overlay' or 'embed'. Everything else — billingData, discountCode, quantity, items, customFields — is optional and can be decided at runtime.

Fungies.Checkout.close()

Dismisses the overlay or removes the embedded frame. Useful when the checkout is one step in a wizard the customer can back out of.

Fungies.ScanDOM()

Re-scans the page for elements carrying checkout attributes. Call it after client-side routing so buttons rendered post-load pick up their handlers.

DOM\_CHECKOUT\_EVENTS

The two event names, fungies:checkout:complete and fungies:checkout:close, exported as constants so a typo becomes a compile error instead of a listener that never fires.

Data attributes

Every option has an attribute equivalent — data-fungies-checkout-url, data-fungies-mode, the billing prefill set, discount code, quantity, items and custom fields — so a static HTML page needs no JavaScript of its own.

TypeScript definitions

InitialCheckoutOpenOptions and DomCheckoutEvent are exported alongside the runtime, so the editor tells you the shape of the options object rather than the docs having to.

CDN build

A script tag from jsDelivr with data-auto-init does the initialising for you. Add data-auto-display-checkout and a page can render a checkout with no code at all.

## The docs worth reading next

Each of these covers one thing properly rather than everything briefly. The SDK page is the reference; the rest are the parts people ask about a week after going live.

-   [JavaScript SDK ↗ The full reference: every method, every option, and what each one does to the checkout frame.](https://docs.fungies.io/developers/checkout-elements/sdk)
-   [HTML data attributes ↗ The no-JavaScript route. Every option the SDK accepts, spelled as an attribute you can put on a button.](https://docs.fungies.io/developers/checkout-elements/html-attributes)
-   [Checkout elements overview ↗ Where the checkout URL comes from, and how overlay, embedded and hosted differ once you have one.](https://docs.fungies.io/developers/checkout-elements/overview)
-   [Billing data prefill ↗ Passing in what you already know about the customer, and which fields the checkout will accept.](https://docs.fungies.io/developers/checkout-elements/billing-data)
-   [Custom fields ↗ Carrying your own identifiers through a purchase and reading them back off the order afterwards.](https://docs.fungies.io/developers/customer-data/overview)
-   [Webhooks overview ↗ The half of the integration that runs on your server, and the one that actually grants access.](https://docs.fungies.io/developers/webhooks/overview)

## What you get for adding a dependency

01

### Nothing else comes with it

The package has no runtime dependencies. Adding it does not bring a transitive tree into your lockfile, does not pin you to a version of anything, and does not turn a checkout button into a supply-chain conversation.

02

### Card data never enters your code

The SDK opens an iframe we serve and talks to it by postMessage. Payment details are entered inside that frame and travel to us directly, so they never touch your DOM, your state or your logs — which is precisely what keeps the integration out of your compliance scope.

03

### A build step is optional

Import it from npm if you have a bundler. Load it from jsDelivr with data-auto-init if you do not. WordPress, Webflow, Framer and a hand-written HTML file are all first-class here, and the resulting checkout is identical.

04

### The checkout improves without you

New payment methods, tax rules and interface work all land inside the frame. An integration shipped a year ago collects every one of them without you republishing anything.

## Before you install it

### Do I need the SDK at all?

### Where does the checkout URL come from?

### Does it work with React, Vue, Svelte or Next.js?

### What is the difference between overlay and embed mode?

### How do I know when someone has paid?

### Is card data going through my application?

### Can I use it without npm?

## npm install and take a test payment

Build a checkout element, point the SDK at it, and put a real card through in test mode. No monthly fee and no card of your own needed to get there.

[Start free](https://app.fungies.io/register)

[Book a demo](https://calendly.com/duke-vuh/fungies-io-demo-clone)

No upfront costs. No credit card required.

```json
{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://fungies.io/#organization","name":"Fungies","legalName":"Fungies Inc.","url":"https://fungies.io/","description":"Merchant of Record for SaaS, games, and digital products. Fungies handles global payments, VAT and sales tax, and checkout. Free to start, commission only.","slogan":"Tax-compliant payments for everything digital","logo":{"@type":"ImageObject","url":"https://fungies.io/brand/fungies-logo-black.svg"},"image":"https://fungies.io/og-image.jpg","address":{"@type":"PostalAddress","streetAddress":"2100 Geng Road, Suite 210","addressLocality":"Palo Alto","addressRegion":"CA","postalCode":"94303","addressCountry":"US"},"sameAs":["https://www.facebook.com/fungies.io","https://www.linkedin.com/company/fungies","https://twitter.com/fungies_io","https://t.me/fungies_announcements","https://discord.gg/yfH5ZyTZH4","https://www.youtube.com/@Fungies","https://www.tiktok.com/@fungies_io"],"contactPoint":[{"@type":"ContactPoint","contactType":"customer support","email":"support@fungies.io","url":"https://help.fungies.io/","availableLanguage":["en"]}]},{"@type":"WebSite","@id":"https://fungies.io/#website","name":"Fungies","url":"https://fungies.io/","description":"Merchant of Record for SaaS, games, and digital products. Fungies handles global payments, VAT and sales tax, and checkout. Free to start, commission only.","inLanguage":"en","publisher":{"@id":"https://fungies.io/#organization"}},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://fungies.io/"},{"@type":"ListItem","position":2,"name":"Fungies JavaScript SDK","item":"https://fungies.io/fungies-sdk"}]},{"@type":"FAQPage","mainEntity":[{"@type":"Question","name":"Do I need the SDK at all?","acceptedAnswer":{"@type":"Answer","text":"Not for hosted checkout — that is a link. You need it to open the checkout over your page or inside an element of your own, and to be told in the browser when a purchase completes. If a plain link to a hosted page suits your flow, that is a legitimate integration and this package is optional."}},{"@type":"Question","name":"Where does the checkout URL come from?","acceptedAnswer":{"@type":"Answer","text":"From a checkout element you create in the dashboard, or through the API. Configure it once — products, fields, what happens after payment — and point as many buttons at it as you like. Changing it later does not require touching the site that links to it."}},{"@type":"Question","name":"Does it work with React, Vue, Svelte or Next.js?","acceptedAnswer":{"@type":"Answer","text":"Yes, and with none of them. The SDK is framework-agnostic: initialise once, call Fungies.Checkout.open on click. In a single-page app, call Fungies.ScanDOM() after a route change so buttons rendered by the router pick up their attributes."}},{"@type":"Question","name":"What is the difference between overlay and embed mode?","acceptedAnswer":{"@type":"Answer","text":"Overlay draws the checkout as a modal over your page. Embed renders it inside an element you name with frameTarget, inline with your content. It is the same checkout either way, so the choice is about where it appears, not what it can do."}},{"@type":"Question","name":"How do I know when someone has paid?","acceptedAnswer":{"@type":"Answer","text":"The SDK dispatches fungies:checkout:complete on document, which is how you should update your interface. It is not how you should grant access: use the payment_success webhook for that, because a browser event is lost the moment someone closes the tab and a webhook is retried until you acknowledge it."}},{"@type":"Question","name":"Is card data going through my application?","acceptedAnswer":{"@type":"Answer","text":"No. The SDK opens an iframe we serve and communicates with it by postMessage. Card details are entered inside that frame and go straight to us, so nothing sensitive passes through your code or your logs."}},{"@type":"Question","name":"Can I use it without npm?","acceptedAnswer":{"@type":"Answer","text":"Yes. Load it from jsDelivr with a defer script tag carrying data-auto-init and it will initialise itself and wire up anything on the page with checkout attributes. Add data-auto-display-checkout and it will render an embedded checkout on load without a click."}}]}]}
```