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
| Method | Signature | Returns |
|---|---|---|
init | init(config: InitParams) | void |
unmount | unmount(detachEvents?: boolean) | void |
status | status() | StatusType |
submitPayment | submitPayment() | void |
setPaymentMethod | setPaymentMethod(method: string) | string | false |
useInstrument | useInstrument(instrumentId: string) | string |
setLanguage | setLanguage(lang) | string |
focus | focus(field: 'pan' | 'cvv' | 'exp') | void |
updateConsent | updateConsent(value: boolean) | void |
on | on(event, callback) | void |
off | off(event, callback) | void |
version | version() | string |
Events | — (enum) | — |
Methods in detail
init
initMount 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
unmountRemove every widget injected by PaygreenJS.
paygreenjs.unmount(); // keep listeners
paygreenjs.unmount(true); // also detach every on() listenerUse
unmount(true)when the buyer navigates away in a single-page app — otherwise old listeners may fire on the next page.
status
statusReturns 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
submitPaymentTrigger 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
setPaymentMethodSwitch 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
useInstrumentPay with an existing saved instrument (one-click).
paygreenjs.useInstrument('ins_xxx');Throws if the Payment Order is already in a terminal state.
setLanguage
setLanguageChange 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
focusFocus one of the hosted card fields programmatically.
paygreenjs.focus('pan'); // or 'exp' / 'cvv'updateConsent
updateConsentSet 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
on / offSubscribe 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
versionpaygreenjs.version(); // '1.0.0'Deprecated
| Deprecated | Replacement |
|---|---|
attachEventListener(event, cb) | on(event, cb) |
detachEventListener(event, cb) | off(event, cb) |
Updated 9 days ago