Complete styled example

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>
    <h3>
    Payment method
    </h3>
    <div class="pay-form">
      <!--Paygreen-->
      <div>
        <label>Card number</label>
        <div id="paygreen-pan-frame"></div>
      </div>

      <div class="line">
        <div>
          <label>Expiration</label>
          <div id="paygreen-exp-frame"></div>
        </div>
        <div class="paygreen-cvv-container">
          <label>CVV </label>
          <div id="paygreen-cvv-frame"></div>
          <i data-feather="help-circle" ></i>
        </div>

      </div>

      <div id="paygreen-reuse-checkbox-container"></div>
      <button id="payButton" class="button" onclick="handlePay()">Pay €<strong>240.21</strong></button>
      <div class="icon-sentence">
        <i data-feather="lock"></i>
        <label class="secured-label"> Payment secured and powered by <strong>Paygreen</strong></label>
      </div>

    </div>
    <script>
      feather.replace()

    </script>
  </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;
  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;
  width: 33%;
 color: #fff;
  background-color: #002B5B;
  border-color: #002B5B;
}

.button:hover {
  color: #fff;
  background-color: #2B4865;
  border-color: #2B4865;
}

.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: #002B5B solid 1px !important;
}

.paygreen-cvv-container > svg {
  position: absolute;
  right: 0.5rem;
  top: 45%;
  width: 1rem;
  cursor: pointer;
}


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

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

.icon-sentence {
  justify-content: center;
  display: flex;
  align-items: center;
  margin-top: 1rem;

}

.icon-sentence>svg {
  width: 16px;
  margin-right: 1rem
}

.secured-label {
  text-align: center;
  font-weight: 400 !important;
  color: #666 !important;
  font-size: 12px;
}

.secured-label>strong {
  color: #002B5B;
  font-weight: 800;
  font-size: 13px;
}

#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: '#002B5B',
        hover: {
          color: '#424242',
        },
      },
      unchecked: {
        color: '#002B5B',
      },
    },
  },
};

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


  /* !!! Warning !!! remind to change mode instrument to mode payment if you want to process a payment. Refer to documentation */
  paygreenjs.init({
    // paymentOrderID: 'po_ea20d6630ccf4da0b39d96969a0bcc4f',
    // objectSecret: '349399cbb9c6c07c',
    mode: 'instrument',
    modeOptions: {
      authorizedInstrument: false,
    },
    style,
    paymentMethod: 'bank_card',
    publicKey: 'pk_f25794da1fc5400a86d42f1ef33075d6',
  });
};

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