Initialize the library by calling paygreenjs.init() with a configuration object.
JavaScript
paygreenjs.init({
paymentOrder: {
id: "po_xxxxxxxxxxxxxxxxxxx",
objectSecret: "xxxxxxxxxxxx"
},
publicKey: "pk_xxxxxxxxxxx",
mode: "payment",
});Name Type When required Description publicKeyStringAlways Public key of your Paygreen shop. Find or create one here . modeStringAlways (defaults to payment) Defines how the library works. payment mode runs a payment. instrument mode creates a reusable instrument. paymentOrderObject { id, objectSecret }In payment mode The Payment Order id and its single-use object secret (returned once in the response of POST createPaymentOrder). paymentMethodStringIn instrument mode Which method to use. Optional in payment mode — if omitted, PaygreenJS lists all methods available on the Payment Order.
Name Type Default Description instrumentObject { id }{ id: null }Pay with an existing saved instrument (one-click). buyerObject { id }{ id: null }Buyer information used to link an instrument. langStringBrowser language, fallback en UI language. Supported: en, fr, de, es, it. modeOptionsObject{}Additional options depending on the selected mode. See below. styleObjectnullCustom styles applied to the iframes of the payment form. See Customization . displayObjectSee below Card/CVV icon display and 3DS presentation mode.
👍
mode: instrument with authorizedInstrument: true.
Without it, init() throws with Buyer is required for authorized instrument....
Sub-field Type Default Description cardIconBooleantrueShow the card-brand icon next to the PAN field. cvvIconBooleanfalseShow a help icon next to the CVV field. authenticationString'inline'How 3DS is presented: 'inline' (inside #paygreen-container) or 'modal' (centered overlay).
Sub-field Type Default Description authorizedInstrumentBooleantrue for bank_card, amex, swile, restoflash. false otherwise.Create the instrument and authorize it in one call (with 3DS if required). shopIdString (sh_…)nullMarketplace setup: link the created instrument to a specific sub-shop while authenticating with the marketplace public key.
JavaScript
paygreenjs.init({
publicKey: "pk_xxxxxxxxxxx",
mode: "payment",
paymentMethod: "bank_card",
paymentOrder: {
id: "po_xxxxxxxxxxxxxxxxxxx",
objectSecret: "xxxxxxxxxxxx",
},
lang: "en",
style: {
input: { base: { color: "#111827", fontSize: "16px" } },
},
display: {
cardIcon: true,
cvvIcon: true,
authentication: "modal",
},
});
