Modes

• Mode = "payment": Allows you, from a payment order, to display the payment form according to what you defined in the payment order.
• Mode = "instrument": Allows you to create instruments (cards) that can be reused one or more times.

Mode Payment

window.addEventListener("load", function () {
  paygreenjs.init({
    paymentOrderID: "po_4b6c4203ff89488265ar971f45ac6ff9",
    objectSecret: "6a2d6828147f626d",
    mode: "payment",
    publicKey: "pk_231e1063b8fb324d9324acc9f94af8a5",
    instrument: "ins_fc6409dc32f248839295539623276cl98", // Optionnal
    paymentMethod: "bank_card", // Optionnal
    style: {
      input: {
        base: {
          color: "black",
          fontSize: "18px",
        },
      },
    },
  });
});

Once the init method will be exectued, you should see the payment form (or the payment methods available if no paymentMethod is provided)

Mode Instrument

window.addEventListener("load", function () {
  paygreenjs.on(
    paygreenjs.Events.INSTRUMENT_READY,
    (event) => {
      const instrument = event.detail.instrument;
      // ...Handle instrument here
    }
  );

  paygreenjs.init({
    publicKey: "pk_231e1063b8fb324d9324acc9f94af8a5",
    mode: "instrument",
    buyer: "buy_34def8077f774cea8a6f58daojns65419",
    modeOptions: {
      authorizedInstrument: true,
    },
    paymentMethod: "bank_card",
  });
});

Instrument mode provide you a valid instrument once the form has been completed. You will get the instrument (authorized or not) throught the INSTRUMENT_READY event. Tokenizing error will be return in the event TOKEN_FAIL.

You can create an instrument as a marketplace for a sub-shop using the params modeOptions.shopId passing the sub-shop id

After, for example, you can init PGJS in payment mode with this instrument (Pass the instrumentId as in the 1st example) to process the payment.

Which mode to choose ?

PaygreenJS offers your two modes: payment and instrument, those modes allow you to process any payment flow and fit to your needs.

Synchronous Payment Flow

The synchronous flow is the simplest: the buyer stays on the same page throughout the payment process.

How it works:

1. Initialize PGJS with your payment order.
2. The buyer enters their information and pays.
3. You receive updates via JS events and API hooks.

This flow is easy to implement as it requires no extra steps.

Instrument Flow (Collect Payment Info Only)

Sometimes you just want to collect the buyer’s payment information without charging them. For example, to enable a wallet or OneClick feature.

How it works:

1. Initialize PGJS in instrument mode.
2. The buyer enters their payment details.
3. You get an instrument that can be used later to make a payment.

No charge is made because no payment order is linked.

Asynchronous Payment Flow

Sometimes you need to collect the buyer’s payment information before creating the payment order. For example, if you have a tips system, the final amount is unknown until the buyer enters it.

Solution: combine instrument and payment modes.

1. Initialize PGJS in instrument mode to get an instrument.
2. Create the payment order with the final amount (including tips).
3. Unmount and Re-initialize PGJS in payment mode and pass the previously obtained instrumentId.

The payment is then processed automatically using the instrument.