JSFiddle - React, Tailwind, and code Playground

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>
   <script src="https://unpkg.com/feather-icons"></script>
    <link
      href="https://sb-pgjs.paygreen.fr/latest/paygreen.min.css"
      type="text/css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div id="paygreen-container"></div>
    <!--Paygreen-->
    <div id="paygreen-methods-container"></div>
    <div class="pay-form">
      <!--Paygreen-->
      <div>
        <label>Card number</label>
        <div id="paygreen-pan-frame"></div>
      </div>

      <div class="line">
         <div>
        <label>CVV </label>
        <div id="paygreen-cvv-frame"></div>
      </div>
      <div>
        <label>Expiration</label>
        <div id="paygreen-exp-frame"></div>
      </div>
      </div>
   
 <div id="paygreen-reuse-checkbox-container"></div>
      <button id="payButton" class="button" onclick="handlePay()">Pay</button>
    </div>
   
  </body>
</html>

CSS

body {
  font-family: "Gill Sans", sans-serif;
  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;
  width: 33%;
  
}

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

.pay-form {
  width : 60%;
  padding: 1rem 0.5rem;
  display: flex;
  flex-direction: column;
      box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);
}

.pay-form > div {
  margin-top: 1rem;
}

.pay-form > label {
  color: grey;
  font-weight: 600;
}

.pay-form > .button {
  align-self: center;
  margin-top: 1rem;
}


.paygreen-pan-frame, .paygreen-cvv-frame, .paygreen-exp-frame {
  background-color: rgb(243, 243, 243);
  padding: 0 0.5rem;
  border: none !important;
}

.paygreen-pan-frame:hover, .paygreen-cvv-frame:hover, .paygreen-exp-frame:hover {
  border-bottom: #0d6efd solid 1px !important;
}


.line {
  display: flex;
  justify-content: space-between;
}

.line > div {
  max-width: 48%;
}

#paygreen-reuse-checkbox-container {
  margin-top: 1rem;
  height: 60px;
}

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: 'black',
      },
    },
    box: {
      base: {
        color: '#0d6efd',
        hover: {
          color: '#424242',
        },
      },
      unchecked: {
        color: '#0d6efd',
      },
    },
  },
};

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();
});