Connect-E - Standard

<div id="demo-payment"></div>
  <div id="errors"></div>
  <button id="testPay" class="btn-primary btn pull-right"
          data-loading-text="Processing...">Pay</button>
  <div id="demo-result" style="display: none">
      <h5>Payment Complete</h5>
      <dl>
        <dt>Status Code</dt>
        <dd id="status-code"></dd>
        <dt>Auth Code</dt>
        <dd id="auth-code"></dd>
      </dl>
  </div> 

const payConfig = {
   paymentDetails: {
       paymentToken: /*access token here*/
   },
   containerId: "demo-payment",
   fontCss: ['https://fonts.googleapis.com/css?family=Do+Hyeon'],
   styles: {
       base: {
           default: {
               color: "black",
               textDecoration: "none",
               fontFamily: "'Do Hyeon', sans-serif",
               boxSizing: "border-box",
               padding: ".375rem .75rem",
               boxShadow: 'none',
               fontSize: '1rem',
               borderRadius: '.25rem',
               lineHeight: '1.5',
               backgroundColor: '#fff',

           },
           focus: {
               color: '#495057',
               borderColor: '#80bdff',
           },
           error: {
               color: "#B00",
               borderColor: "#B00"
           },
           valid: {
               color: "green",
               borderColor: 'green'
           },
           label: {
               display: 'none'
           }
       },
       cv2: {
           container: {
               width: "25%",
               float: "left",
               boxSizing: "border-box"
           },
           default: {
               borderRadius: "0 .25rem .25rem 0"
           }
       },
       expiryDate: {
           container: {
               width: "25%",
               float: "left",
               borderRadius: '0rem',
           },
           default: {
               borderRadius: "0",
               borderRight: "none"
           },
       },

       cardNumber: {
           container: {
               width: "50%",
               float: "left",
           },
           default: {
               borderRadius: ".25rem 0 0 .25rem",
               borderRight: "none"
           },
       }
   }
}

const connectE = new Connect.ConnectE(payConfig, displayErrors);
const btnTestPay = document.getElementById("testPay");

btnTestPay.onclick = () =>{
   btnTestPay.innerText = 'loading';
   btnTestPay.setAttribute("disabled", "true");
   connectE.executePayment()
       .then(function(data) {
           document.getElementById("demo-payment").hidden = true;
           btnTestPay.remove();
           document.getElementById("demo-result").hidden = false;
           document.getElementById("status-code").innerText = data.statusCode;
           document.getElementById("auth-code").innerText = data.authCode;
       }).catch(function(data) {
               console.log('Payment Request failed: ' + data);
               btnTestPay.innerText = 'Pay';
               btnTestPay.removeAttribute("disabled");
               if (typeof data === 'string') {
                   document.getElementById("errors").innerText = data;
               }
               if (data && data.message) {
                   document.getElementById("errors").innerText = data.message;
               }
           }
       );
   };
function displayErrors(errors) {
   const errorsDiv = document.getElementById('errors');
   errorsDiv.innerHTML = '';
   if (errors && errors.length) {
       const list = document.createElement("ul");
       for (const error of errors){
           const item = document.createElement("li");
           item.innerText = error.message;
           list.appendChild(item);
       }
       errorsDiv.appendChild(list);
   }
}

#demo-payment iframe { width: 100%; }

#demo-result, #demo-payment, #recurring-demo-payment, #recurring-payment { padding: 5px; }

#errors li { color: #B00; }

iframe.threeDs {
    width: 400px;
    height: 400px;
    margin: 100px 0 0 -175px;
    position: fixed;
    top: 0;
    left: 50%;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
    background-color: white;
}