How to tokenize CC without submit iFrame

[alecsfp]

I am trying to tokenize credit card data without using an iframe submit button. In the Heartland example I see cardExternalTrigger as the solution to this; however no requests are made and the token-success event does not fire.

document.getElementById('place-order-btn').addEventListener('click', function(event) {
    event.preventDefault();

    for (var type in cardForm.fields) {
        if (type === "submit") {
            continue;
        }

        var field = cardForm.frames[type];

        if (!field) {
            continue;
        }

        GlobalPayments.internal.postMessage.post(
            {
                data: {
                    fields: cardForm.fields,
                    target: field.id
                },
                id: field.id,
                type: "ui:iframe-field:request-data",
            },
            field.id
        );
    }

    cardForm.on("token-success", (resp) => {
        // Save payment token
        this.paymentToken = resp.paymentReference;
        console.log('token recieved')

        // Submit data to the integration's backend for processing
        // that.submitForm();
    });

    cardForm.on("token-error", (resp) => {

    });
});