Начните работу с Braintree, используя приложение create-response-app и Express.js
Первоначально опубликовано: 5 октября 2018 г.
Я больше искал альтернативы Stripe для сравнения, чтобы увидеть, что было бы проще всего реализовать и что больше соответствовало бы тому, чего я пытаюсь в массовом порядке достичь в будущем.
Это «привет» для начала работы с Braintree с использованием Express на стороне сервера и React на фронтенде.
Предпосылки
Если вы следуете инструкциям, вам следует создать учетную запись Sandbox.
В этом руководстве будет использоваться приложение create-react-app и модуль npm, внесенный пользователем, чтобы отвлечься от времени, необходимого для установки.
Еще одна полезная ссылка идет с их веб-сайта для Node.js и JS. Хотя я буду избегать этого, это все же полезная ссылка.
Сейчас мы собираемся рассматривать этот проект как монорепозиторий, поэтому в корневом каталоге нам нужно создать подкаталог для внешнего интерфейса и каталог для сервера.
Сборка экспресс-сервера
mkdir server cd server yarn init -y yarn add express body-parser morgan cors dotenv braintree mkdir routes touch server.js .env .gitignore routes/index.js
.gitignore
Чтобы все было правильно, давайте просто быстро обновим наш файл, чтобы игнорировать node_modules и файл .env.
.env node_modules/
Здесь нам нужно обновить наш файл токенами песочницы, переданными нам из среды песочницы Braintree. Ключи и конфигурацию можно найти на панели инструментов Braintree:
BRAINTREE_MERCHANT_ID=<use_your_merchant_id> BRAINTREE_PUBLIC_KEY=<use_your_public_key> BRAINTREE_PRIVATE_KEY=<use_your_private_key>
Теперь мы можем использовать dotenv в нашем приложении для доступа к переменным и исключения их из нашей истории git.
server.js
Чтобы настроить главный сервер, обновите файл server.js, чтобы он выглядел так:
Этот файл server.js загрузит файл routes / index.js, который мы сейчас обновим.
маршруты / index.js
Теперь давайте обновим наш routes / index.js, чтобы настроить шлюз и настроить три маршрута - один для простого теста ping, другой для получения токена клиента и третий для совершения платежа:
Теперь, если мы запустим node server.js, наше приложение должно работать на порту 5000!
Мы можем запустить curl http: // localhost: 5000 / braintree с другого терминала, чтобы увидеть, что наш маршрут Braintree является нормальным ответом.
Теперь нам нужно настроить клиентскую часть.
Создание интерфейса React
create-react-app clientside cd clientside yarn add braintree-web braintree-web-drop-in-react axios
Обновление приложения
Перейдите в наш файл App.js и очистите его. Замените файл следующим:
Этот код является разновидностью вводного кода, который можно найти во введении Braintree Web Drop-in React Github.
Если мы запустим yarn start, мы должны загрузить приложение React на localhost, и вы должны увидеть следующее:
Если это так, отлично! Мы готовы катиться.
Совершение платежа
Следующее взято непосредственно из Краткого руководства по Node.js для Braintree.
Card number: 4111 1111 1111 1111 Expiry: 09/20 CVV: 400 Postal Code: 40000
Если мы введем и номер карты, и срок ее действия, этого должно хватить, чтобы добраться до конца пути! После вставки и совершения платежа наш интерфейс должен выглядеть следующим образом:
Открывая инструменты разработчика, мы даже можем проверить регистрируемый объект ответа, чтобы убедиться в нашем большом успехе!
Бинго!
Серверный терминал
Если мы проверим серверный терминал, мы сможем увидеть, как происходили события, благодаря тому, что Морган вел наш журнал:
Изображение выше может помочь нам полностью понять процесс. Когда наше веб-приложение загружается, мы делаем запрос GET, чтобы получить токен из /api/braintree/v1/getToken. Этот токен требуется, когда был сделан последний запрос на оплату. Запрос OPTIONS 204, который мы видим там, во-вторых, представляет собой предварительный запрос CORS, сделанный для обеспечения того, чтобы нам разрешили сделать вызов, и, наконец, POST 200 to /api/braintree/v1/sandbox является нашим успешным ответом после выполнения платежа.
Подтверждение
Если мы теперь вернемся к нашей панели инструментов Sandbox, то теперь мы увидим, что успешная транзакция была записана!
Очень круто. Мы просто перешли с нуля на оплату быстрее, чем можно сказать дихлордифенилтрихлорэтан.
Следующие шаги
Что дальше? Что мне нравится в Braintree, так это расширяемость пользовательского интерфейса. Хотя в этом случае мы использовали интерфейсный пакет, попробуйте создать свой собственный интерфейс для приема платежей!
Независимо от того, являетесь ли вы поклонником Braintree или Stripe, в конечном итоге зависит от вас и потребностей вашего бизнеса. Стоит изучить плюсы и минусы документации для разработчиков и ставки, чтобы решить, что лучше всего подходит для вашего конкретного варианта использования (или любой другой платежной платформы в этом случае).
Исходное сообщение: https://www.dennisokeeffe.com/blog/braintree-node-react
Репозиторий Git: https://github.com/okeeffed/hello-braintree
Глубина - это серия, в которой больше подробно рассказывается о проектах, чем в дружеской аналогичной серии «Привет».
