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.
- None
- Bundled
- MIT
- Optional
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.
npm install @fungies/fungies-js
# or: pnpm add @fungies/fungies-js
# or: yarn add @fungies/fungies-jsThe 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.
- HTML data attributes ↗ The no-JavaScript route. Every option the SDK accepts, spelled as an attribute you can put on a button.
- Checkout elements overview ↗ Where the checkout URL comes from, and how overlay, embedded and hosted differ once you have one.
- Billing data prefill ↗ Passing in what you already know about the customer, and which fields the checkout will accept.
- Custom fields ↗ Carrying your own identifiers through a purchase and reading them back off the order afterwards.
- Webhooks overview ↗ The half of the integration that runs on your server, and the one that actually grants access.
What you get for adding a dependency
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.
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.
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.
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
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.