Получение оплаты IRL (часть 3) Авторизация и прием карточных платежей

Знаете ли вы, что с помощью Stripe можно принимать платежи от физических лиц? В этой серии статей мы с головой окунемся в создание интеграции платежей при личном присутствии с использованием Stripe Terminal.

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

В этой статье блога мы узнаем, как использовать API Payment Intents и Terminal для создания и передачи платежей нашим считывателям карт, чтобы мы могли их обрабатывать. Мы также узнаем, как имитировать касание кредитной карты на имитированном считывающем устройстве.

Именно так, к концу этой статьи вы сможете обрабатывать и завершать платежи при личном присутствии с помощью Stripe Terminal!

Новичок в этой серии? Обязательно ознакомьтесь с нашей первой статьей о том, как настроить считыватель карт для тестирования и разработки, а также с нашей второй статьей о подключении их к веб-приложению.

Обработка платежей с помощью вашего приложения для точек продаж

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

Успешный платеж через терминал Stripe состоит из трех этапов:

Во-первых, вы переводите считыватель в режим приема платежей. На этом этапе кассир вводит сумму и нажимает кнопку, чтобы ридер перешел на экран приема платежей.

Далее происходит авторизация платежа. На этом этапе держатель карты нажимает, опускает или проводит пальцем по своему устройству, пока считыватель находится в режиме приема платежей. Затем устройство чтения карт безопасно передает данные карты в карточную сеть для временной авторизации.

Наконец, вы подтверждаете платеж. Кассир завершает транзакцию, вручную подтверждая (или фиксируя) оплату. На этом этапе оплата фактически завершена.

Дополнительный шаг подтверждения транзакции вручную после ее авторизации может показаться излишним, но он помогает сократить мошенничество или непреднамеренные транзакции. Именно поэтому вы можете видеть, как кассиры нажимают кнопку на консоли точки продаж даже после того, как вы прикоснулись к своей кредитной карте.

Установка считывающего устройства в режим приема платежей

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

💡Если вам нужна отправная точка для вашего приложения, смело начинайте с этого ответа. В нем есть весь код из предыдущего поста.

Если вы хотите увидеть конечный результат, посмотрите этот ответ.

На бэкенде мы создадим маршрут POST /process-payment, который будет ожидать тело запроса с amount, представляющим цену в центах, и reader_id, представляющим уникальный идентификатор читателя. Мы скажем Stripe создать платеж, передав amount в stripe.paymentIntents.create() вместе с необходимыми параметрами currency, capture_method и payment_method_type. Это создаст Payment Intent, специальный объект, который Stripe использует для управления состояниями платежа. Мы разрушим и назовем id Payment Intent как paymentIntentId.

Мы можем сказать Stripe, чтобы он перевел конкретный ридер в режим приема платежей для нашего платежа, вызвав stripe.terminal.readers.process_payment() с идентификатором ридера карт (readerId) и идентификатором платежа (paymentIntentId) в качестве аргументов.

Теперь, когда вызывается /process-payment с действительной суммой и readerId, Stripe создаст платеж на указанную сумму и направит его на указанное устройство чтения карт. Теперь нам просто нужно обновить наш фронтенд, чтобы мы могли отправлять ему readerId и amount при отправке нашей формы в /process-payment.

На фронтенде мы создадим слушатель события submit, который будет передавать нашу сумму и ID считывателя в /process-payment. Если мы получим ошибку, мы добавим ее в #messages div прямо под нашей формой и выйдем из функции. В противном случае мы добавим сообщение в #messages, указывающее на то, что мы успешно создали платеж для нашего ридера, и перенаправимся на страницу /readers.html, страницу для управления ридером после его запроса.

Теперь, когда мы отправим нашу форму, мы создадим платеж и отправим его нашему читателю. Как только это будет сделано, мы переведем веб-приложение на страницу /readers.

Если вы найдете свой платеж на приборной панели Stripe, вы заметите, что он создал новый платеж. Мы успешно передали платеж нашему считывателю Stripe Terminal. Ура! 🥳

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


Авторизация платежа в тестовом режиме

Если у вас есть физический считыватель карт BBPOS WisePOS E, протестировать попытку оплаты очень просто, поскольку считыватель действительно перейдет на экран приема платежей. Прикоснитесь тестовой картой к считывателю, и он сделает вид, что авторизует платеж.

