Connect-E Wallet

<div id="demo-payment-wallet"></div>
<div id="errors"></div>
<div id="demo-result" hidden>
    <h5>Payment Complete</h5>
    <dl>
        <dt>Status Code</dt>
        <dd id="status-code"></dd>
        <dt>Auth Code</dt>
        <dd id="auth-code"></dd>
        <dt>Message</dt>
        <dd id="message"></dd>
    </dl>
</div>

const config = {
    containerId: 'demo-payment-wallet',
    paymentDetails: {
        paymentToken: /*access token here*/
    },
    buttonConfig: {
        color: 'black',
        type: 'plain'
    },
    emailRequired: true,
    billingAddressRequired: false,
    shippingAddressRequired: false
}

const wallet = new Connect.Wallet(config, displayErrors, paymentComplete);

function paymentComplete(response) {
    document.getElementById('demo-payment-wallet').hidden = true;
    document.getElementById('demo-result').hidden = false;
    document.getElementById('status-code').innerText = response.statusCode;
    document.getElementById('auth-code').innerText = response.authCode;
    document.getElementById('message').innerText = response.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-wallet iframe { width: 100%; }

#errors li { color: #B00; }