Шаблоны страниц оплаты

Нет необходимости тратить время и ресурсы на изучение и техническую реализацию сценариев оплаты. Мы сделали это за вас! Просто выберите нужные опции, а разработанные нами библиотека Payture.js и страницы оплаты адаптируются под любые нужды.

Использование библиотеки Payture.js позволяет Продавцу упростить процесс работы с шаблонами при проведении оплаты на стороне платежного шлюза.

Библиотека содержит всю необходимую функциональность для корректного сбора и отправки данных банковской карты Покупателя при оплате и привязке карты. Она используется в шаблонах оплаты, привязки карт и странице возврата на стороне шлюза в интерфейсах Payture InPay и Payture eWallet.

Все наши шаблоны являются адаптивными, поэтому они отображаются одинаково хорошо у всех пользователей вне зависимости от устройства и разрешения экрана.

Подготовка к работе с библиотекой
Вставьте в HTML код своей страницы оплаты следующие скрипты:
Код скопирован!

    <script type="text/javascript" src="/Templates/_Resources/js-min/payture.min.js"></script>
    <script type="text/javascript" src="/Templates/_Resources/js-min/payture-helper-utils.min.js"></script>

    /* при использовании мобильных методов оплаты, потребуются */

    <script type="text/javascript" src="/Templates/_Resources/js-min/apple-pay.ext-4.0.js"></script>

    <script type="text/javascript" src="https://pay.google.com/gp/p/js/pay.js"></script> 
    <script type="text/javascript" src="/Templates/_Resources/js-min/google-web-pay.ext-4.0.js"></script>

    <script type="text/javascript" src="/Templates/_Resources/3DPartyUtils/jquery-3.4.1.min.js"></script>
    <script src="https://d16i99j5zwwv51.cloudfront.net/sdk_library/us/prd/ops/pc_gsmpi_web_sdk.js"></script>
    <script type="text/javascript" src="/Templates/_Resources/js-min/samsung-pay.ext-4.0.js"></script>
            

Готовые платежные шаблоны

Для того чтобы максимально упростить процесс интеграции, мы разработали готовые технические реализации платежных шаблонов, подходящие под самые разные сценарии оплаты.

Стандартные шаблоны

Интерфейс InPay
Интерфейс eWallet

Для простого подключения скрипта для шаблона оплаты по карте с параметрами по умолчанию используйте функцию:

Код скопирован!

    $ph.ready(function(){
        Payture.InPay({
            use_3ds2: {use_3ds2},
            use_3ds2_preauth: {use_3ds2_preauth}
        })
    });
                                  

Скрипт также поддерживает большое количество дополнительных параметров. Например, если Вы не хотите использовать автоматически определение банка при вводе номера карты, вызовите функцию с соответствующим параметром:

Код скопирован!

    $ph.ready(function(){
        Payture.InPay({
            use_3ds2: {use_3ds2},
            use_3ds2_preauth: {use_3ds2_preauth},
            CheckBins: false
        })
    });
                                    

Оплата с помощью Apple Pay, Google Pay, Samsung Pay, Yandex Pay

Интерфейс InPay
Интерфейс eWallet

Данный шаблон позволяет быстро и удобно оплачивать покупки в одно касание.

Чтобы подключить способы оплаты Apple Pay, Google Pay, Samsung Pay, Вам необходимо при вызове функции «InPay» указать соответствующие параметры:

Код скопирован!

    $ph.ready(function(){
        Payture.InPay({
            use_3ds2: {use_3ds2},
            use_3ds2_preauth: {use_3ds2_preauth},
            GoogleWebPay: true,
            ApplePay: true,
            SamsungPay: true,
            YandexPay: true
        })
    });
                                    

После установки шаблонов необходимо обратиться на support@payture.com для настройки терминалов.

Оплата с помощью сервиса "Единая Касса" (Wallet One)

Интерфейс InPay

Шаблон позволяет дополнительно использовать способы оплаты, которые поддерживаются платежным сервисом "Единая Касса".

Перечень доступных способов оплаты можно узнать на сайте walletone.com или написав нам на business@payture.com

Например, Вы можете принимать оплату со счета мобильного телефона или через Сбербанк Онлайн.

После установки шаблонов необходимо обратиться на support@payture.com для настройки терминалов.

Шаблоны для виджета

Интерфейс InPay

Данный шаблон позволяет настроить процедуру оплаты через интерфейс платежного виджета Payture.

Для инициализации скрипта для оплаты по карте с параметрами по умолчанию используйте функцию:

Код скопирован!

    $ph.ready(function(){
        Payture.InPay({
            use_3ds2: {use_3ds2},
            use_3ds2_preauth: {use_3ds2_preauth}
        })
    });
                                    

После установки шаблонов необходимо обратиться на support@payture.com для настройки терминалов.

Основные требования к шаблонам
Содержание файлов
Имена файлов
  • На странице оплаты должно присутствовать скрытое поле Key со значением {key}, в котором передаются параметры платежа.
  • HTML-код страницы должен содержать блок с текстом {error}, который выводится при возникновении ошибки. Блок с плейсхолдером {error} используется для вывода ошибок при не JSON типе ответа сервера. Блок с id="errorTop" используется для вывода ошибок при JSON типе ответа сервера.
  • На странице шаблона не должно быть ссылок, перенаправляющих пользователей на сторонние веб-сайты.
  • На странице шаблона запрещено использование внешних ресурсов, т.е. все изображения, файлы стилей и скриптов должны передаваться вместе со страницами шаблонов.
  • Дополнительные параметры платежа могут быть переданы вами при инициализации сессии в параметре DATA. Для вывода их на странице оплаты следует использовать запись {param}, где {param} – это имя передаваемого параметра в нижнем регистре.
  • Ссылки на используемые ресурсы (стили, изображения) должны иметь вид /Templates/{Key}/{File}, где {Key} – идентификатор продавца.
  • В случае использования нескольких шаблонов необходимо хранить все ресурсы в общей папке.
  • Возможно использование нескольких языков. В этих случаях вы передаете параметр {Language} в составе параметров DATA при инициализации сессии.
  • На странице оплаты должно присутствовать скрытое поле Key со значением {key}, в котором передаются параметры платежа.
  • HTML-код страницы должен содержать блок с текстом {error}, который выводится при возникновении ошибки. Блок с плейсхолдером {error} используется для вывода ошибок при не JSON типе ответа сервера. Блок с id="errorTop" используется для вывода ошибок при JSON типе ответа сервера.
  • На странице шаблона не должно быть ссылок, перенаправляющих пользователей на сторонние веб-сайты.
  • На странице шаблона запрещено использование внешних ресурсов, т.е. все изображения, файлы стилей и скриптов должны передаваться вместе со страницами шаблонов.
  • Дополнительные параметры платежа могут быть переданы вами при инициализации сессии в параметре DATA. Для вывода их на странице оплаты следует использовать запись {param}, где {param} – это имя передаваемого параметра в нижнем регистре.
  • Ссылки на используемые ресурсы (стили, изображения) должны иметь вид /Templates/{Key}/{File}, где {Key} – идентификатор продавца.
  • В случае использования нескольких шаблонов необходимо хранить все ресурсы в общей папке.
  • Возможно использование нескольких языков. В этих случаях вы передаете параметр {Language} в составе параметров DATA при инициализации сессии.

Подключить онлайн-платежи