Если вы используете симулированное считывающее устройство, вам необходимо использовать помощник тестирования терминального считывателя для имитации того, как держатель карты подносит или прижимает свою карту к симулированному считывающему устройству. Это полезно для разработки без считывателя, но это также хороший инструмент для интеграционных тестов. Возможно, вам стоит научиться использовать его, даже если у вас под рукой есть физический считыватель WisePOS E.

Давайте построим маршрут для авторизации симулированных платежей на симулированных считывателях. На бэкенде, в /server/server.js, добавьте еще один маршрут API POST. Здесь мы деструктурируем readerId из тела запроса и передадим его в качестве аргумента stripe.testHelpers.terminal.readers.presentPaymentMethod(). Это позволит Stripe имитировать нажатие или введение карты в считывающее устройство.

На фронтенде, в /client/reader.js, мы добавим еще один слушатель события для DOMContentLoaded и получим параметры reader_id и payment_intent_id из URL и присвоим их readerId и paymentIntentId, соответственно. Нам понадобится readerId для действий считывателя, таких как имитация платежа. paymentIntentId пригодится, когда придет время перехватить платеж в следующем разделе.

Добавьте слушателя события click к нашей кнопке Simulate Payment. Сделайте POST запрос к /simulate-payment с readerId. Как и раньше, добавьте сообщение, если есть какие-либо ошибки. В противном случае мы добавим сообщение в наш #messages div, чтобы показать, что имитация платежа прошла успешно.

Попробуйте использовать кнопку Simulate Payment в вашем приложении.

Если вы нажмете на ссылку, сгенерированную помощником addMessage, она приведет вас к платежу в Stripe Dashboard. Вы увидите, что к платежу прикреплена карта и он не захвачен, что означает, что транзакция была авторизована, но не завершена.

Поздравляем: вы успешно смоделировали свою первую тестовую авторизацию терминала с помощью смоделированного кард-ридера! 🎉

Теперь нам просто нужно добавить нашу собственную функциональность захвата в наше приложение для точек продаж.🤔


Захват авторизованных платежей

Авторизация в терминале Stripe длится всего 48 часов. После этого авторизация сходит на нет и возвращается на баланс карты. Помните: если вы не фиксируете платежи, вам не заплатят!

Давайте создадим последнюю конечную точку API, чтобы сообщить Stripe о завершении платежа. На бэкенде, в /server/server.js, мы создадим новый маршрут POST, /capture-payment. Этот маршрут будет ожидать тело запроса с paymentIntentId. Мы перехватим платеж, вызвав stripe.paymentIntents.capture(), передав paymentIntentId в качестве единственного аргумента.

На фронтенде, в client/reader.js, мы добавим слушатель события click для нашей кнопки Capture. Он будет использовать payment_intent_id из параметров URL. Если попытка успешна, мы перенаправим пользователя на /success.html, передав ему идентификатор намерения платежа, чтобы мы могли отобразить детали платежа.

Теперь мы можем завершить наш платеж, нажав кнопку Capture после того, как платеж будет авторизован. Помните, мы упоминали, что иногда кассирам нужно нажать кнопку, чтобы завершить транзакцию? В контексте нашего приложения для точек продаж это кнопка Capture.

Мы официально можем принимать и завершать личные платежи с помощью Stripe Terminal.🚀.


Далее: Отмена личных платежей в полете

Создание и завершение платежей с помощью считывателя Stripe Terminal — это все хорошо, но иногда клиент может изменить свой заказ в середине оплаты. В нашем последнем посте мы узнаем, как отменить платежи в полете.

Оставайтесь на связи

Хотите быть в курсе последних интеграций, функций и проектов Stripe с открытым исходным кодом?

📣 Следуйте за нами в Twitter
💬 Присоединяйтесь к официальному серверу Discord
📺 Подпишитесь на наш канал Youtube
📧 Подпишитесь на Dev Digest

Об авторе

Чарльз Уоткинс — представитель разработчиков в компании Stripe, где он пишет, кодирует и ведет прямые трансляции об онлайн-платежах. В свободное время он любит рисовать, играть в игры и пересматривать первые пять сезонов «Игры престолов».

Оцените статью
Procodings.ru
Добавить комментарий