Stripe Payment Element与一页式结账流程：正确实现指南

// client-side.js
fetch('/config.php', {
    method: 'get',
    headers: {
        'Content-Type': 'application/json'
    }
})
.then(response => response.json())
.then(config => setupElements(config.publishableKey))
.catch(error => console.error('Error fetching config:', error));

// client-side.js
var stripe; // 全局Stripe实例
var elements; // 全局Elements实例
var orderData = { /* 您的订单详情，如金额、货币等 */ };

var setupElements = function (publishableKey) {
    stripe = Stripe(publishableKey);

    // 向服务器请求创建Payment Intent
    fetch('/setup-elements.php', {
        method: 'POST',
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify(orderData) // 发送订单数据以创建Payment Intent
    })
    .then(response => response.json())
    .then(data => {
        if (data.clientSecret) {
            const appearance = {
                theme: 'stripe', // 或 'none', 'flat'
                labels: 'floating', // 或 'above'
                variables: {
                    // 自定义颜色、字体等
                    colorPrimary: '#635BFF',
                },
            };
            elements = stripe.elements({
                clientSecret: data.clientSecret,
                appearance
            });
            const paymentElement = elements.create("payment", {
                // 可选配置，如预填充账单详情
                fields: {
                    billingDetails: {
                        email: 'auto', // 或 'never', 'always'
                        address: 'auto'
                    }
                }
            });
            paymentElement.mount("#payment-element"); // 将Payment Element挂载到DOM元素
        } else {
            console.error('Failed to get clientSecret:', data.error);
        }
    })
    .catch(error => console.error('Error setting up elements:', error));
};

// setup-elements.php (PHP示例)
require_once('vendor/autoload.php'); // 引入Stripe库
\Stripe\Stripe::setApiKey('sk_test_YOUR_SECRET_KEY'); // 设置您的Stripe Secret Key

header('Content-Type: application/json');

$input = json_decode(file_get_contents('php://input'), true);
$amount = $input['amount'] ?? 1000; // 假设金额以分计算，例如1000分 = 10美元
$currency = $input['currency'] ?? 'usd';

try {
    $paymentIntent = \Stripe\PaymentIntent::create([
        'amount' => $amount,
        'currency' => $currency,
        'automatic_payment_methods' => ['enabled' => true], // 启用自动支付方式
    ]);
    echo json_encode(['clientSecret' => $paymentIntent->client_secret]);
} catch (Error $e) {
    http_response_code(500);
    echo json_encode(['error' => $e->getMessage()]);
}

// client-side.js
var form = document.getElementById('payment-form'); // 假设您的表单ID是'payment-form'

form.addEventListener('submit', function (e) {
    e.preventDefault();
    // 可以在这里添加表单验证逻辑
    // var isFormValid = validate.validateAll(form);
    // if (isFormValid.length < 1) {
        loading(true); // 显示加载状态
        collectFormInfo(); // 收集额外的表单信息，如配送地址等
        confirmPayment();
    // }
});

