Платёжный виджет
Приём оплат с помощью платёжного виджета
Информация на странице может отличаться в зависимости от типа вашей учётной записи.
Выберите логин:
Платёжный виджет — один из самых простых способов подключить на своем сайте оплату товаров или услуг банковскими картами. На вашем сайте платёжный виджет будет выглядеть как кнопка Оплатить картой, при нажатии на которую появится окно для ввода реквизитов банковской карты плательщика. Для подключения платёжного виджета не нужно менять ваши процессы обработки заказа и взаимодействия с покупателями. Главная особенность платёжного виджета в том, что подключить его просто — без привлечения опытных специалистов и вне зависимости от того, на чём написан ваш сайт. Платёжный виджет гарантирует полную безопасность передачи карточных данных, при этом вам не понадобится проводить сертификацию сайта по стандарту PCI DSS.
Порядок подключения платёжного виджета:
Получите тестовый токен для проведения настройки.
Настройте и проверьте работу платёжного виджета в тестовой среде.
Настройте платёжный виджет для работы в продуктивной среде.
Получите тестовый токен для проведения настройки
Токен — это идентификатор вашего магазина, который используется при оплате через платёжный виджет. Выглядит как строка из букв и цифр длиной в несколько десятков символов, например: fhojfle6ssav32c6ao42bkcr54.
В отличие от логина и пароля токен не является секретным, с его помощью можно только регистрировать заказы. Выполнить какие-либо другие действия, которые могут представлять угрозу для вашего магазина или клиентов, с его помощью невозможно. Чтобы получить тестовый токен, зайдите через веб-интерфейс в тестовый личный кабинет с помощью логина с окончанием -operator. Далее перейдите в меню Настройки → Платёжный токен и нажмите Сгенерировать.
Настройте и установите платёжный виджет
Способ № 1. Через веб-интерфейс
Способ № 2. Через скрипт
Скрипт платёжного виджета — это небольшой код на языке JavaScript. В минимальной конфигурации шаблон выглядит так:
1<script
2 id="alfa-payment-script"
3 type="text/javascript"
4 src="https://testpay.alfabank.ru/assets/alfa-payment.js">
5</script>
6
7<div id="alfa-payment-button"
8 data-token='replace_this_to_merchant_token'
9 data-client-info-selector='.clientInfo'
10 data-amount-selector='.amount'
11 data-version='1.0'
12 data-order-number-selector='.orderNumber'
13 data-language='ru'
14 data-stages='1'
15 data-return-url='http://store.ru/success_url.html'
16 data-fail-url='http://store.ru/fail_url.html'
17 data-amount-format='.amountFormat'
18 data-description-selector='.order'
19></div>Для корректной работы скрипта настройте следующие обязательные параметры:
Вместо значения replace_this_to_merchant_token нужно вставить токен, полученный на предыдущем шаге.
Значение .clientInfo — это имя класса элемента HTML-страницы вашего сайта с информацией о клиенте (имя покупателя, email, телефон и т. д.). Имя класса прописывается в атрибуте class="Имя класса». Эта информация поможет вам идентифицировать заказ по плательщику.
Например, если на вашей странице есть такой элемент с именем покупателя,
<div class='element'> <label>Укажите Ваше Имя:</label> <input class='clientInfo' type='text' value=''> </div>то, добавив в скрипт имя класса этого элемента data-client-info-selector='.clientInfo', вы сможете увидеть в тестовом личном кабинете в дополнительных параметрах заказа имя покупателя.
Вы можете добавлять любые элементы типа data-add-<indicator>-selector='.<indicator>'. Эта информация будет отображаться в личном кабинете в параметрах транзакции.
Например, для передачи ФИО покупателя можно использовать следующую конструкцию.
- •
Добавьте поле в форму:
<label>Укажите ФИО:</label> <input class='clientFio' type='text' value=''>- •
Добавьте параметр в <div id="alfa-payment-button" ... >
data-add-fio-selector='.clientFio'А для передачи адреса электронной почты покупателя и онлайн-фискализации, если вы заключили соответствующее дополнительное соглашение, добавьте в скрипт имя класса этого элемента: data-email-selector='.clientEmail'. При этом на вашей странице в этом случае должен быть элемент, где указан email покупателя:
<div class='element'> <label>Укажите Ваш e-mail:</label> <input class='clientEmail' type='text' value=''> </div>При наличии двух указанных элементов в тестовом личном кабинете в дополнительных параметрах заказа вы увидите имя покупателя и его email:
Вместо значения .amount нужно вставить имя класса элемента страницы с суммой заказа. Если сумма заказа всегда одинаковая, то вместо data-amount-selector можно задать значение суммы в элементе data-amount в виде числа.
Пример, как указать фиксированнную сумму 585 рублей 90 копеек:
data-amount='585.90'Версия скрипта data-version — это фиксированное значение, которое настраивается один раз, в процессе работы менять не нужно.
вам необходимо указать значение:
data-version='1.0'Пример настроенного скрипта:
1<script 2 id="alfa-payment-script" 3 type="text/javascript" 4 src="https://testpay.alfabank.ru/assets/alfa-payment.js"> 5</script> 6 7<div id="alfa-payment-button" 8 data-amount='58590' 9 data-order-number-selector='.orderNumber' 10 data-version='1.0' 11 data-stages='1' 12 data-amount-format='kopeyki' 13 data-client-info-selector='.clientInfo' 14 data-token='fho5sfe6sq4v32c6ao42bacr54' 15></div>Скрипт работает в международной кодировке UTF-8. Если ваш сайт работает в кодировке Windows-1251, то необходимо добавить кодировку UTF-8.
Пример:
<script charset="utf-8" id="alfa-payment-script" type="text/javascript" src="https://testpay.alfabank.ru/assets/alfa-payment.js"> </script>Настроенный текст скрипта, необходимо разместить в html-коде страницы вашего сайта, на которой должна происходить оплата заказа. Скрипт состоит из двух блоков:
- •
- •— отвечает за отображение кнопки Оплатить картой. Сохраните его в той части html-кода Вашего сайта, где должна отображаться эта кнопка. Обычно визуальные элементы сайта располагаются между тегами … .
Все проведённые платежи вы можете отслеживать в тестовом личном кабинете.
Чтобы получать по email уведомления о проведённых платежах, свяжитесь со службой поддержки банка и попросите включить соответствующую настройку: для тестовой среды — acquiring@alfabank.ru, для продуктивной среды — esupport@alfabank.ru.
Дополнительные настройки скрипта
Выбор вида платежа: одностадийный или двухстадийный. Для этого используйте элемент data-stages. При значении data-stages='1' применяется одностадийная схема, при data-stages='2'- двухстадийная схема — она используется по умолчанию.
Выбор языка платёжной страницы. Для этого используйте элемент data-language. По умолчанию используется значение «ru» — русский язык (data-language='ru'). Список поддерживаемых языков: «en» — английский язык, «ua» — украинский язык, «de» — немецкий язык, «fr» — французский язык, «es» — испанский язык, «kz» — казахский язык. Также можно использовать настройку языка с вашего сайта, если язык задаётся аналогичными кодами — укажите класс элемента в параметре data-language-selector.
Работа с номером заказа, формируемым на стороне магазина. По умолчанию система берёт значение номера заказа со страницы. Для его передачи вам нужно вставить в скрипт элемент data-order-number-selector с указанием в нём класса элемента номера заказа. Например, data-order-number-selector='.order'. Если у вас на странице такой элемент отсутствует, свяжитесь со службой поддержки банка и попросите включить настройку «Система генерирует номер заказа». Контакты для тестовой среды — acquiring@alfabank.ru, для продуктивной среды — esupport@alfabank.ru.
Выбор формата суммы заказа. По умолчанию система считает, что сумма указывается в рублях без указания копеек. Если вы хотите использовать формат в рублях с указанием копеек, добавьте элемент data-amount-format='kopeyki'. Пробелы и другие нечисловые символы система игнорирует. Например, если указать значение «1234, 56» в рублях, получим сумму 1234,56 ₽, если указать значение «1234, 56» в копейках, получим сумму 1234,56 ₽, если указать значение «1234 рубля 56 копеек» в копейках, получим сумму 1234,56 ₽. Можно в явном виде указать, что используется формат в рублях без указания копеек — для этого добавьте элемент data-amount-format='rubli'. Пробелы и другие нечисловые символы система игнорирует. Например, если указать значение «1234», получим сумму 1234,00 ₽, если указать значение «1234 рубля», получим сумму 1234,00 ₽.
Передача описания заказа. Для этого добавьте в скрипт элемент data-description-selector в случае работы с классом элемента описания заказа, или data-description в случае работы с фиксированным значением этого параметра. Эта информация поможет вам использовать функционал онлайн-фискализации банка. Пример: data-description-selector='.order', data-description='Самый вкусный торт'.
Настройка текста на кнопке оплаты. Для этого используйте элементы data-button-text='текст на кнопке'. Если элемент отсутствует, то на кнопке будет фраза «Оплатить по карте».
Страницы, которые отображаются в окне виджета при успешной и неуспешной оплате. В элементе data-return-url укажите адрес ссылки на страницу, которая открывается при успешной оплате. В элементе data-fail-url укажите адрес ссылки на страницу, которая открывается при неуспешной оплате.
Перенаправление на заданные страницы при закрытии виджета. В элементе data-return-url укажите адрес ссылки на страницу, которая открывается при успешной оплате. В элементе data-fail-url укажите адрес ссылки на страницу, которая открывается при неуспешной оплате. В элементе data-redirect укажите значение 'true', чтобы перенаправить клиента на заданные страницы.
Пример расширенного варианта использования скрипта:
1<script
2 id="alfa-payment-script"
3 type="text/javascript"
4 src="https://testpay.alfabank.ru/assets/alfa-payment.js">
5</script>
6
7<div id="alfa-payment-button"
8 data-amount='58590'
9 data-order-number-selector='.orderNumber'
10 data-version='1.0'
11 data-amount-format='kopeyki'
12 data-client-info-selector='.clientInfo'
13 data-token='fho5sfe6sq4v32c6ao42bacr54'
14 data-description='Самый вкусный торт'
15 data-language='en'
16 data-stages='1'
17 data-email-selector='.clientEmail'
18></div>Проверка работы платёжного виджета
Зайдите на ваш сайт, перейдите на страницу, где вы ранее разместили код платёжного виджета и нажмите кнопку Оплатить картой. Должно появиться окно платёжной формы. Проверьте, что в платёжной форме сумма заказа отображается корректно. Проведите проверочный платёж по заказу. Убедитесь, что в тестовом личном кабинете вы видите все нужные вам параметры.
Если вы не видите кнопки Оплатить картой на странице оплаты заказа, откройте html-код страницы оплаты заказа и проверьте присутствие в нём скрипта платёжного виджета, корректно ли он вставлен и корректно ли в нём указаны элементы.
Если в окне платёжного виджета с полями для ввода банковской карты некорректно отображается сумма, возможен один из вариантов ошибки:
- •
если сумма в 100 раз больше, вероятнее всего, сумма на странице заказа указана вместе с копейками, а в настройке data-amount-format указан формат «rubli»;
- •
если сумма не совпадает, но отличие не кратно 100, то либо неверно указано название поля с суммой, либо в поле с суммой на странице оплаты попадают другие цифры, не относящиеся к самой сумме.
Настройка платёжного виджета для работы в продуктивной среде
Когда вы завершите тестирование работы платёжного виджета на своём сайте и заключите договор с Альфа-Банком, нужно будет донастроить скрипт платёжного виджета для работы в продуктивной среде.
Для этого:
- •
получите токен в продуктивном личном кабинете и пропишите его в параметре data-token. Для входа в кабинет используйте логин и пароль, полученные при заключении договора;
- •
измените параметр src="https://testpay.alfabank.ru/assets/alfa-payment.js" на src="https://pay2.alfabank.ru/assets/alfa-payment.js