Quickstart

PaygreenJS is a payment javascript library powered by Paygreen.

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.

Prerequisites

Before using the quickstart snippet below, you must have :

A validated account on https://app.paygreen.fr/
You must have payment configs enabled
A public_key (Keys Page)
You must 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.attachEventListener(
            paygreenjs.Events.FULL_PAYMENT_DONE,
            (event) => console.log("Payment success"),
        );

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

        paygreenjs.attachEventListener(
            paygreenjs.Events.PAYMENT_FLOW_ONCHANGE,
            () => {
                const flows = paygreenjs.status().flows;
                const lastFlow = flows[flows.length - 1];
                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>