Initialize the library by calling paygreenjs.init() with a configuration object.
paygreenjs.init({
paymentOrder: {
id: "po_xxxxxxxxxxxxxxxxxxx",
objectSecret: "xxxxxxxxxxxx"
},
publicKey: "pk_xxxxxxxxxxx",
mode: "payment",
});
| Name | Type | When required | Description |
|---|
publicKey | String | Always | Public key of your Paygreen shop. Find or create one here. |
mode | String | Always (defaults to payment) | Defines how the library works. payment mode runs a payment. instrument mode creates a reusable instrument. |
paymentOrder | Object { id, objectSecret } | In payment mode | The Payment Order id and its single-use object secret (returned once in the response of POST createPaymentOrder). |
paymentMethod | String | In 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 |
|---|
instrument | Object { id } | { id: null } | Pay with an existing saved instrument (one-click). |
buyer | Object { id } | { id: null } | Buyer information used to link an instrument. |
lang | String | Browser language, fallback en | UI language. Supported: en, fr, de, es, it. |
modeOptions | Object | {} | Additional options depending on the selected mode. See below. |
style | Object | null | Custom styles applied to the iframes of the payment form. See Customization. |
display | Object | See 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 |
|---|
cardIcon | Boolean | true | Show the card-brand icon next to the PAN field. |
cvvIcon | Boolean | false | Show a help icon next to the CVV field. |
authentication | String | 'inline' | How 3DS is presented: 'inline' (inside #paygreen-container) or 'modal' (centered overlay). |
| Sub-field | Type | Default | Description |
|---|
authorizedInstrument | Boolean | true for bank_card, amex, swile, restoflash. false otherwise. | Create the instrument and authorize it in one call (with 3DS if required). |
shopId | String (sh_…) | null | Marketplace setup: link the created instrument to a specific sub-shop while authenticating with the marketplace public key. |
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",
},
});
