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>

const config = {
    onIframeLoaded: () => { console.log("iframe loaded") },
    paymentDetails: {
        amount: "100",
        currencyCode: "826",
        paymentToken: "W0CefAwdAi2SI9fwOVp9Qp0S8BYBHiungu2C5efgORht9-4Vn3DOqNcvKVnhA64YYb8po-Kg7pdjxORcc8Oe38D8EqdnjVNZFA6cvN3ljsFx2l8_JLbz"
    },
    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"
        }
    }
};

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

const btn = document.getElementById("recurring-test-pay");
 btn.onclick = () =>{
    btn.text = 'loading';
    btn.setAttribute("disabled", "true");
    recurringPayment.executePayment()
        .then(function(data) {
            document.getElementById("recurring-demo-payment").hidden = true;
            btn.remove();
            document.getElementById("recurring-demo-result").hidden = false;
            document.getElementById("recurring-status-code").text = data.statusCode;
            document.getElementById("recurring-auth-code").text = data.authCode;
        }).catch(function(data) {
                console.log('Payment Request failed: ' + data);
                if (typeof data === 'string') {
                    document.getElementById("recurring-errors").text = data;
                }
            }
        );
    };

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