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> 

var config = {
    paymentDetails: {
        amount: "100",
        currencyCode: "826",
        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"
            },
        }
    }
}

var connectE = new Connect.ConnectE(config, displayErrors);
var btn = document.getElementById("testPay");

$('#testPay').on('click',
    function() {
        var btn = $(this);
        btn.button('loading');
        connectE.executePayment()
            .then(function(data) {
                $("#demo-payment").hide();
                $("#testPay").hide();
                $("#demo-result").show();
                $("#status-code").text(data.statusCode);
                $("#auth-code").text(data.authCode);
            }).catch(function(data) {
                    console.log('Payment Request failed: ' + data);
                    $("#errors").text(data);
                }
            ).finally(function() {
                btn.button('reset');
            });
    });

function displayErrors(errors) {
    var errorsDiv = document.getElementById('errors');
    errorsDiv.innerHTML = '';
    if (errors && errors.length) {
        var list = document.createElement("ul");
        errors.forEach(function(error) {
            var 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: 370px;
    height: 366px;
    margin: 100px 0 0 -175px;
    position: fixed;
    top: 0;
    left: 50%;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
}