Connect-E - Standard Repeat Payment

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

var config = {
    onIframeLoaded: function() { console.log("iframe loaded") },
    paymentDetails: {
        amount: "100",
        currencyCode: "826",
        paymentToken: "/*access token here*/"
    },
    "containerId": "recurring-demo-payment",
    fontCss: ['https://fonts.googleapis.com/css?family=Do+Hyeon'],
    styles: {
        cv2: {
            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',
                backgroundColor: '#fff',
                borderColor: '#80bdff',
                outline: '0',
                boxShadow: '0 0 0 0.2rem rgba(0,123,255,.25)'
            },
            error: {
                color: "#B00",
                borderColor: "#B00"
            },
            valid: {
                color: "green"
            },
            label: {
                display: 'none'
            },
            container: {
                width: "50%",
                float: "left",
                paddingLeft: "5px",
                boxSizing: "border-box"
            },
        },

    },
    text: {
        cv2: {
            label: "CVV",
            placeholder: "CVV"
        }
    }
};

var recurringPayment = new Connect.ConnectERecurringPayment(config, displayErrors);


$("#recurring-test-pay").on('click',
    function() {
        var btn = $(this);
        btn.button('loading');
        recurringPayment.executePayment()
            .then(function(data) {
                $("#recurring-demo-payment").hide();
                $("#recurring-test-pay").hide();
                $("#recurring-demo-result").show();
                $("#recurring-status-code").text(data.statusCode);
                $("#recurring-auth-code").text(data.authCode);
            })
            .catch(function(data) {
                console.log('Payment Request failed: ' + data);
                if (!Array.isArray(data)) {
                    var message = data.message ? data.message : JSON.stringify(data);
                    $("#recurring-errors").text("Payment failed: " + message);    
                }
            })
            .finally(function() {
                btn.button('reset');
            });
    });


function displayErrors(errors) {
    var errorsDiv = document.getElementById('recurring-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 { 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);
}