如何在React/Node应用中实现银行账户录入以接收PayPal收益分发

PayPal官方提供了对应Stripe Elements的工具链，能安全实现银行账户的收集、验证与令牌生成，无需自行处理敏感金融数据，核心有两种落地方式：

方案1：使用PayPal Embedded Funding Sources预构建组件 #

这是最省心的方案，PayPal提供的预封装UI组件自带格式校验、敏感信息加密，直接返回可用于打款的银行账户ID，前端无需触碰任何原始银行数据。组件样式可通过参数微调，适配你的应用界面。

方案2：自定义UI + PayPal Vault API（适合高度定制场景） #

如果需要完全自定义表单样式，可自行构建前端表单，结合PayPal Vault API完成银行账户的安全提交与验证。你只需要做基础的格式校验（比如美国路由号是9位数字），敏感数据会通过PayPal SDK加密传输到其服务器，最终返回可存储的账户ID。

前端部分 #

方案1（官方组件） #

1. 引入PayPal前端SDK，初始化时开启vault和payouts权限：

<script src="https://www.paypal.com/sdk/js?client-id=你的客户端ID&vault=true&intent=payout"></script>

2. 渲染银行账户收集容器，初始化组件并处理回调：

<div id="paypal-bank-form"></div>
<script>
paypal.Buttons({
  createOrder: (data, actions) => {
    return actions.vault.createBankAccount({
      country_code: 'US', // 适配目标国家
      account_type: 'CHECKING'
    });
  },
  onApprove: (data) => {
    // 获取PayPal生成的银行账户ID
    const bankAccountId = data.bankAccountId;
    // 提交到后端存储
    fetch('/api/user/bank-account', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ bank_account_id: bankAccountId })
    });
  }
}).render('#paypal-bank-form');
</script>

方案2（自定义UI） #

1. 构建表单，添加基础校验：

<form id="custom-bank-form">
  <input type="text" id="routing-number" placeholder="路由号" required>
  <input type="text" id="account-number" placeholder="账号" required>
  <select id="account-type">
    <option value="CHECKING">支票账户</option>
    <option value="SAVINGS">储蓄账户</option>
  </select>
  <button type="submit">提交</button>
</form>

2. 通过PayPal SDK提交加密后的账户信息：

document.getElementById('custom-bank-form').addEventListener('submit', async (e) => {
  e.preventDefault();
  const routingNumber = document.getElementById('routing-number').value;
  const accountNumber = document.getElementById('account-number').value;
  const accountType = document.getElementById('account-type').value;

  try {
    const response = await paypal.vault.createBankAccount({
      country_code: 'US',
      routing_number: routingNumber,
      account_number: accountNumber,
      account_type: accountType
    });
    // 提交账户ID到后端
    await fetch('/api/user/bank-account', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ bank_account_id: response.bankAccountId })
    });
  } catch (err) {
    console.error('账户提交失败:', err);
  }
});

后端部分 #

1. 账户验证与存储 #

• 接收前端传入的bank_account_id，调用PayPal REST API的GET /v1/vault/bank-accounts/{bank_account_id}接口，验证账户状态是否有效
• 将bank_account_id与用户ID关联存储在数据库中，绝对不要存储原始银行账号、路由号
• 若PayPal要求微存款验证（部分地区必填），调用POST /v1/vault/bank-accounts/{bank_account_id}/verify触发小额打款，待用户输入验证金额后，再次调用该接口完成验证

2. 每月收益分发 #

• 每月1号，批量查询所有已验证银行账户的用户
• 调用PayPal Payouts API的POST /v1/payments/payouts接口，构造打款请求，使用存储的bank_account_id作为收款目标：

{
  "sender_batch_header": {
    "sender_batch_id": "每月打款_20240601",
    "email_subject": "你的照片收益已到账"
  },
  "items": [
    {
      "recipient_type": "BANK",
      "amount": {
        "value": "100.00",
        "currency": "USD"
      },
      "bank_account_id": "存储的账户ID"
    }
  ]
}

• 记录打款结果，对失败的打款（如账户失效）进行重试或通知用户更新账户

• 必须通过PayPal官方接口传输银行数据，禁止前端明文处理或存储敏感信息，避免违反PCI DSS合规要求
• 确保你的PayPal商家账户已开通Payouts权限，完成企业级认证
• 不同国家的银行账户格式差异较大，需针对目标地区调整前端校验规则

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