JavaScript SDK
Open the payment method element with the Fungies JavaScript SDK.
The element uses the same @fungies/fungies-js
package as checkout. PaymentMethod.update() works without calling Fungies.Initialize().
Open the element
Fetch a session from your own backend (see
Mint a session), then pass the
sessionToken and url to the SDK.
import { Fungies } from "@fungies/fungies-js";
const { sessionToken, url } = await fetch("/api/payment-method-session", {
method: "POST",
}).then((r) => r.json());
Fungies.PaymentMethod.update({
sessionToken,
url,
settings: {
mode: "overlay", // 'overlay' | 'embed'
frameTarget: "target-element-id", // required with 'embed', ignored by 'overlay'
},
});
// Close it from your code (fires no event)
Fungies.PaymentMethod.close();The token reaches the element over postMessage only. There is no data-* attribute version of
this flow on purpose: a token in the DOM can be read by every script on your page and is captured
by session-replay tools.
settings.mode must be 'overlay' or 'embed'. Any other value, a missing sessionToken or an
invalid url logs a console warning and opens nothing.
Events
| Event | When it fires |
|---|---|
fungies:payment-method:updated | The new payment method was saved. An overlay closes itself. |
fungies:payment-method:failed | The session can't be used: expired, already used or invalid, or the frame didn't answer within 15 seconds (for example, your domain isn't authorized). Mint a new token to retry. |
fungies:payment-method:close | The customer closed the overlay. Not fired by PaymentMethod.close(). |
At most one of updated or failed fires per session. A declined card fires nothing: the form
stays open and the customer can try another card.
The event names are exported as DOM_PAYMENT_METHOD_EVENTS. To import them without loading the
SDK, for example in server-side code, use @fungies/fungies-js/events.
React example
import { useEffect } from "react";
import { DOM_PAYMENT_METHOD_EVENTS, Fungies } from "@fungies/fungies-js";
export function UpdateCardButton() {
useEffect(() => {
const onUpdated = () => {
// Refresh the card shown on your page. Act on the webhook for anything that must happen.
};
const onFailed = () => {
// The session is dead. Let the customer try again with a fresh one.
};
document.addEventListener(DOM_PAYMENT_METHOD_EVENTS.UPDATED, onUpdated);
document.addEventListener(DOM_PAYMENT_METHOD_EVENTS.FAILED, onFailed);
return () => {
document.removeEventListener(
DOM_PAYMENT_METHOD_EVENTS.UPDATED,
onUpdated,
);
document.removeEventListener(DOM_PAYMENT_METHOD_EVENTS.FAILED, onFailed);
};
}, []);
const open = async () => {
const { sessionToken, url } = await fetch("/api/payment-method-session", {
method: "POST",
}).then((r) => r.json());
Fungies.PaymentMethod.update({
sessionToken,
url,
settings: { mode: "overlay" },
});
};
return <button onClick={open}>Update card</button>;
}Last updated