在WordPress中集成Stripe身份验证模态框：代码部署与404问题排查

核心问题拆解与解决思路 #

1. 404错误的根本原因 #

直接请求/create-verification-session返回404，是因为WordPress不识别这个原生路由。必须通过WordPress的REST API或自定义页面模板创建合法请求端点，不能用普通PHP文件的方式。

2. 代码放置方案（两种可选） #

不需要强制做独立插件，两种方案按需选择：

• 快速测试：主题functions.php
  把代码加到当前主题的functions.php中即可，适合快速验证功能，但主题更新时需注意备份代码。
• 生产环境推荐：独立插件
  不受主题更新影响，安全性更高，只需创建一个极简插件即可。

具体实现步骤 #

第一步：复用Stripe官方插件依赖 #

已安装Stripe官方插件，无需手动引入vendor/autoload.php，直接用插件自带的Stripe初始化逻辑即可。

第二步：创建REST API端点（解决404） #

以下代码完全适配WordPress环境，替换你原有的代码：

// 注册REST API端点，处理Verification Session创建请求
add_action('rest_api_init', function () {
    register_rest_route(
        'stripe/v1', 
        '/create-verification-session', 
        [
            'methods' => 'POST',
            'callback' => 'create_stripe_verification_session',
            'permission_callback' => function () {
                // 验证用户是否登录，可根据需求调整权限规则
                return is_user_logged_in();
            }
        ]
    );
});

function create_stripe_verification_session(WP_REST_Request $request) {
    // 检查Stripe库是否加载
    if (!class_exists('Stripe\StripeClient')) {
        return new WP_Error('stripe_not_found', 'Stripe库未加载', ['status' => 500]);
    }

    // 从Stripe插件设置中读取密钥，避免硬编码
    $stripe_secret_key = get_option('stripe_secret_key');
    $stripe = new \Stripe\StripeClient($stripe_secret_key);

    // 获取当前登录用户ID
    $user_id = get_current_user_id();

    try {
        // 创建Verification Session
        $verification_session = $stripe->identity->verificationSessions->create([
            'type' => 'document',
            'metadata' => [
                'user_id' => $user_id,
            ],
        ]);

        // 返回客户端密钥给前端
        return rest_ensure_response([
            'client_secret' => $verification_session->client_secret
        ]);
    } catch (\Stripe\Exception\ApiErrorException $e) {
        return new WP_Error('stripe_error', $e->getMessage(), ['status' => 400]);
    }
}

第三步：前端请求适配（修正fetch地址） #

把原有的fetch('/create-verification-session')替换为WordPress合法的REST API地址：

// 利用WordPress内置变量获取API地址，自动适配站点URL
const apiUrl = `${wpApiSettings.root}stripe/v1/create-verification-session`;

fetch(apiUrl, {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'X-WP-Nonce': wpApiSettings.nonce // 验证请求合法性，防止CSRF攻击
    }
})
.then(response => response.json())
.then(data => {
    // 初始化Stripe模态框
    const stripe = Stripe('你的Stripe公钥'); // 替换为你的公钥
    stripe.verifyIdentity({
        clientSecret: data.client_secret
    }).then(result => {
        // 处理验证结果
        if (result.error) {
            console.error(result.error.message);
        } else {
            // 验证成功后的逻辑，比如更新用户状态、跳转页面等
        }
    });
})
.catch(error => console.error('请求失败:', error));

第四步：模态框无响应排查 #

• 确认前端已正确引入Stripe.js：<script src="https://js.stripe.com/v3/"></script>
• 打开浏览器控制台，检查是否有Stripe初始化失败、密钥错误等报错信息
• 验证REST API请求返回的是合法的client_secret，而非错误提示

独立插件化实现（可选） #

如果需要做成独立插件，创建一个名为stripe-identity-verification.php的文件，内容如下：

<?php
/**
 * Plugin Name: Stripe身份验证工具
 * Description: 在WordPress中通过模态框实现Stripe文档验证
 * Version: 1.0
 * Author: 自定义作者名
 */

// 注册REST API端点
add_action('rest_api_init', function () {
    register_rest_route(
        'stripe/v1', 
        '/create-verification-session', 
        [
            'methods' => 'POST',
            'callback' => 'create_stripe_verification_session',
            'permission_callback' => function () {
                return is_user_logged_in();
            }
        ]
    );
});

function create_stripe_verification_session(WP_REST_Request $request) {
    if (!class_exists('Stripe\StripeClient')) {
        return new WP_Error('stripe_not_found', 'Stripe库未加载', ['status' => 500]);
    }

    $stripe_secret_key = get_option('stripe_secret_key');
    $stripe = new \Stripe\StripeClient($stripe_secret_key);

    $user_id = get_current_user_id();

    try {
        $verification_session = $stripe->identity->verificationSessions->create([
            'type' => 'document',
            'metadata' => [
                'user_id' => $user_id,
            ],
        ]);

        return rest_ensure_response([
            'client_secret' => $verification_session->client_secret
        ]);
    } catch (\Stripe\Exception\ApiErrorException $e) {
        return new WP_Error('stripe_error', $e->getMessage(), ['status' => 400]);
    }
}

将该文件放到wp-content/plugins/目录，在WordPress后台启用插件即可。

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