const launch = (apiKey, jsSecurityToken) => {
    (function () {
        $('#payeezy-payment-widget').modal('show');

        var dfd = $.Deferred();

        var fdc = new PaymentJS(apiKey, jsSecurityToken, "NOIW", "FDToken");

        fdc.mount('charge_button', 'response');

        if (!window.initialize) {
            window.addEventListener("message", receiveMessage(dfd.resolve), false);
            window.initialized = true;
        }

        return dfd;
    })()
}

function receiveMessage(whenDone) {
    return function (event) {
        if (event.data !== '') {
            res = JSON.parse(event.data).results;
        }
        console.log('here', res);

        $.post('/api/finance/SaveProcessorUserPayment', res.token)
            .then(whenDone)
            .then(closeForm)
    }
}

<div class="modal fade" id="card-connect-payment-widget" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close close-handle" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Credit Card Details</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="ccnumber">Card number:</label>
                    <iframe src="https://$env.paymentjs.firstdata.com/v1/payment.js" style="width: 100%" id="tokenframe" name="tokenframe" frameborder="0" scrolling="no" width="170"
                        height="34"></iframe>
                    <span id="cardNumberValidationError" class="help-block"></span>
                </div>
                <div class="form-group">
                    <label for="exp">Expiration Date: </label>
                    <input name="exp" class="form-control" placeholder="0122" id="expDateInput" type="text" pattern="[0-9]{4}"
                        maxlength="4" required />
                </div>
                <div class="form-group">
                    <label for="cvvInput">CVV: </label>
                    <input id="cvvInput" placeholder="123" class="form-control" type="text" pattern="[0-9]{3,4}"
                        maxlength="4" required />
                </div>

                <div class="form-group">
                    <label for="billingZipInput">Billing Zipcode: </label>
                    <input id="billingZipInput" placeholder="12345" class="form-control" type="text" pattern="[0-9]{5}"
                        maxlength="5" required />
                </div>
                <input type="hidden" name="token" id="token">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default close-handle">Cancel</button>
                <button type="button" class="save-card btn btn-primary">Save</button>
            </div>
        </div>
    </div>
</div>