如何将 Paypal Javascript SDK for React SPA 与后端服务器验证集成？

How to integrate Paypal Javascript SDK for React SPA with backend server validation?

我的想法是在我的 React SPA 中为支付流程集成 Paypal Javascript SDK。 SPA 中的进程正在运行，我在后端收到 Paypal webhook。

我正在尝试了解当 SPA 无法将 Paypal 付款状态发送到后端时如何在我的后端验证付款状态。

总之顺序如下

+-----+               +---------+                                     +---------------+                          +-----------+
| SPA |               | Paypal  |                                     | BackendServer |                          | Database  |
+-----+               +---------+                                     +---------------+                          +-----------+
   |                       |                                                  |                                        |
   | Initiate Payment      |                                                  |                                        |
   |-----------------      |                                                  |                                        |
   |                |      |                                                  |                                        |
   |<----------------      |                                                  |                                        |
   |                       |                                                  |                                        |
   | (1) createOrder       |                                                  |                                        |
   |---------------------->|                                                  |                                        |
   |                       |                                                  |                                        |
   |             onApprove |                                                  |                                        |
   |<----------------------|                                                  |                                        |
   |                       |                                                  |                                        |
   | (2) Create Payment Completed for User  [Payment For User]                |                                        |
   |------------------------------------------------------------------------->|                                        |
   |                       |                                                  |                                        |
   |                       |                                                  | Save  [Payment For User]               |
   |                       |                                                  |--------------------------------------->|
   |                       |                                                  |                                        |
   |                       |                                                  |                     [Payment For User] |
   |                       |                                                  |<---------------------------------------|
   |                       |                                                  |                                        |
   |                       |                                               OK |                                        |
   |<-------------------------------------------------------------------------|                                        |
   |                       |                                                  |                                        |
   |                       | (3) Webhhok->"PAYMENT.CAPTURE.COMPLETED"         |                                        |
   |                       |------------------------------------------------->|                                        |
   |                       |                                                  |                                        |
   |                       |                                                  | Check [Payment by Paypal ID]           |
   |                       |                                                  |--------------------------------------->|
   |                       |                                                  |                                        |
   |                       |                                                  |       [Payment by Paypal ID with User] |
   |                       |                                                  |<---------------------------------------|
   |                       |                                                  |                                        |
   |                       |                                                  | [Order for User for Payment]           |
   |                       |                                                  |--------------------------------------->|
   |                       |                                                  |                                        |
   |                       |                                                  |          [Order for User for Payment]  |
   |                       |                                                  |<---------------------------------------|
   |                       |                                                  |                                        |
   |                       |                        Email / Websocket message |                                        |
   |<-------------------------------------------------------------------------|                                        |
   |                       |                                                  |                                        |

步骤如下：

(1) 使用“actions.order.create”为“createOrder”发起Paypal流程如下：

createOrder: (data, actions) => {
  return actions.order.create({
    intent: 'CAPTURE',
    // The object 'payer' seems only to be used for the login form from Paypal.
    payer: {
      name: {
        given_name: 'given_name for login',
        surname: 'surname for login',
      },
      email_address: 'PAYPAL EMAIL FOR LOGIN',
      id: 'PAYPAL ID',
    },
    purchase_units: [
      {
        description: product.description,
        amount: {
          currency_code: 'EUR',
          value: product.price,
        },
      },
    ],
  });
},

(2) 收到Paypal付款批准后，我正在将状态发送到后端服务器

onApprove: async (data, actions) => {
  const order = await actions.order.capture();
  sendOrderToBackend(order);
},

(3) 我收到了 Paypal 支付 webhook 和支付成功的信息。之后，我通过“Paypal pament ID”验证用户的订单。

问题/问题

我不明白当我的 SPA 在向 (2) 中的后端服务器发送“Paypal 付款状态”时出现问题时会发生什么。

如何在后端验证“Paypal 付款”属于哪个用户？

我没有在 Paypal SDK 文档中找到任何关于如何自定义参数的参考。您知道我如何将自定义 key/value 参数发送到 Paypal 并在 webhook 中接收这些参数吗？

感谢您的帮助！

P.s。为了完整起见，请参阅 Paypal SDK 集成如下：

window.paypal
  .Buttons({
    createOrder: (data, actions) => {
      return actions.order.create({
        intent: 'CAPTURE',
        payer: {
          name: {
            given_name: 'given_nameXXX',
            surname: 'surnameXXX',
          },
          email_address: 'test@gmail.com',
          id: 'realyonly13charcaters???',
        },
        purchase_units: [
          {
            description: product.description,
            amount: {
              currency_code: 'EUR',
              value: product.price,
            },
          },
        ],
      });
    },
    onApprove: async (data, actions) => {
      const order = await actions.order.capture();
      sendOrderToBackend(order);
    },
    onError: err => {
      setError(err);
      console.error(err);
    },
  })
  .render(paypalRef.current);

使用服务器端集成模式。这是 UI：https://developer.paypal.com/demo/checkout/#/pattern/server

后端需要两条路由，一条用于 'Set Up Transaction'，一条用于 'Capture Transaction'，记录在此处：https://developer.paypal.com/docs/checkout/reference/server-integration/

不需要 webhook。

感谢您的回答。老实说，我一直没有找到您 link 编辑过的文档。伟大的！但是，我在第二个 link 的两个过程之间磕磕绊绊：“设置 + 捕获交易”和“设置 + 捕获授权”。

从文档中我会说“授权”部分是处理未来的付款。 “创建和捕获交易”的过程似乎是创建支付的“实时”流程。

那个调用“https://api.sandbox.paypal.com/v2/checkout/orders/{ID}/caoture”的 REST API 的人是否完成了付款过程并且卖家得到了是钱？

感谢您的帮助！