Сегодня в первой части я покажу интеграцию stripe в angular 7. Во второй части я покажу создание apis для chargebee в узле. Stripe используется для обработки платежей, а chargebee - для управления повторяющимися подписками для клиентов. Мы используем chargebee для управления подписками, потому что он предлагает больше функций по сравнению с полосными подписками.
Установка типов полос
Чтобы использовать типы для stripe v3, нам нужно установить определения типов stripe v3.
После установки определений типа полосы, чтобы использовать это в проекте angular, измените tsconfig.app.json, чтобы включить его в массив типов.
Добавить полосу в проект
Создайте учетную запись stripe на сайте stripe.com и перейдите к ключам разработки и API, чтобы получить доступный для публикации ключ.
Добавьте этот ключ в конфигурацию среды. Я называю этот ключ stripePublishKey.
Интегрировать полосу в угловой проект очень просто. Просто перейдите в index.html и используйте тег скрипта, чтобы включить библиотеку полос.
После всех вышеперечисленных шагов настройка чередования завершена. Теперь можно приступить к кодированию.
Stripe v3 требовал, чтобы мы динамически добавляли компоненты полосы на страницу для обеспечения соответствия PCI-DSS. Мы добавим несколько заполнителей для различных элементов, таких как номер карты, срок действия и CVV, чтобы мы могли вставить элементы.
Создайте новый компонент и внесите в HTML-файл следующие изменения.
На приведенном ниже снимке вы можете видеть, что заполнители обозначены с помощью идентификаторов card-number, card-expiry и card-cvc для номера карты, срока действия карты и cvc соответственно. Для имени держателя карты мы используем обычное поле ввода, так как оно не предусмотрено полосой. Мы также использовали сообщения об ошибках и стили с использованием классов полос. Вы можете использовать классы полос, чтобы стилизовать элементы в соответствии с вашими потребностями.
В файле .ts для компонента нам нужно создать элементы и привязать их к файлу html.
Сначала объявите переменные для различных компонентов и привяжите метод onChange.
Мы можем создавать элементы, используя elements.create и передавая имя элемента полосы, а затем монтируя элемент в пользовательском интерфейсе, идентифицированном id. Кроме того, мы добавляем прослушиватель событий для прослушивания изменений, и если будет недопустимое значение, будет выдано сообщение об ошибке.
Для оплаты мы используем полосу. Для этого нам понадобится жетон полосы. Мы можем использовать метод createToken для создания токена. Нам нужно передать элемент cardNumber в метод. Также можно передать необязательные значения для создания токена.
В этом случае cardHolderName был передан как необязательный объект. После выполнения этого метода мы успешно получим токен полосы.
На этом мы подошли к концу учебной части 1. В следующей части мы рассмотрим создание API-интерфейса chargebee в node и интеграцию с stripe. Надеюсь, это будет вам полезно. Спасибо, что прочитали это.
