如何为自定义WordPress主题页面返回JSON？表单对接Stripe咨询

结合你的场景，我默认你需要完成的是「安全传递前端计算的表单数据到后端」和「生成Stripe支付会话并跳转」这两个核心任务，下面一步步来实操：

任务1：安全传递前端计算的表单数据到WordPress后端 #

你的表单靠JS驱动计算，直接裸提交容易被篡改数据，所以得结合WordPress的非ce验证，同时把计算结果存到隐藏字段里再提交。

步骤1：在myform.php里完善表单结构 #

给表单加上非ce验证字段、后端处理标识，还有存储计算结果的隐藏项：

<form id="custom-calculator-form" method="POST" action="<?php echo esc_url(admin_url('admin-post.php')); ?>">
    <!-- 你的可见表单字段，比如用户输入项 -->
    <input type="number" id="user-quantity" name="user_quantity" placeholder="输入购买数量">
    
    <!-- 存储JS计算结果的隐藏字段 -->
    <input type="hidden" id="calculated-total" name="calculated_total" value="">
    
    <!-- WordPress非ce验证：防止跨站请求伪造 -->
    <?php wp_nonce_field('myform_submit_action', 'myform_nonce'); ?>
    <!-- 指定后端处理的动作标识 -->
    <input type="hidden" name="action" value="handle_myform_submission">
    
    <button type="submit">确认计算结果并支付</button>
</form>

步骤2：用JS同步计算结果到隐藏字段 #

每次用户输入触发计算后，把结果同步到隐藏字段，确保提交时数据准确：

// 自定义计算逻辑，你可以根据自己的需求修改
function calculateTotal() {
    const quantity = document.getElementById('user-quantity').value;
    const unitPrice = 60; // 示例单价，替换成你的自定义计算规则
    const total = quantity * unitPrice;
    // 把结果写入隐藏字段
    document.getElementById('calculated-total').value = total;
    return total;
}

// 监听用户输入，实时计算
document.getElementById('user-quantity').addEventListener('input', calculateTotal);

步骤3：在functions.php里注册后端处理函数 #

在主题的functions.php里加一个处理表单提交的函数，做合法性校验：

// 登录用户和未登录用户都能触发这个动作
add_action('admin_post_handle_myform_submission', 'handle_myform_submission');
add_action('admin_post_nopriv_handle_myform_submission', 'handle_myform_submission');

function handle_myform_submission() {
    // 第一步：验证非ce，拒绝非法请求
    if (!isset($_POST['myform_nonce']) || !wp_verify_nonce($_POST['myform_nonce'], 'myform_submit_action')) {
        wp_die('请求非法，请返回页面重试');
    }
    
    // 第二步：二次校验计算结果，防止前端篡改
    $quantity = intval($_POST['user_quantity']);
    $submittedTotal = floatval($_POST['calculated_total']);
    // 这里的计算逻辑要和前端完全一致
    $expectedTotal = $quantity * 60;
    
    if ($submittedTotal !== $expectedTotal) {
        wp_die('数据校验失败，请确认输入后重试');
    }
    
    // 可选：把表单数据存到数据库，比如自定义字段或自定义文章类型
    // update_post_meta($your_page_id, 'user_order_quantity', $quantity);
    
    // 接下来调用Stripe支付会话生成逻辑，也就是任务2的内容
    generate_stripe_payment_session($quantity, $submittedTotal);
}

任务2：生成Stripe支付会话并跳转至支付页面 #

推荐用Stripe官方WordPress插件来简化集成，先确保插件已经安装激活，并且在后台配置好测试/生产API密钥。

步骤1：编写支付会话生成函数 #

在刚才的handle_myform_submission函数末尾，添加生成Stripe支付会话的逻辑：

function generate_stripe_payment_session($quantity, $total) {
    // 检查Stripe函数是否可用
    if (!function_exists('stripe_checkout_session_create')) {
        wp_die('Stripe插件未正确配置，请检查插件设置');
    }
    
    // 构建支付会话参数
    $session_data = array(
        'payment_method_types' => array('card'),
        'line_items' => array(
            array(
                'price_data' => array(
                    'currency' => 'usd', // 替换成你的货币代码，比如cny
                    'product_data' => array(
                        'name' => '自定义服务订单', // 你的产品/服务名称
                    ),
                    'unit_amount' => $total * 100, // Stripe要求金额以分为单位
                ),
                'quantity' => 1, // 因为已经计算了总价，这里设为1即可
            )
        ),
        'mode' => 'payment',
        'success_url' => esc_url(get_permalink(get_page_by_path('payment-success'))), // 支付成功跳转页
        'cancel_url' => esc_url(get_permalink(get_page_by_path('payment-cancel'))), // 支付取消跳转页
        'metadata' => array(
            'user_quantity' => $quantity,
            'order_total' => $total,
        ), // 存储订单元数据，方便后续查询
    );
    
    // 创建支付会话
    $session = stripe_checkout_session_create($session_data);
    
    // 检查会话是否创建成功
    if (is_wp_error($session)) {
        wp_die('支付会话创建失败：' . $session->get_error_message());
    }
    
    // 跳转到Stripe支付页面
    wp_redirect($session->url);
    exit;
}

额外提示：支付后的回调处理 #

你可以在Stripe后台配置Webhook，监听checkout.session.completed事件，当用户支付成功后，自动在WordPress里更新订单状态（比如标记为已支付），或者给用户发送确认邮件。

最后再啰嗦几句：

• 测试阶段一定要用Stripe的测试密钥，别用生产密钥
• 前端计算逻辑和后端校验逻辑必须完全一致，杜绝数据篡改风险
• 可以给表单提交按钮加个loading状态，避免用户重复提交

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