В последнее время я играл со 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. Если вам понравилось это и вы хотите получать уведомления, когда я напишу другие вещи, вам следует подписаться на мою рассылку!