React+Drupal订阅系统：如何用PayPal JavaScript SDK实现计费协议？

1. 能否通过PayPal JavaScript SDK实现计费协议？ #

可以，但需明确：PayPal JavaScript SDK仅负责前端引导用户完成授权同意流程，完整的计费协议创建、后续参考交易扣款等核心操作必须在你的Drupal后端完成——这些操作需要使用PayPal API密钥，绝对不能暴露在前端代码中。

简单来说，前端SDK的作用是让用户在PayPal页面确认同意未来被扣款的授权，之后前端会获取到授权凭证，再传给后端由后端调用PayPal的REST API完成计费协议的正式创建，以及后续根据你的业务规则发起任意金额、任意时间的扣款请求。

2. JavaScript实现授权流程的示例 #

以下是React项目中使用PayPal JS SDK实现用户授权同意的核心代码示例：

第一步：动态加载PayPal JS SDK并初始化按钮 #

在React组件中添加如下逻辑（替换YOUR_CLIENT_ID为你的PayPal客户端ID）：

import { useEffect } from 'react';

const PayPalAuthorizationButton = () => {
  useEffect(() => {
    const script = document.createElement('script');
    // 加载SDK时必须添加vault=true参数，开启授权存储功能
    script.src = `https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&vault=true`;
    script.async = true;

    script.onload = () => {
      if (!window.paypal) return;

      window.paypal.Buttons({
        // 创建仅用于授权的订单，金额设为象征性数值
        createOrder: (data, actions) => {
          return actions.order.create({
            purchase_units: [{
              amount: { value: '0.01' }
            }],
            intent: 'AUTHORIZE' // 声明此订单仅用于获取用户授权，而非立即扣款
          });
        },
        // 用户授权成功后的处理逻辑
        onApprove: async (data, actions) => {
          const authorization = await actions.order.authorize();
          // 提取授权ID，传给Drupal后端创建计费协议
          const authId = authorization.purchase_units[0].payments.authorizations[0].id;

          fetch('/your-drupal-api/paypal/create-billing-agreement', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
              authorizationId: authId,
              userId: '当前登录用户的标识ID' // 替换为实际用户ID
            })
          })
          .then(res => res.json())
          .then(result => {
            result.success 
              ? alert('授权完成，计费协议已创建') 
              : alert('计费协议创建失败，请重试');
          });
        },
        // 授权失败的错误处理
        onError: (err) => {
          console.error('PayPal授权出错:', err);
          alert('授权失败，请检查网络后重试');
        }
      }).render('#paypal-button-container');
    };

    document.body.appendChild(script);
    return () => document.body.removeChild(script);
  }, []);

  return <div id="paypal-button-container"></div>;
};

export default PayPalAuthorizationButton;

关键说明 #

• 加载SDK时必须添加&vault=true参数，这是开启支付授权存储、创建计费协议的前提。
• intent: 'AUTHORIZE'表示此订单仅用于获取用户的扣款授权，不会立即发起实际扣款。
• 后端收到授权ID后，需要调用PayPal的vault/payment-tokens API创建支付令牌，再基于令牌生成正式的计费协议，后续即可通过参考交易接口发起任意金额的扣款。

补充注意事项 #

• 你的PayPal账户需要提前开通**参考交易（Reference Transactions）**权限，需联系PayPal官方客服申请，此权限并非默认开通。
• 后端处理计费协议和参考交易时，必须使用PayPal的REST API v2版本，核心接口包括支付令牌创建、计费协议生成、参考交易扣款等。

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