Stripe Payment Element与一页结账：正确的支付流程与事件处理

// 全局变量
let stripe;
let elements;
let order = {}; // 假设订单信息已在此处填充

// 1. 获取Stripe Publishable Key并初始化
fetch('/config.php', {
    method: 'get',
    headers: {
        'Content-Type': 'application/json'
    }
})
.then((response) => response.json())
.then((response) => setupElements(response.publishableKey))
.catch(error => console.error('Error fetching config:', error));

// 2. 初始化Stripe Elements并创建Payment Element
var setupElements = function (publishableKey) {
    stripe = Stripe(publishableKey);

    // 3. 创建Payment Intent以设置Payment Element
    fetch('/setup-elements.php', {
        method: 'POST',
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify(order) // 发送订单信息以创建Payment Intent
    })
    .then(response => response.json())
    .then(data => {
        const appearance = {
            theme: 'none', // 或 'stripe', 'flat'
            labels: 'floating', // 或 'above'
            // 其他外观定制选项...
        };
        elements = stripe.elements({
            clientSecret: data.clientSecret, // 从服务器获取的Payment Intent clientSecret
            fonts: [{ cssSrc: 'https://use.typekit.net/hly2qug.css' }],
            appearance
        });
        const paymentElement = elements.create("payment", {
            // 可选：预设账单详情，例如不收集特定字段
            fields: {
                billingDetails: {
                    email: 'never',
                    address: {
                        line1: 'never',
                        city: 'never',
                        state: 'never',
                        country: 'never',
                        postalCode: 'never'
                    }
                }
            }
        });
        paymentElement.mount("#payment-element"); // 挂载到DOM元素
    })
    .catch(error => console.error('Error setting up elements:', error));
};

// 假设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: {
            // return_url是支付完成后Stripe将用户重定向到的URL
            return_url: window.location.origin + '/order-confirmation.php', // 必须是完整的、可访问的URL
            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' 总是重定向，即使不需要额外操作
        // redirect: 'never' 不重定向，但需要手动处理所有支付状态和用户交互
    })
    .then(function (result) {
        // 当 redirect 参数不是 'never' 时，如果支付成功或需要额外用户验证，
        // Stripe 会自动重定向到 return_url。
        // 因此，此处的 .then() 回调通常只在支付失败（如卡片错误、验证错误）时执行，
        // 或者当 redirect 设置为 'never' 时用于手动处理所有状态。
        if (result.error) {
            // 处理支付错误，例如显示错误消息给用户
            showMessage(result.error.message);
        }
        // 注意：如果支付成功且发生重定向，此处的代码将不会被执行。
        loading(false); // 隐藏加载状态
    })
    .catch(error => {
        console.error('Error confirming payment:', error);
        showMessage('An unexpected error occurred.');
        loading(false);
    });
};

<?php
require 'vendor/autoload.php'; // 假设你使用Composer

\Stripe\Stripe::setApiKey('YOUR_SECRET_KEY'); // 你的Stripe Secret Key

$payload = @file_get_contents('php://input');
$event = null;

try {
    $event = \Stripe\Webhook::constructEvent(
        $payload, $_SERVER['HTTP_STRIPE_SIGNATURE'], 'YOUR_WEBHOOK_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; // contains a \Stripe\PaymentIntent
        // TODO: 在这里执行订单履行逻辑
        // 例如：更新订单状态为“已支付”，减少库存，发送订单确认邮件
        error_log("PaymentIntent {$paymentIntent->id} succeeded for order: " . $paymentIntent->metadata->order_id);
        break;
    case 'payment_intent.payment_failed':
        $paymentIntent = $event->data->object; // contains a \Stripe\PaymentIntent
        // TODO: 处理支付失败逻辑
        // 例如：更新订单状态为“支付失败”，通知用户重试
        error_log("PaymentIntent {$paymentIntent->id} failed for order: " . $paymentIntent->metadata->order_id);
        break;
    case 'payment_intent.processing':
        $paymentIntent = $event->data->object; // contains a \Stripe\PaymentIntent
        // TODO: 处理支付处理中逻辑
        // 例如：更新订单状态为“处理中”，告知用户等待
        error_log("PaymentIntent {$paymentIntent->id} is processing for order: " . $paymentIntent->metadata->order_id);
        break;
    // 其他事件类型...
    default:
        // 未知事件类型
        error_log('Received unknown event type ' . $event->type);
}

http_response_code(200);
?>

// order-confirmation.php 页面上的JavaScript
document.addEventListener('DOMContentLoaded', function() {
    const clientSecret = new URLSearchParams(window.location.search).get("payment_intent_client_secret");

    // 如果没有clientSecret，则可能不是从Stripe重定向过来，或者支付流程未完成
    if (!clientSecret) {
        showMessage("无法获取支付状态，请检查您的订单。");
        return;
    }

    // 假设stripe实例已在此页面初始化
    // 如果没有，需要重新初始化 Stripe(publishableKey)
    if (!stripe) {
        // 重新获取publishableKey并初始化Stripe
        fetch('/config.php')
            .then(response => response.json())
            .then(config => {
                stripe = Stripe(config.publishableKey);
                retrievePaymentIntentStatus(clientSecret);
            })
            .catch(error => console.error('Error initializing Stripe on success page:', error));
    } else {
        retrievePaymentIntentStatus(clientSecret);
    }
});

function retrievePaymentIntentStatus(clientSecret) {
    stripe.retrievePaymentIntent(clientSecret).then(function (response) {
        switch (response.paymentIntent.status) {
            case "succeeded":
                showMessage("支付成功！您的订单已确认。");
                // 在这里可以显示订单详情，但核心订单履行应由Webhook处理
                break;
            case "processing":
                showMessage("您的支付正在处理中。请稍后查看订单状态。");
                break;
            case "requires_payment_method":
                showMessage("支付失败。请尝试其他支付方式。");
                break;
            default:
                showMessage("支付过程中出现未知错误。");
                break;
        }
    }).catch(error => {
        console.error('Error retrieving payment intent:', error);
        showMessage('无法获取支付状态，请联系客服。');
    });
}

function showMessage(message) {
    const messageContainer = document.getElementById('payment-status-message');
    if (messageContainer) {
        messageContainer.textContent = message;
    } else {
        alert(message);
    }
}