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.

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

Then add PaygreenJS to your website like this (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-cvv-frame"></div>
          <div id="paygreen-exp-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.