PGJS Example #1

by Enzo BILLIS

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>MyWebiste - ECommerce</title>
    <!--Paygreen Payement Integration-->
    <script
      defer
      type="text/javascript"
      src="https://sb-pgjs.paygreen.fr/latest/paygreen.min.js"
    ></script>
    <link
      href="https://sb-pgjs.paygreen.fr/latest/paygreen.min.css"
      type="text/css"
      rel="stylesheet"
    />
  </head>
  <body>
    <!--Paygreen-->
    <div id="paygreen-container"></div>
    <!--Paygreen-->
    <div id="paygreen-methods-container"></div>
    <div>
      <!--Paygreen-->
      <div id="paygreen-pan-frame"></div>
      <div id="paygreen-cvv-frame"></div>
      <div id="paygreen-exp-frame"></div>
    </div>
    <!--Paygreen-->
    <button id="payButton" onclick="handlePay()">Pay</button>
    <div id="paygreen-reuse-checkbox-container"></div>
  </body>
</html>

JavaScript

const style = {
  input: {
    base: {
      color: 'black',
      fontSize: '18px',
    },
    hover: {
      color: 'grey',
    },
    focus: {
      color: 'grey',
    },
    invalid: {
      color: 'red',
    },
    placeholder: {
      base: {
        color: 'grey',
      },
    },
  },
  checkbox: {
    label: {
      base: {
        color: 'black',
      },
      unchecked: {
        color: 'red',
      },
    },
    box: {
      base: {
        color: 'black',
        hover: {
          color: 'red',
        },
      },
      unchecked: {
        color: 'red',
      },
    },
  },
};

const handlePay = () => {
  paygreenjs.submitPayment();
};

const initPGJS = () => {
  paygreenjs.attachEventListener(paygreenjs.Events.PAN_FIELD_FULFILLED, () => {
    console.log('pan fullfilled');
    paygreenjs.focus('cvv');
  });

  paygreenjs.attachEventListener(paygreenjs.Events.CVV_FIELD_FULFILLED, () => {
    paygreenjs.focus('exp');
  });

  paygreenjs.init({
    // paymentOrderID: 'po_ea20d6630ccf4da0b39d96969a0bcc4f',
    // objectSecret: '349399cbb9c6c07c',
    mode: 'instrument',
    modeOptions: {
      authorizedInstrument: false,
    },
    style,
    paymentMethod: 'bank_card',
    publicKey: 'pk_f25794da1fc5400a86d42f1ef33075d6',
  });
};

window.addEventListener('load', function () {
  initPGJS();
});