Продолжая заниматься своим новым хобби по созданию арт-сайта для себя, сегодня я настраиваю Stripe API. У меня есть навязчивая идея с Traversy Media, поэтому я начал с его видео, и, столкнувшись с трудностями при интеграции в React, я начал следовать документации Stripe API для использования react-stripe-elements.

Часть 1: подписка на Stripe API

После создания учетной записи перейдите на вкладку разработчика и найдите свои ключи API. К счастью для нас, документация объединяет ваши ключи API в образцы кода, чтобы упростить копирование и вставку. Перейдите на вкладку продуктов и сделайте тестовую покупку. В настоящее время мы находимся в тестовом режиме, поэтому это не обязательно должен быть настоящий продукт.

Часть 2: интернет-магазин npx create-response-app

Создайте свое приложение React и установите некоторые зависимости. Для выполнения только примера полосы вам нужно только установить элементы response-stripe. Следуя инструкциям в документации, теперь нам нужно добавить тег скрипта полосы в наш заголовок index.html. Для тех, кто раньше не пробовал работать с этим файлом, перейдите в общую папку вашего приложения create-response-app, чтобы найти его, и подумайте о том, чтобы прочитать некоторые React docs в index.html и ролях общих папок в нашем приложении React.

Следующие несколько шагов включают копирование и вставку. Я лично чувствовал, что шаги были немного не по порядку для учебного подхода. Таким образом, мы настраиваем StripeProvider и заполняем его нашими элементами формы. StripeProvider принимает атрибут apiKey с открытым ключом из панели инструментов вашей учетной записи Stripe. Мы добавляем компонент Elements к нашему поставщику, чтобы инкапсулировать компонент формы.

Теперь мы приступаем к созданию этого компонента формы. Файловая структура, которую вы хотите использовать в своем приложении React, зависит от конечного размера приложения. Для небольшого приложения подходит функциональный подход, но для более крупного приложения я рекомендую функциональный подход. Если это не имело для вас смысла, вот отличный ресурс. Я планирую, что в конечном итоге это станет моим личным магазином произведений искусства, поэтому я строю свою файловую структуру с использованием функционального подхода.

В папке src создайте файл для компонентов. Затем создайте папку с именем CheckoutForm с файлом внутри нее с именем CheckoutForm.js. Эта файловая структура увеличивает длину пути к файлам, но дает отличные сообщения об ошибках. Один из моих любимых раздражителей - ошибка реакции, в которой говорится о проблеме с index.js, но у меня 50 файлов index.js. Теперь следуйте документации Stripe о том, как будет выглядеть этот компонент CheckoutForm. Они предоставляют вам компонент по шагам. Вам понадобятся CardElement и injectStripe из react-stripe-elements. Не забудьте обернуть экспорт по умолчанию в injectStripe. Вы хотите добавить в свой рендер CardElement и кнопку отправки.

Метод, помещенный в onClick, может немного отличаться от того, что вы обычно видите в React. Обычно я пишу свои методы класса в виде стрелочных функций, но поскольку мы собираемся вызывать несколько асинхронных действий с триггером onClick, нам потребуются средства ожидания, пока мы не получим данные, прежде чем перейти к вызову. Таким образом, они интегрировали async-await для синхронного извлечения токена перед его использованием в нашей выборке на сервер. Следующий шаг на стороне сервера.

Функция createToken внедряется в наши реквизиты через injectStripe. У него много возможных аргументов, но сейчас мы передаем имя нашего гипотетического покупателя. Если карта прошла все проверки Stripe Api, токен вернется в виде {token: {…}}, где значением ключа токена является объект, содержащий идентификатор. Документы красиво деструктурируют token obj в определении переменной. Мой код отражает более глубокий взгляд на то, что возвращается, что я очень рекомендую. Изучение того, что предоставляют API, может дать вам хорошее представление о том, как они работают. Не забудьте импортировать этот компонент в App.js.

Если вы запустите npm start сейчас, вы должны увидеть:

Часть 3: Настройка сервера

Я планирую создать отдельный серверный файл для своего бэкэнда, но для демонстрации и экспериментов я пока помещаю его в папку нашего интернет-магазина. Внутри папки вашего интернет-магазина (которая содержит ваше приложение React) создайте серверную папку как родственную папку с общедоступными и src папками. Перейдите в файл сервера в своем терминале и запустите npm init. После создания вашего package.json установите некоторые зависимости:

npm install - сохранить экспресс-анализатор тела nodemon cors stripe

Express - это фреймворк для Node.js. Body-parser принимает входящие потоки данных и извлекает тело запроса, чтобы мы могли его использовать. Nodemon отслеживает изменения в вашем коде и перезапускает сервер, как вы видите, когда React показывает обновления в реальном времени. Cors может не понадобиться, если вы следуете документации Stripe по прокси-серверу, и она работает, но я считаю, что и для передней, и для внутренней стороны прокси нужен. Cors позволяет установить прокси на сервере. Если ваши вызовы fetch с передней стороны не принимаются вашим сервером узла, добавьте учетные данные: «include» в ваш объект параметров вызова fetch. Наконец, библиотека, с которой мы работаем, работает в полосе.

Перейдите в свой package.json и добавьте в скрипты следующее:

Теперь, когда мы запустим npm start, мы будем запускать nodemon и наш app.js, который является нашим сервером.

В папке вашего сервера создайте файл app.js. Вверху файла добавьте пять операторов require для ранее установленных пакетов (строки 1–5), затем создайте экземпляр express (строка 7). Строки 10–15 настраивают промежуточное ПО cors, а ключ источника должен соответствовать URL-адресу, на котором работает ваше приложение React. В документации к полосе указано, что вам следует настроить промежуточное ПО для парсера тела на использование текста (строка 17, обычно я использую JSON). В строке 19 мы выбираем порт, на котором будет работать наш Node-сервер. Строка 21 - это запрос, предоставленный документами Stripe. Я включил несколько console.logs, чтобы помочь визуализировать ошибки. Наконец, в строках 38-40 отслеживается, когда наш сервер запускается, и регистрируется в терминале порт, на котором он работает.

Чтобы запустить сервер, перейдите к файлу сервера в своем терминале и запустите npm start, и вы должны увидеть «сервер запущен на порту 5000». Теперь, прежде чем мы протестируем интерфейс, нам нужно добавить прокси в React package.json, который указывает, где работает наш сервер.

Теперь вы можете запустить интерфейс и протестировать свою форму. ПРИМЕЧАНИЕ: ФОРМА В РЕЖИМЕ ТЕСТИРОВАНИЯ БУДЕТ РАБОТАТЬ ТОЛЬКО С ТЕСТ-КАРТОЙ, НАЙДЕННОЙ ЗДЕСЬ. Надеюсь, все прошло хорошо, и вы увидите, что страница переключается на…

Поздравляю всех, кто сделал это! Если у вас возникли проблемы, просмотрите документацию, посмотрите, не обновилось ли что-нибудь. Удачного кодирования!