Manual Integration

If the Virtual Card SDK is not a viable option, the manual integration will guide you through the steps to complete a virtual card session in your checkout.

Overview

1. Create Card Session a virtual card session.
2. Add a window event listener with type message to the checkout page.
3. Open the card session dashboard_url using the mode provided in the create card session request.
4. Sezzle will post a message to the listener when the user has completed the card session.
5. Verify message event.data exists.
6. Verify event.data.szl_source is equal to v_card.
7. Verify event.data.card and event.data.holder both exist.
   • If exists, use card and holder data to submit the order by credit card
   • If not, the user did not provide virtual card data
8. (Optional) Upon order creation, use the card session uuid and the order ID to update the card session

Example Javascript

window.addEventListener('message', function() {
    var data = event.data || Object.create(null);

    if (data.szl_source !== 'v_card') {
        console.log('invalid source');
        return;
    }

    var card = data.card;
    var holder = data.holder
    if (!card && !holder) {
        console.log('failed virtual card session');
        return;
    }

    console.log('card data:',
        card.firstName,
        card.lastName, 
        card.pan,
        card.cvv,
        card.expiryMonth,
        card.expiryYear);

    console.log('holder data:',
        holder.email,
        holder.phone,
        holder.firstName,
        holder.lastName,
        holder.address1,
        holder.address2,
        holder.city,
        holder.state,
        holder.country,
        holder.postalCode);
});