AJAX加载WooCommerce结账页时Stripe支付失效问题求助

问题根源 #

WooCommerce Stripe官方插件依赖原生结账页的特定初始化逻辑、隐藏验证字段以及会话绑定，AJAX动态加载的表单缺失这些核心要素，导致支付流程触发默认重定向并抛出错误。

具体解决方案 #

1. AJAX回调中输出Stripe必要字段

在PHP AJAX回调函数里，除了渲染结账表单，必须包含Stripe插件所需的隐藏字段和验证nonce：

add_action('wp_ajax_load_checkout_form', 'load_custom_checkout_form');
add_action('wp_ajax_nopriv_load_checkout_form', 'load_custom_checkout_form');

function load_custom_checkout_form() {
    // 验证请求合法性
    if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'custom_checkout_nonce')) {
        wp_send_json_error('Invalid nonce');
    }

    // 同步WooCommerce会话数据
    WC()->session->set('cart', WC()->cart->get_cart());
    WC()->session->set('customer', WC()->customer->get_data());

    // 输出结账表单及Stripe所需钩子
    ob_start();
    ?>
    <form id="custom-checkout-form" method="post">
        <?php
        // 输出WooCommerce默认结账区块
        do_action('woocommerce_checkout_before_customer_details');
        do_action('woocommerce_checkout_billing');
        do_action('woocommerce_checkout_shipping');
        do_action('woocommerce_checkout_after_customer_details');
        do_action('woocommerce_checkout_before_order_review');
        do_action('woocommerce_checkout_order_review');
        // 关键：触发Stripe字段渲染钩子
        do_action('woocommerce_checkout_after_order_review');
        ?>
        <button type="submit" id="custom-checkout-submit" class="button alt"><?php esc_html_e('Place order', 'woocommerce'); ?></button>
        <?php wp_nonce_field('woocommerce-process-checkout', 'woocommerce-process-checkout-nonce'); ?>
    </form>
    <?php
    $form_html = ob_get_clean();

    wp_send_json_success($form_html);
}

2. AJAX加载后重新初始化Stripe JS

Stripe的支付逻辑默认在页面首次加载时绑定，动态加载表单后需手动触发初始化：

// AJAX加载结账表单
jQuery(document).on('click', '#load-checkout-btn', function() {
    jQuery.ajax({
        url: ajaxurl,
        method: 'POST',
        data: {
            action: 'load_checkout_form',
            nonce: '<?php echo wp_create_nonce("custom_checkout_nonce"); ?>'
        },
        success: function(response) {
            if (response.success) {
                jQuery('#custom-checkout-container').html(response.data);
                // 重新初始化Stripe Elements
                if (typeof Stripe !== 'undefined' && typeof wc_stripe_params !== 'undefined') {
                    const stripe = Stripe(wc_stripe_params.key);
                    const elements = stripe.elements();
                    // 重新挂载卡片元素
                    const cardElement = elements.create('card');
                    cardElement.mount('#stripe-card-element');
                    // 绑定自定义提交逻辑
                    bindStripeCustomSubmit(stripe, cardElement);
                }
            }
        }
    });
});

// 拦截表单提交，改用AJAX处理Stripe支付
function bindStripeCustomSubmit(stripe, cardElement) {
    jQuery('#custom-checkout-form').on('submit', function(e) {
        e.preventDefault();
        const form = this;
        jQuery('#custom-checkout-submit').prop('disabled', true);

        // 创建Stripe支付方式
        stripe.createPaymentMethod({
            type: 'card',
            card: cardElement,
            billing_details: {
                name: jQuery('#billing_first_name').val() + ' ' + jQuery('#billing_last_name').val(),
                email: jQuery('#billing_email').val(),
                phone: jQuery('#billing_phone').val(),
                address: {
                    line1: jQuery('#billing_address_1').val(),
                    city: jQuery('#billing_city').val(),
                    postal_code: jQuery('#billing_postcode').val(),
                    country: jQuery('#billing_country').val()
                }
            }
        }).then(function(result) {
            if (result.error) {
                jQuery(form).prepend('<div class="woocommerce-error">' + result.error.message + '</div>');
                jQuery('#custom-checkout-submit').prop('disabled', false);
            } else {
                // 添加支付方式ID到表单
                jQuery('<input>').attr({
                    type: 'hidden',
                    name: 'stripe_payment_method_id',
                    value: result.paymentMethod.id
                }).appendTo(form);
                
                // AJAX提交订单
                jQuery.ajax({
                    url: wc_checkout_params.checkout_url,
                    method: 'POST',
                    data: jQuery(form).serialize(),
                    success: function(response) {
                        if (response.result === 'success') {
                            window.location.href = response.redirect;
                        } else {
                            jQuery(form).prepend('<div class="woocommerce-error">' + response.messages + '</div>');
                            jQuery('#custom-checkout-submit').prop('disabled', false);
                        }
                    },
                    error: function() {
                        jQuery(form).prepend('<div class="woocommerce-error">Payment processing failed. Please retry.</div>');
                        jQuery('#custom-checkout-submit').prop('disabled', false);
                    }
                });
            }
        });
    });
}

3. 确保Stripe验证逻辑兼容AJAX

添加钩子确保AJAX提交时Stripe的nonce验证通过：

add_filter('woocommerce_process_checkout_nonce_check', 'custom_stripe_ajax_nonce_check', 10, 2);
function custom_stripe_ajax_nonce_check($valid, $action) {
    if ($action === 'woocommerce-process-checkout' && isset($_POST['woocommerce-process-checkout-nonce'])) {
        return wp_verify_nonce($_POST['woocommerce-process-checkout-nonce'], 'woocommerce-process-checkout');
    }
    return $valid;
}

关键注意事项 #

• 确保AJAX请求同步WooCommerce会话数据，避免订单创建时丢失购物车信息
• 开启WooCommerce调试模式（WP_DEBUG=true），查看wp-content/uploads/wc-logs/下的Stripe日志定位具体错误
• 保持Stripe插件为最新版本，旧版本可能不支持动态表单的初始化逻辑

内容的提问来源于stack exchange，提问作者tomvai