无后端场景下，2023年5月替代PayPal已弃用JS支付按钮的方案？

由于actions.order.create和actions.order.capture已被弃用，无法用于新集成，无后端场景下可直接调用PayPal REST API完成订单创建与捕获，替代方案的完整实现代码如下：

HTML文档声明（DocType） #

<!DOCTYPE html>

<header> 部分代码 #

<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<body> 部分代码 #

<script src="https://www.paypal.com/sdk/js?client-id=sb&currency=GBP"></script>
<div id="paypal-button-10"></div>
<script>
    paypal.Buttons({
        style: {
            layout: 'vertical', /* 可选值 'horizontal' */
            color:  'gold',
            shape:  'pill',
            label:  'buynow'
        },
        createOrder: async function(data, actions) {
            // 获取PayPal SDK提供的访问令牌
            const accessToken = await paypal.getAccessToken();
            // 调用PayPal API创建订单
            const response = await fetch('https://api-m.sandbox.paypal.com/v2/checkout/orders', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${accessToken}`
                },
                body: JSON.stringify({
                    intent: 'CAPTURE',
                    purchase_units: [
                        {
                            amount: {
                                currency_code: "GBP",
                                value: "10.00"
                            }
                        }
                    ]
                })
            });
            const order = await response.json();
            // 返回订单ID供PayPal按钮使用
            return order.id;
        },
        onApprove: async function(data, actions) {
            // 获取访问令牌
            const accessToken = await paypal.getAccessToken();
            // 调用PayPal API捕获订单（完成支付）
            const response = await fetch(`https://api-m.sandbox.paypal.com/v2/checkout/orders/${data.orderID}/capture`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${accessToken}`
                }
            });
            const details = await response.json();
            alert('恭喜！支付成功');
            console.log(details);
            console.log(details.id);  // 订单ID
            console.log(details.status);  // 支付状态，成功时为'COMPLETED'
            // 注意：无后端场景下直接前端更新数据库存在安全风险，建议使用云函数等服务处理数据更新
        },
        onCancel: function (data) {
            alert('支付已取消');
        },
        onError: function (err) {
            alert(err);
        }
    }).render('#paypal-button-10');
</script>

关键说明 #

• 上述代码使用PayPal REST API的v2/checkout/orders接口完成订单创建与捕获，替代了弃用的actions方法
• 沙箱环境API域名是api-m.sandbox.paypal.com，生产环境需更换为api-m.paypal.com
• client-id=sb是沙箱测试ID，正式集成时需替换为你的PayPal正式客户端ID
• 无后端场景下直接处理支付结果存在安全风险，建议配合云函数（如Firebase Functions、AWS Lambda等）完成后续的数据库更新及业务逻辑处理

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