Министерство образования и науки Российской Федерации
Министерство образования Саратовской области
Национальный исследовательский Саратовский государственный университет имени Н.Г. Чернышевского
Саратовский областной институт развития образования
Комитет по информатизации Саратовской области
Комитет по образованию администрации муниципального образования «Город Саратов»
Автономная некоммерческая организация «Информационные технологии в образовании»
Автономная некоммерческая организация «Научно-исследовательский центр «Образование. Качество. Отрасль»»
IX Всероссийская (с международным участием) научно-практическая конференция
«Информационные технологии в образовании»
«ИТО-Саратов-2017»
2-3 ноября 2017 года, г. Саратов

Интеграция платежных систем при обучении разработке Web приложений

Федеральное государственное бюджетное образовательное учреждение высшего образования "Саратовский национальный исследовательский государственный университет имени Н.Г. Чернышевского"
Рассмотрено расширение возможностей обучения разработки Web приложений на основе интеграции основного функционала платежных систем.

В учебной деятельности у студента при создании Web приложения, в особенности связанного с областью e-commerce [1], может возникнуть желание сделать его более приближенным к реальности, за счет добавления возможности совершения покупок в интернете, то есть интеграции в это приложение платежной системы.

Одним из способов встраивания платежной системы в приложение является использование возможностей поставщика платежных услуг. Поставщик платежных услуг (Payment service provider, PSP) [2] – предлагает интернет-услуги магазинам для приема электронных платежей различными способами оплаты. Как правило, они используют программное обеспечение в качестве модели обслуживания и образуют единый платежный шлюз для своих клиентов (продавцов) для нескольких способов оплаты. В свою очередь платежный шлюз (Payment gateway) [2] – это коммерческая услуга, предоставляемая поставщиком услуг приложений e-commerce [1] которая разрешает обработку кредитных карт или прямых платежей для электронного бизнеса, интернет-магазинов. Платежный шлюз облегчает транзакцию платежа путем передачи информации между платежным порталом (например, веб-сайтом, мобильным телефоном или службой интерактивного голосового ответа) или банком-эквайером.

На сегодняшний день популярны следующие платежные шлюзы: PayPal / Braintree, Stripe и Square.

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

  

Рис. 1. Схема работы платежного шлюза

На рис. 1 представлена схема работы Braintree, а цифрами обозначены этапы. Так на 1 этапе Клиент делает запрос на получение client token с нашего сервера (осуществляется с использование client SDK). На 2 этапе сервер генерирует client token и отправляет его клиенту (осуществляется с использование server SDK). На 3 этапе client SDK отправляет платежную информацию клиента на сервер Braintree, который в ответ возвращает payment method nonce. На 4 этапе клиент отправляет на наш сервер payment method nonce. На 5 завершающем этапе наш сервер использую полученную информацию от клиента используя server SDK создает транзакцию.

Глядя на схему можно определить шаги интеграции платежной системы в web приложение:

1.    Интеграция на UI client SDK.

2.    Интеграция на backend server SDK и его конфигурирование.

3.    Создание sandbox аккаунта в системе Braintree.

 Интеграция на UI client SDK. Braintree предоставляет следующий набор client SDKs: под Android, IOS, JavaScript. Нас интересует третий вариант, так мы интегрируем в Webприложение. Разместив JS скрипт на html страннице, мы получим следующий результат. На рис. 2 пример верстки со скриптом.

   

Рис. 2. Пример html странницы с javascript кодом

Интеграция на backend server SDK и его конфигурирование. Braintree предоставляет следующий набор server SDKs: под Java, .Net, Node.js, PHP, Python, Ruby. Нас интересует вариант под Java. Для нам нужно загрузить библиотеку это мы можем сделать либо скачав с сайта jar либо используя maven подтянуть зависимость. На рис. 3 пример описание зависимости для maven.

  

Рис. 3. Пример определения зависимости в Maven

Теперь нам нужно написать код конфигурации среды с API credentials. На рис. 4 пример кода. Где переменные "your_merchant_id", "your_public_key", "your_private_key – это переменные, получаемые из sandbox аккаунта.

  

Рис. 4. Конфигурирование среды с использованием API Credentials

Далее нам необходимо написать отправку сгенерированного token клиенту. На рис 5. пример кода.

  

Рис. 5. Пример кода генерации и отправки token клиенту

Теперь написать код на получение payment method nonce и использование его для проведения транзакции. На рисунках 6 и 7 пример кода.

  

Рис. 6. Пример кода получения payment method nonce от клиента

  

Рис. 7. Пример кода создания и проведения транзакции

Система Braintreeв режиме sandbox не работает с настоящими кредитными картами. Для тестирования на сайте [3] имеются наборы данных для тестирования. На рис. 8 пример таблицы с данными банковских карт.

  

Рис. 8. Пример тестовых банковских данных

Создание sandbox аккаунта в системе Braintree. Переходим на сайт Braintree и регистрируем аккаунт. На рис. 9 пример формы регистрации.

  

Рис. 9. Форма регистрации sandbox аккаунта

На рис. 10 пример страницы с данными для конфигурирования сервера.

  

Рис. 10. Страница с данными sandbox аккаунта

Таким образом Braintree предоставляет удобные возможности для интеграции платежной системы в web приложение и не только. А также режим песочницы для проведения тестовых платежей. Все это становится интересным решением для студентов при разработки учебного приложения.

Список использованных источников
  1. Юрасов А.В. Электронная коммерция: Учеб. Пособие. – М.:Дело, 2003. – 480 с. ISBN 5-7749-0320-6.
  2. What Is A Payment Gateway & Its Role In Ecommerce? [Электронный ресурс]. – Режим доступа: https://www.bigcommerce.com/ecommerce-answers/what-is-a-payment-gateway-and-what-is-its-role-in-ecommerce/ – Дата обращения: 01.10.2017.
  3. Страницы с тестовыми данными банковских карт и не только [Электронный ресурс]. – Режим доступа: https://developers.braintreepayments.com/reference/general/testing/java – Дата обращения: 01.10.2017.
Вид представления доклада  Устное выступление и публикация
Ключевые слова  Разработка Web приложений, e-commerce, платежные системы.

В статусе «Черновик» Вы можете производить с тезисами любые действия.

В статусе «Отправлено в Оргкомитет» тезисы проходят проверку в Оргкомитете. Статус «Черновик» может быть возвращен тезисам либо если есть замечания рецензента, либо тезисы превышают требуемый объем, либо по запросу участника.

В статусе «Рекомендован к публикации» тезис публикуется на сайте. Статус «Черновик» может быть возвращен либо по запросу участника, либо при неоплате публикации, если она предусмотрена, либо если тезисы превышают требуемый объем.

Статус «Опубликован» означает, что издана бумажная версия тезиса и тезис изменить нельзя. В некоторых крайне редких ситуацих участник может договориться с Оргкомитетом о переводе тезисов в статус «Черновик».

Статус «Отклонен» означает, что по ряду причин, которые указаны в комментариях к тезису, Оргкомитет не может принять тезисы к публикации. Из отклоненных тезис в «Черновики» может вернуть только Председатель программного или председатель оргкомитета.