Как интегрировать Paypal Javascript SDK для React SPA с проверкой внутреннего сервера? - PullRequest
0 голосов
/ 01 августа 2020

Моя идея состоит в том, чтобы интегрировать Paypal Javascript SDK для процесса оплаты в мой React SPA. Процесс в SPA работает, и я получаю веб-перехватчик Paypal на сервере m.

Я пытаюсь понять, как проверить статус платежа на моем сервере, когда у SPA возникают проблемы с отправкой платежа Paypal staus в бэкэнд.

Вкратце последовательность выглядит следующим образом

+-----+               +---------+                                     +---------------+                          +-----------+
| 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) Инициируйте процесс Paypal для «createOrder» с помощью "actions.order.create" следующим образом:

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 pament я отправляю статус на внутренний сервер

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

( 3) Я получаю веб-крючок платежа Paypal и сообщение об успешном завершении платежа. После этого я подтверждаю заказ для пользователя по «Идентификатору платежа Paypal».

Вопрос / проблема

Я не понимаю, что происходит, когда мой SPA имеет проблемы с отправкой «статуса платежа Paypal» на мой внутренний сервер в (2).

Как я могу проверить в бэкэнде, какому пользователю принадлежит «Paypal pament»?

Да в документации Paypal SDK нет ссылок на настраиваемые параметры. Знаете ли вы, как я могу отправить пользовательские параметры ключа / значения в Paypal и получить их в веб-перехватчике?

Спасибо за вашу помощь!

Ps для полноты картины, см. Интеграцию 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);

Ответы [ 2 ]

1 голос
/ 03 августа 2020

спасибо за ответ. Если честно, мне не удалось найти документы, на которые вы ссылались. Большой! Однако я спотыкаюсь между двумя процессами из второй ссылки: «Настройка + транзакция захвата» и «Настройка + авторизация захвата».

Из документов я бы сказал, что часть «авторизации» должна обрабатывать будущие платежи. Процесс «создания и фиксации транзакций» кажется «живым» потоком создания платежей.

Этот человек, вызывающий REST API из «https://api.sandbox.paypal.com/v2/checkout/orders/ {ID} / caoture», завершает процесс оплата и продавец получает деньги?

Спасибо за помощь!

1 голос
/ 01 августа 2020

Используйте шаблон интеграции на стороне сервера. Вот пользовательский интерфейс: https://developer.paypal.com/demo/checkout/# / pattern / server

Вам понадобятся два маршрута на бэкэнде, один для «Настроить транзакцию» и один для «Захват транзакции», описанных здесь. : https://developer.paypal.com/docs/checkout/reference/server-integration/

Веб-перехватчики не нужны.

...