在 Stripe 弹出/支付模式出现之前验证表单

Question

我正在尝试在条带支付模式出现之前验证我的表单，但在验证表单之前出现了模式。我正在使用 jquery 验证插件进行验证。我尝试在 submitHandler 函数中添加 Stripe 集成代码，但仍然没有运气。以下是我目前的代码：

<!-- google & apple pay btn -->
<div id="payment-request-button"
     class="btn__link btn__link--fullwidth-mob btn__link--paypal-flex btn__link--marginLeft-0">
    <%--A Stripe Element will be inserted here--%>
</div>

<!--  google & apple validation btn -->
<input id="paymentRequestButtonValidation" 
       class="btn__link btn__link--fullwidth-mob btn__link--secondary btn__submit" 
       type="submit" value="G Pay Validation">

var btnSubmitId = '';

//-- get the id of the btn submit
$('.btn__submit').click(function (event) {
    btnSubmitId = event.target.id;
});

/* Stripe Integration */
let searchParams = new URLSearchParams(window.location.search);
var urlAmount = searchParams.get('Amount');
var urlAmountNum = parseFloat(urlAmount);
var donationAmount = urlAmountNum * 100;
var clientSecret = "<%= clientSecret %>";
var stripe = Stripe(stripeCredentials);
var paymentRequest = stripe.paymentRequest({
    country: 'GB',
    currency: 'gbp',
    total: {
        label: 'Test payment',
        amount: donationAmount
    },
    requestPayerName: true,
    requestPayerEmail: true,
});
var elements = stripe.elements();
var prButton = elements.create('paymentRequestButton', {
    paymentRequest: paymentRequest,
});

// Check the availability of the Payment Request API first.
paymentRequest.canMakePayment().then(function (result) {
    if (result) {
        // if available mount/create the button
        prButton.mount('#payment-request-button');
    } else {
        // if NOT available hide the button and console log it
        document.getElementById('payment-request-button').style.display = 'none';
        console.log('ERROR - btn not available & can\'t be mounted');
    }
});

paymentRequest.on('paymentmethod', function (ev) {
    // Confirm the PaymentIntent without handling potential next actions (yet).
    stripe.confirmCardPayment(
        clientSecret, { payment_method: ev.paymentMethod.id}, 
                      { handleActions: false }

    ).then(function (confirmResult) {
        if (confirmResult.error) {
            // Report to the browser that the payment failed, prompting it to
            // re-show the payment interface, or show an error message and close
            // the payment interface.
            ev.complete('fail');
        } else {
            // Report to the browser that the confirmation was successful, prompting
            // it to close the browser payment method collection interface.
            ev.complete('success');
            // Check if the PaymentIntent requires any actions and if so let Stripe.js
            // handle the flow. If using an API version older than "2019-02-11"
            // instead check for: `paymentIntent.status === "requires_source_action"`.
            if (confirmResult.paymentIntent.status === "requires_action") {
                // Let Stripe.js handle the rest of the payment flow.
                stripe.confirmCardPayment(clientSecret).then(function (result) {
                    if (result.error) {
                        // The payment failed -- ask your customer for a new payment method.
                    } else {
                        // The payment has succeeded.
                    }
                });
            } else {
                // The payment has succeeded.
            }
        }
    });

    prButton.on('click', function (ev) {
        // get the current amount from the #donationValue inout field
        paymentRequest.update({
            total: {
                label: 'Test payment',
                amount: $("#donationValue").val() * 100,
            },
        });
    })
});

// -- single form validation
$('#singleForm').validate({
    rules: {
        donationValue: {
            required: true,
            number: true,
            twoDecimal: true
        },
        donationtype: {
            required: true
        },
        firstname: {
            required: true
        },
        lastname: {
            required: true
        },
        email: {
            required: true
        },
        addressSearch: {
            required: true
        },
        address1: {
            required: true
        },
        postcode: {
            required: function (e) {
                return $(e).closest('form').find('#country').val() == 'United Kingdom';
            }
        },
        town: {
            required: true
        },
        country: {
            required: true
        },
        mobile: {
            required: '#receiveSMS:checked'
        }
    },
    messages: {
        donationValue: {
            required: 'Please enter your donation amount.',
            number: 'Please enter a valid donation amount.'
        },
        donationtype: 'Please select one of the options for Gift Aid.',
        firstname: 'Please enter a valid first name.',
        lastname: 'Please enter a valid last name.',
        email: 'Please enter a valid email address.',
        addressSearch: 'Please enter a valid postcode, street name or address.',
        address1: 'Please enter a valid address.',
        postcode: 'Please enter a valid postcode.',
        town: 'Please enter a valid town/city.',
        country: 'Please select a valid country.',
        mobile: 'Please enter your mobile phone number above'
    },
    highlight: function (element) {
        $(element).parent().find('span').addClass('error__text--icon');
        $(element).parent().find('input').addClass('form__input--error');
        $(element).parent().find('select').addClass('form__input--error');

        if (element.id == 'dtOwnDonation') {
            $(element).parent().find('span').removeClass('error__text--icon');
        }
    },
    unhighlight: function (element) {
        $(element).parent().find('span').removeClass('error__text--icon');
        $(element).parent().find('input').removeClass('form__input--error');
        $(element).parent().find('select').removeClass('form__input--error');
    },
    submitHandler: function () {
        if (btnSubmitId == 'singleBtnValidation') {
            $('#singleBtn').click();
            console.log('debit/credit card form - validation successful');

        } else if (btnSubmitId == 'paymentRequestButtonValidation') {
            console.log('paymentRequestButtonValidation - validation successful');
        }
    }
});

提前致谢！

Answer 1

因此，您使用的是 PaymentRequest 按钮，默认情况下，当显示浏览器模式（例如 Apple Pay 或 Google Pay）时（当客户按下 PaymentRequest 按钮时），它不会给您的网页一个事件。

您可以改为手动安装自己的按钮（样式为 Apple Pay 或 Google Pay 按钮，具体取决于浏览器），然后使用 paymentRequest.show() 手动显示 PaymentRequest 按钮表：https://stripe.com/docs/js/payment_request/show

这样，您可以在按下按钮时进行任何表单验证。 Stripe 文档在这里提到了使用您自己的按钮的这种方法：https://stripe.com/docs/stripe-js/elements/payment-request-button?html-or-react=html#html-js-own-button