如何通过WP Stripe Checkout插件传递支付元数据？

你当前的代码存在服务器端与客户端执行时机不匹配的核心问题：

• PHP代码（包括短码）是在页面加载时由服务器执行的，此时用户还未填写表单，JS里的bookingData根本不存在，所以短码中的$bookingData是空值，导致Stripe元数据为空。
• JS代码是在客户端浏览器中执行，只有用户点击「下一步」后才会生成bookingData，这时候服务器已经生成完Stripe按钮的HTML，无法再修改短码里的metadata参数。

我们可以通过WordPress的AJAX机制先把客户端生成的bookingData传到服务器存储，再用插件提供的过滤器把数据添加到Stripe会话的metadata中。

步骤1：修改前端JS，添加AJAX数据提交 #

在用户点击「下一步」生成bookingData后，先把数据发送到服务器保存，再切换步骤显示支付按钮：

document.addEventListener('DOMContentLoaded', function() {
    $("#np-button").hide();
    const nextBtn = document.getElementById('next-btn');
    const prevBtn = document.getElementById('prev-btn');
    const step1 = document.getElementById('step-1');
    const step2 = document.getElementById('step-2');
    const multiStepForm = document.getElementById('multi-step-form');
    const wpNonce = document.getElementById('wp_nonce').value;

    nextBtn.addEventListener('click', () => {
        if (multiStepForm.checkValidity()) {
            const bookingData = {                    
                user_id:    document.getElementById('user_id').value,
                guest_name: document.getElementById('full-name').value,
                email:      document.getElementById('email').value,
                phone:      document.getElementById('phone').value,
                address:    "<?php echo $address; ?>",
                zip_code:   document.getElementById('zip-code').value,
                city:       document.getElementById('city').value,
                country:    document.getElementById('country').value,
                subscribe:  document.getElementById('subscribe').checked ? 1 : 0,                   
                check_in:   "<?php echo $check_in->format('Y-m-d'); ?>",
                check_out:  "<?php echo $check_out->format('Y-m-d'); ?>",                   
                property_id: "<?php echo $lbb_p_id; ?>",                
            };
            console.log(bookingData);
            document.getElementById('booking_data').value = JSON.stringify(booking</think_never_used_51bce0c785ca2f68081bfa7d91973934>