var confirmPayment = function () {
    stripe.confirmPayment({
        elements, // 之前初始化的elements实例
        confirmParams: {
            // **关键参数**：用户完成支付（包括任何额外的身份验证，如3D Secure）后，Stripe将重定向到此URL。
            // 这必须是一个有效的URL，通常是您网站上的一个支付成功或订单确认页面。
            return_url: window.location.origin + '/order-success.php', // 示例：重定向到订单成功页面
            // 可选：提供支付方法的额外账单详情，如果Payment Element没有收集或需要覆盖
            payment_method_data: {
                billing_details: {
                    email: order.customer.email,
                    address: {
                        line1: order.delivery.address,
                        city: order.delivery.city,
                        state: order.delivery.state,
                        country: order.delivery.country,
                        postal_code: order.delivery.postcode
                    }
                }
            }
        },
        // redirect: 'if_required' 是默认值，表示如果需要额外的用户操作（如3D Secure），则重定向
        // redirect: 'always' 将总是重定向，无论是否需要额外操作
    })
    .then(function (result) {
        // **重要提示**：此`.then()`回调仅在支付流程不需要重定向（例如，无需3D Secure）时才会被执行。
        // 如果Stripe重定向了用户（例如进行3D Secure验证），此回调将不会被触发。
        // 因此，不应在此处执行任何关键的服务器端业务逻辑（如更新订单状态、发送确认邮件）。
        if (result.error) {
            // 处理客户端错误，例如卡片信息无效
            showMessage(result.error.message);
            loading(false);
        } else {
            // 在极少数情况下，支付成功但未重定向（例如，某些直接支付方式），
            // 此时可以根据Payment Intent的状态进行客户端处理，
            // 但仍然强烈建议使用Webhooks进行服务器端确认。
            console.log('Payment confirmed client-side:', result.paymentIntent);
            // 此时用户通常已经被重定向到 return_url，所以这里的代码可能不会执行。
            // 如果执行，可以显示一个临时消息，但最终状态应由服务器通过Webhook确认。
            showMessage("Payment processing. Please check your order status.");
            loading(false);
        }
    })
    .catch(error => {
        console.error('Error confirming payment:', error);
        showMessage("An unexpected error occurred. Please try again.");
        loading(false);
    });
};

// 辅助函数：显示消息
function showMessage(messageText) {
    const messageContainer = document.querySelector("#payment-message");
    if (messageContainer) {
        messageContainer.textContent = messageText;
    }
}

// 辅助函数：加载状态
function loading(isLoading) {
    if (isLoading) {
        // 显示加载动画
        form.querySelector("button").disabled = true;
        document.querySelector("#spinner").classList.remove("hidden");
        document.querySelector("#button-text").classList.add("hidden");
    } else {
        // 隐藏加载动画
        form.querySelector("button").disabled = false;
        document.querySelector("#spinner").classList.add("hidden");
        document.querySelector("#button-text").classList.remove("hidden");
    }
}

// webhook.php (PHP示例)
require_once('vendor/autoload.php'); // 引入Stripe库
\Stripe\Stripe::setApiKey('sk_test_YOUR_SECRET_KEY'); // 设置您的Stripe Secret Key

$endpoint_secret = 'whsec_YOUR_WEBHOOK_SECRET'; // 您的Webhook签名密钥

$payload = @file_get_contents('php://input');
$sig_header = $_SERVER['HTTP_STRIPE_SIGNATURE'];
$event = null;

try {
    $event = \Stripe\Webhook::constructEvent(
        $payload, $sig_header, $endpoint_secret
    );
} catch(\UnexpectedValueException $e) {
    // 无效的payload
    http_response_code(400);
    exit();
} catch(\Stripe\Exception\SignatureVerificationException $e) {
    // 无效的签名
    http_response_code(400);
    exit();
}

// 处理事件
switch ($event->type) {
    case 'payment_intent.succeeded':
        $paymentIntent = $event->data->object; // 包含Payment Intent对象
        // 在这里执行您的业务逻辑：
        // 1. 查找您的数据库中对应的订单
        // 2. 将订单状态更新为“已支付”
        // 3. 发送订单确认邮件
        // 4. 记录支付成功日志
        error_log("PaymentIntent {$paymentIntent->id} succeeded. Order fulfilled.");
        // 示例：更新订单状态 (伪代码)
        // updateOrderStatus($paymentIntent->metadata->order_id, 'paid');
        break;
    case 'payment_intent.payment_failed':
        $paymentIntent = $event->data->object;
        // 处理支付失败逻辑：
        // 1. 更新订单状态为“支付失败”
        // 2. 通知客户支付失败
        error_log("PaymentIntent {$paymentIntent->id} failed. Reason: {$paymentIntent->last_payment_error->message}");
        break;
    // 其他事件类型...
    default:
        // 未知事件类型
        error_log("Received unknown event type {$event->type}");
}

http_response_code(200); // 必须返回200 OK给Stripe