Как и если использовать серверную часть в stripe новая библиотека @ stripe / Reaction-stripe- js - PullRequest
Новая
       1

Как и если использовать серверную часть в stripe новая библиотека @ stripe / Reaction-stripe- js

1 голос
/ 19 марта 2020

Моя цель - создать простую страницу оплаты для продукта.

В официальных документах говорится, что для создания транзакции на стороне сервера требуется генерация токена, используя: 

stripe.paymentIntents.create({
  amount: req.body.amount,
  currency: 'usd'
})

и использование возвращенного ключа для создания транзакции.

Однако в некоторых других официальных примерах используется только клиентская сторона, например: 

const { error, paymentMethod } = await stripe.createPaymentMethod({
  type: 'card',
  card: elements.getElement(CardElement),
})

Без ключ сервера stripe.confirmCardPayment('{CLIENT_SECRET}', {

В документах говорится, что CLIENT_SECRET требуется, но есть примеры без него.

Есть идеи, почему и в чем разница?

1 Ответ

2 голосов
/ 19 марта 2020

Если вы не используете новую Stripe-only-checkout только для клиента , невозможно обрабатывать платежи в пользовательских интеграциях Stripe без какого-либо серверного кода.

Как вы заметили, официальный Документы для React Stripe. js включают только код на стороне клиента. Однако примеры кода на этой странице не представляют собой полную интеграцию, необходимую для обработки платежа. Примеры демонстрируют только то, как вы собираете и токенизируете данные кредитной карты во внешнем интерфейсе с помощью React Stripe. js и функции createPaymentMethod . Документы были написаны таким образом, чтобы было легче следить за примерами кода и запускать их в браузере, не настраивая сервер.

Хорошее место для начала, чтобы получить представление о том, какие API-интерфейсы участвуют в конечном итоге. Интеграция платежа до конца:

https://stripe.com/docs/payments/accept-a-payment

( tip каждый образец кода в приведенном выше руководстве имеет React версия, в которую вы можете перейти)

Если вы заинтересованы в том, чтобы увидеть полную работающую интеграцию, основанную на этих примерах React, я бы порекомендовал проверить следующую демонстрацию, которую мы создали для недавнего эпизода работы в офисе разработчика :

https://github.com/tmarek-stripe/demo-react-stripe-js

В частности, я бы рекомендовал рассмотреть серверную часть (здесь) , которая создает намерение оплаты, и клиентская часть (здесь) , которая создает способ оплаты и подтверждает намерение платежа.

Это много для обзора! Если хотите, вы можете просто посмотреть видео, где мы go рассказываем, как создать (почти полную) интеграцию с React Stripe. js:

React Stripe. js - Разработчик Часы работы офиса | Youtube

Как только основы будут рассмотрены, я бы порекомендовал рассмотреть другой пример для более полной сквозной интеграции:

Безопасные для типов платежи с Next. js, TypeScript и Stripe

При просмотре этой полной заметки об интеграции не требуется создавать способ оплаты вручную при использовании Stripe. js. Это необязательно, потому что успешное намерение оплаты автоматически создаст для вас способ оплаты.

Намерение платежа создается на стороне сервера: 

// Create a PaymentIntent with the specified amount.
const response = await fetchPostJSON('/api/payment_intents', {
  amount: input.customDonation
});

https://github.com/stripe-samples/nextjs-typescript-react-stripe-js/blob/master/components/ElementsForm.tsx#L84 -L88

И подтверждается на стороне клиента без createPaymentMethod необходимы звонки! 

const cardElement = elements!.getElement(CardElement);

// Use your card Element with other Stripe.js APIs
const { error, paymentIntent } = await stripe!.confirmCardPayment(
  response.client_secret,
  {
    payment_method: {
      card: cardElement!,
      billing_details: { name: input.cardholderName }
    }
  }
);

https://github.com/stripe-samples/nextjs-typescript-react-stripe-js/blob/master/components/ElementsForm.tsx#L99 -L110

В двух словах:

Надеюсь, это поможет!

...