Время от времени мне нравится проводить выходные или два, работая над личным проектом. Я мечтаю, что моя последняя версия приложения «To-do» взорвется, я смогу бросить свою работу программиста-винтика в машине Силиконовой долины и сбежать в Нью-Йорк, чтобы продолжить карьеру своей мечты в качестве концертирующего виолончелиста. . (Это вообще вещь?)

Но до недавнего времени эти проекты предлагались на 100% бесплатно десятку (десяткам) моих пользователей. На самом деле, я практически плачу своим друзьям за использование моих продуктов, поскольку размещение серверов стоит около 7 долларов в месяц. Так что я подумал, эй, может быть, мне стоит попробовать взимать плату с людей за использование моих домашних, травяных, кустарных веб-приложений.

Чтобы было ясно — это не история моего бешеного успеха после добавления платежей в мои сторонние проекты. Я просто хотел поделиться тем, как это сделать максимально простым способом, поскольку, несмотря на наличие отличной документации, руководства Stripe иногда могут быть немного сложными для понимания.

(Кроме того, если вам интересно, вот проект, над которым я работаю, чтобы продемонстрировать этот код. Я скоро выложу его в открытый доступ, как только все будет завершено.)

Начиная

Небольшое предупреждение — это небольшое руководство предполагает некоторые базовые знания JavaScript и React. Если вы не знакомы ни с одним из них, это может быть пустой тратой вашего времени. Считай себя предупрежденным.

