Quickstart

Here is a quick start snippet adding PaygreenJS to your website :
<!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",
            objectSecret: "xxxxxxxxxxxx",
            publicKey: "pk_xxxxxxxxxxx",
            mode: "payment",
            style: {
                input: {
                    base: {
                        color: 'black',
                        fontSize: '18px',
                    },
                },
            }
        });
    });
  </script>
</html>