В последнее время я играл со Stripe, чтобы увидеть, как работает сбор и обработка платежей. Stripe имеет исчерпывающую документацию и примеры, которые помогут вам начать работу.

Не будучи хорош в дизайне пользовательского интерфейса и обычно тратя слишком много времени на настройку вещей, чтобы они выглядели хорошо, я надеялся найти что-то, что позволило бы мне этого избежать. К счастью, я нашел - я нашел компонент response-stripe-checkout, который работает с React и дает вам приятный пользовательский интерфейс, как показано ниже:

Фронтенд обработан, теперь нам нужен бэкэнд для обработки платежей. Stripe предоставляет вам два типа ключей - публикуемый ключ (начиная с pk_), который вы используете в своем интерфейсе, и секретный ключ (начиная с sk_), который будет использоваться в вашем бэкэнде для обработки фактического платежа. Есть два набора этих ключей - один для тестирования, а другой для производства.

Репо react-express-stripe содержит пример реализации фронтенда и бэкэнда React для обработки платежей. Реализация бэкэнд-платежа проста - вы используете пакет stripe для создания нового платежа, передавая объект JSON, подобный этому:

Бэкэнд-реализация казалась идеальным кандидатом для реализации в качестве функций Azure вместо другого серверного узла, которым я должен управлять.

С помощью функций Azure вы можете делать кучу разных вещей, но в моем случае мне нужен только способ получить плату от внешнего интерфейса и использовать серверный пакет Stripe для создания платы. Функции Azure можно создавать как с помощью CLI, так и с портала Azure - поскольку это была довольно простая функция, я использовал портал. С помощью интерфейса командной строки вы также можете разрабатывать, тестировать и отлаживать свои функции локально.

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

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

Давайте начнем с создания новой функции - нажмите на элемент «Функции» на левой боковой панели, а затем на появившуюся ссылку «Новая функция»:

На следующем экране у вас есть возможность выбрать один из различных шаблонов функций - C #, JavaScript и функции, запускаемые HTTP, таймером, очередями, большими двоичными объектами и т. Д. В нашем случае мы хотим, чтобы функция была в Javascript и запускалась HTTP POST. запрос, который мы собираемся отправить из интерфейса.

Когда вы нажимаете на шаблон, вам будет предложено назвать свою функцию, а затем нажать кнопку «Создать», чтобы создать ее и открыть редактор кода. Вы можете скопировать / вставить приведенный ниже код внутри функции в редакторе.

Этот код настраивает пакет Stripe, передавая секретный ключ, а затем вызывает функцию create и передает тело, которое было передано функции. Body - это объект JSON, о котором я упоминал выше.

Если вы используете пример response-express-stripe, вам необходимо заменить значение PAYMENT_SERVER_URL в frontend/src/constants на URL-адрес функции - вы можете получить URL-адрес функции, нажав кнопку Получить URL-адрес функции в правом верхнем углу редактора. . URL-адрес выглядит так:

https://[FUNCTION_APP_NAME].azurewebsites.net/api/[FUNCTION_NAME]?code=[FUNCTION_KEY]

Вам также необходимо добавить в проект пакет Stripe - для этого нужно добавить package.json в функцию и запустить npm install из консоли Kudu. Во-первых, добавить файл в функцию так же просто, как щелкнуть ссылку «Просмотреть все файлы» в правой части редактора и нажать «Добавить», чтобы добавить проект. Вы можете создать новый package.json или просто использовать тот из примера. Дело в том, чтобы там был пакет Stripe. Когда у вас есть файл, вам нужно перейти в консоль Kudu, чтобы запустить npm install в папке функций. Вы можете получить доступ к консоли Kudu с https://[FUNCTION_APP_NAME].scm.azurewebsites.net и выбрать Консоль отладки- ›CMD в раскрывающемся меню. Наконец, перейдите в папку функции (например, home\site\wwwroot\[function_name]) и запустите npm install.

И последнее, что нам нужно сделать, это обновить CORS и разрешить вызов функции из вашего собственного домена или даже из локального хоста (убедитесь, что вы делаете это только для тестирования, а не для производства!).

Чтобы изменить настройки CORS для функции Azure, вы можете щелкнуть имя своего приложения-функции на левой боковой панели, затем щелкнуть вкладку «Функции платформы» и в разделе «API» щелкнуть CORS. Конструктор говорит сам за себя - просто введите или скопируйте / вставьте URL-адреса, которые вы хотите разрешить.

Вы можете запустить свой интерфейс прямо сейчас и протестировать процесс оплаты. Если вы развернете свою функцию на левой боковой панели и нажмете «Монитор», вы сможете получить журнал вызовов для своей функции. Или перейдите в панель управления Stripe, чтобы увидеть там платеж.

Спасибо за чтение!

Вы можете подписаться на меня в Твиттере и GitHub. Если вам понравилось это и вы хотите получать уведомления, когда я напишу другие вещи, вам следует подписаться на мою рассылку!