(С другой стороны, если вы уже широко знакомы с ними, не стесняйтесь просто взглянуть на окончательный код: https://github.com/reichert621/boilerplate/pull/2 /файлы)

Все еще здесь? Прохладный. Для начала:

Создание первого заряда

Все сделано? Здорово! Первое, что мы собираемся сделать, это настроить конечную точку API для обработки списания средств с кредитной карты. Чтобы проверить это, мы будем использовать одну из тестовых кредитных карт Stripe. (Мы займемся сбором платежной информации клиента позже.)

Прежде чем мы напишем какой-либо код, нам нужно сделать две вещи:

  • Установите клиент узла Stripe с npm install stripe, что должно добавить stripe к вашему package.json.
  • Добавьте наш секретный ключ API в переменные среды. Самый простой способ сделать это — создать файл .env в корневом каталоге вашего проекта и добавить STRIPE_SECRET_KEY=sk_test_xxx (где sk_test_... — ваш секретный ключ API из https://dashboard.stripe.com/test/apikeys).

После того, как это будет сделано, настройка нашей конечной точки API займет всего около 50 строк кода! Давайте добавим этот код в наш файл /server/index.js:

Если вы знакомы с фреймворком Express, это должно показаться вам довольно знакомым. Если нет, давайте немного разберем это:

  • Чтобы загрузить stripe в строке 9, вам нужно добавить свой секретный ключ API в переменные среды. Если вы еще не сделали этого в своем файле .env, как описано выше, вот более подробное пошаговое руководство по этому процессу: https://www.twilio.com/blog/2017/01/how-to-set-environment- переменные.html
  • Промежуточное ПО express.static(...) в строке 16 указывает экспрессу обслуживать статические файлы из указанного нами каталога (в данном случае это каталог client/build, в котором будет жить наше приложение React). Для получения дополнительной информации см.: https://expressjs.com/en/starter/static-files.html
  • Промежуточное ПО express.json() в строке 19 позволяет нам легко анализировать JSON в телах наших запросов. Например, если мы хотим отправить '{"foo":"bar"}' в запросе, мы можем получить к нему доступ как req.body.foo // => "bar".
  • Мы настроили конечную точку API /api/charges в строке 32, что позволяет нам отправлять HTTP-запросы POST на этот URL-адрес на нашем сервере и взимать плату с помощью Stripe. Когда наш ответ (res) успешен, мы отвечаем статусом 200 и возвращаем только что созданный charge. В противном случае мы отвечаем статусом ошибки 500 вместе с данными об ошибке.
  • Мы запускаем наш сервер в строке 50, используя предоставленный нами port (либо в качестве переменной среды, либо 3000 по умолчанию).

Обратите внимание, что наша конечная точка принимает токен источника кредитной карты в теле запроса (например, req.body), но сейчас мы предоставляем значение по умолчанию 'tok_visa' (это один из тестовых токенов карты Stripe). После того, как мы настроим форму для сбора платежной информации клиента, мы вместо этого передадим этот токен.

Мы можем проверить, работает ли эта новая конечная точка, запустив npm run server для запуска сервера, а затем выполнив следующую команду на отдельной вкладке:

curl -X POST http://localhost:3000/api/charges

Обратите внимание, что curl по умолчанию выполняет запрос GET, поэтому мы должны явно установить -X POST для выполнения запроса POST.

Если запрос прошел успешно, мы должны увидеть что-то вроде:

{"charge":{"id":"ch_xxx","object":"charge","amount":1999,...}

Мы также должны проверить нашу панель инструментов Stripe (в разделе Платежи), чтобы убедиться, что платеж был создан. Это может выглядеть примерно так:

Поздравляем! Вы только что создали свой первый заряд 💸

Сбор платежной информации

Далее, давайте соберем платежную информацию от реального клиента!

Наиболее распространенные способы сбора платежной информации в клиенте (т. е. код внешнего интерфейса) — это использование Stripe Elements для более индивидуального потока или Stripe Checkout, если вы хотите, чтобы Stripe выполнял большую часть тяжелой работы. (Если вы используете Stripe Checkout, серверная часть практически не требует работы.)

В этом примере мы будем использовать Stripe Elements для создания простого пользовательского интерфейса, который собирает платежную информацию. Поскольку мы используем React, мы будем использовать библиотеку react-stripe-elements.

Прежде чем мы напишем какой-либо код, нам нужно установить еще пару пакетов:

  • npm install superagent — это библиотека, которую я люблю использовать для запросов AJAX/HTTP. Мы будем использовать это, чтобы общаться с API, который мы только что настроили.
  • npm install react-stripe-elements — это легкая React-обертка вокруг Stripe Elements.

Во-первых, нам нужно добавить библиотеку Stripe.js в наш /client/index.html:

Затем в /client/App.js мы можем сделать следующее:

Распаковываем, что здесь происходит:

  • Наша функция createCharge в строке 13 просто берет токен источника кредитной карты и передает его в API, который мы настроили ранее (например, POST /api/charges).
  • Функция injectStripe из react-stripe-elements используется для внедрения клиента stripe в наш компонент Form, что делает stripe доступным в компоненте props.
  • Чтобы иметь возможность использовать injectStripe, мы должны обернуть наше приложение React компонентом <StripeProvider />. И чтобы использовать Stripe Elements, нам нужно обернуть нашу форму компонентом <Elements />. (StripeProvider обрабатывает загрузку stripe.js, а Elements обрабатывает регистрацию ввода с помощью stripe.elements().)
  • Обратите внимание, что вам нужно будет обновить STRIPE_API_KEY, чтобы он соответствовал вашему личному тестовому API-ключу. (Он должен начинаться с pk_test_... и находится в вашей панели управления по адресу https://dashboard.stripe.com/test/apikeys.)

Теперь, если мы откроем новую вкладку в нашем терминале и запустим npm run ui, пока наш сервер все еще работает (npm run server), мы сможем перейти к localhost:3000 и просмотреть наше чрезвычайно минимальное (и довольно уродливое) новое приложение! Сейчас все, что он делает, — это отображает форму, которую можно использовать для сбора информации о кредитной карте:

Чтобы проверить, работает ли это, мы можем использовать одну из тестовых кредитных карт Stripe. Легче всего запомнить 4242 4242 4242 4242 со сроком действия любой даты в будущем (например, 12/34) и CVC любого трехзначного числа (например, 123).

Если это сработало, мы должны увидеть предупреждение:

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

Оформление формы платежной информации

Как вы, возможно, заметили, наша форма ввода кредитной карты не имеет границ или любого другого стиля в этом отношении. Давайте сделаем его немного красивее.

Здесь мы можем сделать две вещи:

  • Измените стиль входного контейнера (например, задайте ему рамку, тень блока и т. д.), определив стили для класса .StripeElement CSS, который Stripe по умолчанию добавляет к своим компонентам Element.
  • Измените стиль входного текста (например, тип шрифта, цвет и т. д.), передав объект style в наши реквизиты <CardElement />.

Мы сделаем оба! Во-первых, если у нас его еще нет, давайте создадим файл App.css в нашем каталоге /client. Не стесняйтесь вставить этот CSS для начала, а затем поэкспериментируйте с обновлением стилей:

Обратите внимание, что в дополнение к определению базового класса для .StripeElement мы также можем определить классы для различных состояний — например, чтобы настроить стиль, когда ввод сфокусирован, мы используем .StripeElement--focus в строке 30.

(Другие состояния включают .StripeElement--empty, .StripeElement--invalid, .StripeElement--complete и .StripeElement--webkit-autofill. Дополнительную информацию можно найти на https://stripe.com/docs/stripe-js/reference#element-options.)

Затем мы импортируем наш новый файл CSS в наш App.js и определим наш объект style для нашего компонента <CardElement />:

Обратите внимание, что мы также добавили наш класс .StripeForm к элементу form в строке 34, что просто немного лучше центрирует нашу форму на странице.

Если мы перезагрузим наше приложение, теперь оно должно выглядеть примерно так:

Наша кнопка здесь еще не стилизована, но в остальном неплохо!

Следующие шаги

Подводя итог, мы сделали следующее:

  • Мы настроили Node API с помощью Express, чтобы обрабатывать платежи по кредитным картам с помощью Stripe.
  • Мы настроили приложение React и использовали Stripe Elements для сбора сведений о платежах пользователей.
  • Мы изменили стиль формы нашей кредитной карты, чтобы она выглядела немного лучше. 💅

Вот разница для окончательного кода:https://github.com/reichert621/boilerplate/pull/2/files

Двигаясь вперед, Stripe может предложить массу различных продуктов, но есть несколько, о которых я хотел бы рассказать в следующих постах:

  • Часть 2 — Настройка регулярных платежей для вашего приложения с помощью Подписки/Оплата
  • Часть 3. Обработка расчетов по доставке и налогам с помощью Orders API
  • Часть 4. Приведение в соответствие со стандартом SCA и подготовка к обработке платежей в будущем с помощью Payment Intents API

Быть в курсе!