Stripe with React JS

Question

Мне нужно создать токен с Stripe.js в React JS, но я не могу найти простой способ. В node.js я хотел бы сделать что-то вроде этого:

stripeClient.tokens.create({ 
     card: { 
     number: '4242424242424242', 
     exp_month: 12, 
     exp_year: 2050, 
     cvc: '123' 
     } 

Но модуль нашивки НПМ не работает для меня в React JS. Я получаю сообщение об ошибке:

Cannot resolve module 'child_process'

Так, так как это узел pibrary, очевидно, я хотел бы использовать

<script type="text/javascript" src="https://js.stripe.com/v2/"></script> 

Но я не уверен, что должна быть лучшая практика для реализации внешних библиотек React

Answer 1

Вы можете просто добавить его, как и любую другую библиотеку на стороне клиента, как это было в прошлом.

Включите этот сценарий тег:

<script type="text/javascript" src="https://js.stripe.com/v2/"></script> 

Затем использовать глобальный, что он выставляет в своем коде.

import React from 'react'; 

// we didn't have to import stripe, because it's already 
// in our global namespace. 
Stripe.setPublishableKey('pk_test_6pRNASCoBOKtIshFeQd4XMUh'); 

Это не так чисто, как в состоянии потребовать его от NPM, но он будет работать нормально.

Answer 2

Для тех, кто ищет руководство при использовании Stripe in React: Accept Stripe Payments with React and Express - это статья с прямой реализацией Stripe in React (create-response-app) и минимальным Express-сервером, который обрабатывает ваши платежные запросы и пересылает их к платформе Stripe. В статье содержится минимальная версия шаблона и поставляется с проектом с открытым исходным кодом, который вы можете просто попробовать самостоятельно.

Answer 3

Переключить на Брэйнтри
Они поддерживают пакет на стороне клиента НПМ, который может быть использован с create-react-app (Webpack/Browserify): https://developers.braintreepayments.com/guides/client-sdk/setup/javascript/v3#npm

npm install --save braintree-web

К сожалению Stripe и React Дон» t хорошо сочетаются
Версия Stripe on NPM является только для использования на стороне сервера; так что даже если вы используете Webpack/Browserify library (как это предусмотрено create-react-app), тогда отсутствуют функции клиентской стороны для настройки открытого ключа и токенизации информации о кредитной карте.
Для клиентской стороны Stripe предпочитает "stripe.js" для использования с внешнего URL: https://js.stripe.com/v3/. К сожалению, внешние URL-адреса не подходят для create-react-app - например, ES6 import не может быть использован, а внешний файл не связан Webpack. Кроме того, версия (v3) заставляет пользователей использовать метод elements и запрашивать DOM (в основном, против React).