Introduction

PaygreenJS is a payment javascript library powered by Paygreen, designed to simplify the integration of Paygreen's payment solutions into web applications. With this library, you can manage online payments easily and securely.

This documentation provides a detailed guide on installing, configuring, and using the paygreenJS library.

Core Concepts

Payment Order

A Payment Order represents a payment intent created from your backend. It contains:

Amount
Currency
Customer data
Current payment state
Object Secret

Object Secret

A one-time token generated server-side that authorizes PayGreenJS to access a specific Payment Order.

Public Key

A public identifier of your merchant account. This can be safely exposed in frontend code.

Secret Key

A private key used to authenticate API requests from your backend. Never expose this key in frontend code. It is required to create Payment Orders and generate Object Secrets.

Payment Method

Represents the type of payment the user will use : bank_card, amex, conecs, swile ... view all payment methods

Note: Apple Pay and Google Pay are not directly accessible through PayGreenJS due to security restrictions, but are available on the PayGreen payment page.

Payment Flow

The state of the payment process, including success, failed. You can listen to changes using PAYMENT_FLOW_ONCHANGE. view all events

Payment Flow (High Level)

Backend creates a Payment Order
Frontend initializes PayGreenJS (with the payment_order_ID and the object_secret included in the payment order
PayGreenJS renders the payment methods
User selects a payment method
PayGreenJS renders the payment form
User completes payment (including 3DS if required)
Events are emitted to your frontend

Quickstart

Before using the quickstart snippet below, you must have :

A validated account on https://app.paygreen.fr/
One or more payment configs enabled
A public_key (Keys Page)
Create a PaymentOrder (instructions here) to retrieve a payment order ID and an object secret

Installation

CDN

<script defer type="text/javascript" src="https://pgjs.paygreen.fr/latest/paygreen.min.js"></script>
<link href="https://pgjs.paygreen.fr/latest/paygreen.min.css" type="text/css" rel="stylesheet" />

Then add PaygreenJS to your website as in this example (don't forget to change the parameters at the very end of the snippet)

<!DOCTYPE html>
<html>
  <head>
    <title>MyShop - Payment</title>
    <script defer type="text/javascript" src="https://pgjs.paygreen.fr/latest/paygreen.min.js"></script>
    <link href="https://pgjs.paygreen.fr/latest/paygreen.min.css" type="text/css" rel="stylesheet" />
  </head>

  <body>
      <div id="paygreen-container"></div>
      <div id="paygreen-methods-container"></div>
      <div id="yourCustomDiv">
          <div id="paygreen-pan-frame"></div>
          <div id="paygreen-exp-frame"></div>
          <div id="paygreen-cvv-frame"></div>
          <div id="paygreen-reuse-checkbox-container"></div>
          <button id="payBtn" type="button" onclick="handleClick()" style="display: none">
              Pay
          </button>
      </div>
  </body>

  <script type="text/javascript">
    const handleClick = () => {
      paygreenjs.submitPayment();
    };
     window.addEventListener("load", function() {
       paygreenjs.on(
            paygreenjs.Events.FULL_PAYMENT_DONE,
            (event) => console.log("Payment success"
       ));

        paygreenjs.on(
            paygreenjs.Events.REUSABLE_ALLOWED_CHANGE,
            (event) => console.log(event.detail.reusable_allowed
        ));

        paygreenjs.on(
            paygreenjs.Events.PAYMENT_FLOW_ONCHANGE,
            () => {
                const flows = paygreenjs.status().flows;
                const lastFlow = flows.slice(-1); //Last flow is the active flow
                if (lastFlow?.method) {
                    document.querySelector('#payBtn').style.display = 'block';
                } else {
                    document.querySelector('#payBtn').style.display = 'none';
                }
            },
        );

        paygreenjs.init({
            paymentOrderID: "po_xxxxxxxxxxxxxxxxxxx", <!--Add your payment order ID-->
            objectSecret: "xxxxxxxxxxxx", <!--Add the payment order objectsecret here -->
            publicKey: "pk_xxxxxxxxxxx", <!--Add your public key here-->
            mode: "payment",
            style: {
                input: {
                    base: {
                        color: 'black',
                        fontSize: '18px',
                    },
                },
            }
        });
    });
  </script>
</html>

Modes of use within PaygreenJS:

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.