PGJS Example #3

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>
    <div id="paygreen-container"></div>
    <!--Paygreen-->
    <div id="paygreen-methods-container"></div>
    
     
    <div class="pay-form">
     <label>Card details</label>
     <div class="inputs-container">
       <div id="paygreen-pan-frame"></div>
        <div id="paygreen-cvv-frame"></div>
        <div id="paygreen-exp-frame"></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;
      box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);
}

.inputs-container {
  margin-top: 1rem;
   display: flex;
  flex-direction: row;
}

.inputs-container:hover {
border-bottom: #0d6efd solid 1px !important;
}


#payButton {
  align-self: center;
  margin-top: 1rem;
}


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

#paygreen-pan-frame {
  width: 60%;
}
#paygreen-cvv-frame {
  width: 20%;
}
#paygreen-exp-frame {
  width: 20%;
  
}
#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: 'red',
      },
    },
    box: {
      base: {
        color: '#0d6efd',
        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();
});