Как интегрировать Stripe с приложением React

Принять и обработать платежи для вашего бизнеса еще никогда не было так просто!

Умным людям нужны умные решения. А Stripe - это умное решение для приема платежей за ваш цифровой продукт / услугу.

Сегодня мы собираемся интегрировать Stripe с приложением React. Для этого нам также понадобится небольшая серверная часть Express. Но не волнуйтесь. Сделаем все с нуля.

Давайте начнем.

Получите ключи!

Сначала откройте счет на Stripe. Это должно быть просто, если вы живете в поддерживаемой стране.

Сначала перейдите на https://stripe.com/docs/keys и получите оттуда два ключа API. публичный должен начинаться с pk

pk_test_somerandomgibberish

и ваш секретный ключ должен начинаться с sk

sk_test_somerandomgibberish

Возьмите эти 2 ключа и сохраните их где-нибудь.

Важно: Не раскрывайте свой секретный ключ! Используйте открытый ключ только во внешнем интерфейсе

Обзор процесса

Процесс оплаты выглядит примерно так

Шаг 1. Внешний интерфейс вызывает API-интерфейс серверной части для генерации платежного намерения.

Шаг 2: сервер затем использует секретный ключ для создания client_secret, который возвращается во внешний интерфейс.

Шаг 3. Пользователь вводит правильную информацию о карте.

Шаг 4: специальный CardElement будет собирать информацию во внешнем интерфейсе.

Шаг 5. Используйте секретный временный ключ, чтобы произвести платеж с помощью библиотеки полос.

И это все!

Подготовить бэкэнд

Мы создадим экспресс-приложение с нуля, но если у вас уже есть работающий бэкэнд, он будет работать так же.

Сначала перейдите в любой каталог и создайте пустую папку.

mkdir backend
cd backend
npm init -y

Он создаст для вас новый package.json файл. Теперь нам нужен наш index.js файл.

Для этого выполните следующую команду

touch index.js

Теперь установите некоторые зависимости

npm install express cors nodemon stripe

Теперь перейдите к файлу package.json и измените сценарий start следующим образом. Это позволит автоматически перестроить при изменении.

Теперь добавьте в это приложение следующий стартовый код

Теперь зайдите в терминал и запустите

npm start

И ваше приложение должно запускаться с порта 3001

Подготовить интерфейс

Сначала создайте новый проект реакции, выполнив следующую команду

npx create-react-app frontend

Теперь войдите в этот проект и установите некоторые зависимости

npm install --save @stripe/react-stripe-js @stripe/stripe-js

Теперь создайте новый компонент с именем MyCheckoutForm.js и оставьте его пока пустым.

Зайдем в наш App.js файл и загрузим начальную полосовую оболочку. Теперь наш App.js файл должен выглядеть так

Теперь давайте создадим нашу форму оформления заказа, чтобы разрешить оплату

Теперь, если вы перейдете к своему терминалу и запустите интерфейс, запустив

npm start

И вы увидите форму, подобную приведенной ниже, где вы можете использовать номер карты 4242 4242 4242 4242 и любую будущую дату в качестве истечения срока действия и любой номер в качестве CVC и почтового индекса для проверки вашего платежа.