Functions

All methods are available on the global paygreenjs object once the library is loaded.

paygreenjs.init({ /* ... */ });
paygreenjs.on(paygreenjs.Events.FULL_PAYMENT_DONE, onSuccess);

Quick reference

MethodSignatureReturns
initinit(config: InitParams)void
unmountunmount(detachEvents?: boolean)void
statusstatus()StatusType
submitPaymentsubmitPayment()void
setPaymentMethodsetPaymentMethod(method: string)string | false
useInstrumentuseInstrument(instrumentId: string)string
setLanguagesetLanguage(lang)string
focusfocus(field: 'pan' | 'cvv' | 'exp')void
updateConsentupdateConsent(value: boolean)void
onon(event, callback)void
offoff(event, callback)void
versionversion()string
Events— (enum)

Methods in detail

init

Mount PaygreenJS and start a flow. See init parameters.

paygreenjs.init({
  publicKey: 'pk_...',
  mode: 'payment',
  paymentOrder: { id: 'po_...', objectSecret: '...' },
});

Throws (and fires ERROR) if the configuration is invalid or #paygreen-container is missing.

unmount

Remove every widget injected by PaygreenJS.

paygreenjs.unmount();      // keep listeners
paygreenjs.unmount(true);  // also detach every on() listener

Use unmount(true) when the buyer navigates away in a single-page app — otherwise old listeners may fire on the next page.

status

Returns the live state. Safe to call any time, including outside an event callback.

const { isDone, isFail, flows, paymentOrder, lang } = paygreenjs.status();
type StatusType = {
  isDone:       boolean;          // Payment Order is authorized or successed
  isFail:       boolean;          // Payment Order is refused / error / expired / canceled
  flows:        PaymentFlowType[];
  paymentOrder: PaymentOrderType | null;
  lang:         'en' | 'fr' | 'de' | 'es' | 'it';
}

submitPayment

Trigger the submission of the hosted-fields form programmatically. Useful when you want your own Pay button instead of the one PaygreenJS injects.

document.querySelector('#my-pay-button').addEventListener('click', () => {
  paygreenjs.submitPayment();
});

setPaymentMethod

Switch the active method in the current flow.

const ok = paygreenjs.setPaymentMethod('swile');
if (ok === false) {
  // Either the flow has already started, or 'swile' is not enabled on this Payment Order.
}

Returns the method name on success, or false if the call was rejected.

useInstrument

Pay with an existing saved instrument (one-click).

paygreenjs.useInstrument('ins_xxx');

Throws if the Payment Order is already in a terminal state.

setLanguage

Change the active language at runtime. Works in every mode.

paygreenjs.setLanguage('fr');

setLanguage() updates:

  • The UI strings injected by PaygreenJS (Pay button, "Save card" copy, validation messages).
  • The hosted iframes — they're reloaded with ?lang=… in their URL.
  • The OAuth redirects of wallets (ANCV, Swile, Restoflash) — the language is forwarded as a query string so the wallet login page shows the right language.

focus

Focus one of the hosted card fields programmatically.

paygreenjs.focus('pan'); // or 'exp' / 'cvv'

updateConsent

Set the "save my card for future use" consent.

paygreenjs.updateConsent(true);

Throws if the PSP configuration doesn't allow card reuse. See Customization for the hosted consent checkbox.

on / off

Subscribe and unsubscribe from an event.

function onDone(event) { console.log(event?.detail) }

paygreenjs.on(paygreenjs.Events.FULL_PAYMENT_DONE, onDone);
paygreenjs.off(paygreenjs.Events.FULL_PAYMENT_DONE, onDone);

See the complete list of events on the Events page.

version

paygreenjs.version(); // '1.0.0'

Deprecated

DeprecatedReplacement
attachEventListener(event, cb)on(event, cb)
detachEventListener(event, cb)off(event, cb)