Base PGJS

by Enzo BILLIS

HTML

<script src="https://sb-pgjs.paygreen.fr/latest/paygreen.min.js"></script>
<link rel="stylesheet" href="https://sb-pgjs.paygreen.fr/latest/paygreen.min.css">
<!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>

CSS

body {
  padding: 1rem
}

.button {
  cursor: pointer;
  outline: 0;
  display: inline-block;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 6px 12px;
  font-size: 1rem;
  border-radius: .25rem;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  color: #0d6efd;
  border-color: #0d6efd;
}

.button:hover {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}

JavaScript

window.addEventListener('load', function() {
    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',
          },
        },
      },
    }

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

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


const EventsTypes = [
    'FULL_PAYMENT_DONE',
    'PAYMENT_FLOW_ONCHANGE',
    'ACTUAL_FLOW_PAYMENT_DONE',
    'ERROR',
    'REUSABLE_ALLOWED_CHANGE',
    'PAYMENT_FAIL',
    'TOKEN_READY',
    'TOKEN_FAIL',
    'PAN_FIELD_ONCHANGE',
    'PAN_FIELD_FULFILLED',
    'EXP_FIELD_ONCHANGE',
    'EXP_FIELD_FULFILLED',
    'CVV_FIELD_ONCHANGE',
    'CVV_FIELD_FULFILLED',
    'CARD_ONCHANGE',
    'REQUEST_SUBMIT_TOKENIZE_FORM',
    'INSTRUMENT_READY',
    'AUTHENTICATION_FLOW_START',
  ];
	setTimeout(() => {
    EventsTypes.map((ev) => {
    paygreenjs.attachEventListener(paygreenjs.Events[`${ev}`], (event) => {
      console.log(`${ev}`, event.detail || '');
    });
  });
  console.log("setted")
  }, 5000)




    paygreenjs.init({
      // paymentOrderID: 'po_ea20d6630ccf4da0b39d96969a0bcc4f',
      // objectSecret: '349399cbb9c6c07c',
      mode: 'instrument',
      modeOptions: {
       ...