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

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

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

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

Подготовка к работе с библиотекой

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

<script type="text/javascript" src="/Templates/jquery.11.min.js" ></script>
<script type="text/javascript" src="/Templates/jquery.migrate.min.js" ></script>
<script type="text/javascript" src="/Templates/device.min.js" ></script>
<script type="text/javascript" src="/Templates/payture.js" ></script>

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

Для простого подключения скрипта для шаблона оплаты по карте с параметрами по умолчанию используйте функцию:
Payture.InPay();
Скрипт также поддерживает большое количество дополнительных параметров. Например, если Вы не хотите использовать автоматически определение МПС при вводе номера карты, вызовите функцию с соответствующим параметром:
Payture.InPay({
	DetectCardType : false
});
Скачать шаблоны InPay
Для подключения скрипта для шаблона привязки карты со стандартными параметрами используйте функцию:
Payture.eWalletAdd();
Для подключения скрипта для шаблона оплаты по карте используйте функцию «eWalletPay». Вы можете настраивать поведение страницы, подключая дополнительные опции. Например, если Вы не хотите определять устройство, которым пользуется Покупатель, вызовите функцию с соответствующим параметром:
Payture.eWalletPay({
	DetectDevice : false
});
Скачать шаблоны eWallet
default

Мобильные шаблоны

Чтобы подключить мобильные шаблоны, вам необходимо адаптировать верстку под мобильные устройства, и при вызове функции «InPay» указать параметры «IsMobile», «DetectDevice» и переназначить параметр «Data» (если был изменен набор полей для ввода):

Payture.InPay({
	Data : {
		CardNumber : $("input[name=CardNumber]"),
		EMonth : $("input[name=EMonth]"),
		EYear : $("input[name=EYear]"),
		CardHolder : $("input[name=CardHolder]"),
		SecureCode : $("input[name=SecureCode]")
	},
	IsMobile : true,
	DetectDevice : false
});
Скачать мобильные шаблоны InPay

Для использования мобильных шаблонов оплаты, при вызове функции «eWalletPay» необходимо указать параметры «IsMobile», «DetectDevice» и переназначить параметр «Data» (если был изменен набор полей для ввода):

Payture.eWalletPay({
	Data : {
		CardId : $("select[name=CardId]"),
		CardNumber : $("input[name=CardNumber]"),
		EMonth : $("input[name=EMonth]"),
		EYear : $("input[name=EYear]"),
		CardHolder : $("input[name=CardHolder]"),
		SecureCode : $("input[name=SecureCode]"),
		AddCard : $("input[name=AddCard]")
	},
	IsMobile : true,
	DetectDevice : false
});

Функция «eWalletAdd» для мобильных шаблонов привязки карты использует аналогичные настройки, но в параметре «Data» не нужно назначать поля «CardId» и «AddCard».

Скачать мобильные шаблоны eWallet
default

JSON шаблоны

Если вы хотите описать уникальный сценарий поведения страницы в случае успешной и неуспешной оплаты, вы можете использовать JSON шаблоны. При этом в качестве параметров необходимо передать тип шаблона «Type» со значением «JSON», а также описание поведение страницы с помощью функций «onSuccess» и «onError»

Payture.InPay({
	Type : "JSON",
	onSuccess : function (redirectUrl) {
		// redirectUrl - адрес возврата пользователя
	},
	onError : function (errorCode, canRetry, redirectUrl, key) {
		// errorCode - код ошибки
		// canRetry - возможность новой попытки оплаты
		// redirectUrl - адрес возврата пользователя
	}
});
Скачать JSON шаблоны InPay

Для того, что бы описать нестандартный сценарий поведения страницы в случае успешной и неуспешной оплаты, вы можете использовать JSON шаблоны. При этом в качестве параметров необходимо передать тип шаблона «Type» со значением «JSON», а также описание поведение страницы с помощью функций «onSuccess» и «onError»

Payture.eWalletPay({
	Type : "JSON",
	onSuccess : function (redirectUrl) {
		// redirectUrl - адрес возврата пользователя
	},
	onError : function (errorCode, canRetry, redirectUrl, key) {
		// errorCode - код ошибки
		// canRetry - возможность новой попытки оплаты
		// redirectUrl - адрес возврата пользователя
	}
});

Функция «eWalletAdd» для JSON шаблонов привязки карты используются аналогичные настройки.

Скачать JSON шаблоны eWallet
default

MasterPass шаблоны

Для активирования кнопки «Оплата с MasterPass» на странице оплаты неоходимо добавить в HTML код страницы ссылку с идентификатором «masterPass»:

<a href="" id="masterPass" >
	<img alt="Wallet Checkout" src="https://www.mastercard.com/mc_us/wallet/img/ru/RU/mcpp_wllt_btn_chk_160x037px.png" >
</a>

А также при вызове функции «InPay» указать параметр «MasterPass». По умолчанию оплата проходит без ввода CVV, но если вы хотите сделать ввод CVV обязательным необходимо добавить параметр «MasterPassUseCVV».

Payture.InPay({
	MasterPass : true,
	MasterPassUseCVV : true
});
Скачать MasterPass шаблоны InPay

Для подключения оплаты с помощью MasterPass на странице оплаты неоходимо добавить в HTML код страницы ссылку с идентификатором «masterPass»:

<a href="" id="masterPass" >
	<img alt="Wallet Checkout" src="https://www.mastercard.com/mc_us/wallet/img/ru/RU/mcpp_wllt_btn_chk_160x037px.png" >
</a>

А также при вызове функции «eWalletPay» указать параметры «MasterPass» и «MasterPassUseCVV». Для интерфейса eWallet ввод СVV является обязательным.

Payture.eWalletPay({
	MasterPass : true,
	MasterPassUseCVV : true
});
Скачать MasterPass шаблоны eWallet
mp

Перевод с карты на карту

Для того, чтобы организовать у себя на сайте переводы с карты на карту (P2P-переводы), необходимо добавить в HTML код страницы поле для ввода номера карты получателя

<input type="text" name="CardTo" placeholder="Номер карты получателя" >

При вызове функции необходимо переопределить параметр «Data», добавив поле «CardTo»:

Payture.InPay({
	Data : {
		CardNumber : [$("input[name=CardNumber]")],
		EMonth : $("input[name=EMonth]"),
		EYear : $("input[name=EYear]"),
		CardHolder : $("input[name=CardHolder]"),
		SecureCode : $("input[name=SecureCode]"),
		CardTo : $("input[name=CardTo]")
	}
});
Скачать P2P шаблоны InPay

Для того, чтобы организовать у себя на сайте P2P-переводы (переводы с карты на карту), необходимо добавить в HTML код страницы оплаты поле для ввода номера карты получателя

<input type="text" name="CardTo" placeholder="Номер карты получателя" >

При вызове функции необходимо переопределить параметр «Data», добавив поле «CardTo»:

Payture.eWalletPay({
	Data : {
		CardId : $("select[name=CardId]"),
		CardNumber : $("input[name=CardNumber]"),
		EMonth : $("input[name=EMonth]"),
		EYear : $("input[name=EYear]"),
		CardHolder : $("input[name=CardHolder]"),
		SecureCode : $("input[name=SecureCode]"),
		AddCard : $("input[name=AddCard]"),
		CardTo : $("input[name=CardTo]")
	}
});
Скачать P2P шаблоны eWallet
p2p

Интернет-Банкинг

Вы можете предложить своему покупателю дополнительный способ оплаты - через личный кабинет его банка. Для этого в HTML коде страницы оплаты в контейнер «paymentType» добавить ссылку с атрибутом «rel» со значением «1».

<div id="paymentType">
	<a href="#inbox" rel="1" target="_blank">Интернет-банкинг</a>
</div>

При вызове функции «InPay» необходимо добавить параметры «Type» со значением «JSON» и «Inbox»:

Payture.InPay({
	Type : "JSON",
	Inbox : true
});
Скачать Inbox шаблоны InPay

Наша система поддерживает дополнительный способ оплаты - через личный кабинет банка Покупателя. Чтобы подключить его в HTML коде страницы оплаты в контейнер «paymentType» добавить ссылку с атрибутом «rel» со значением «1».

<div id="paymentType">
	<a href="#inbox" rel="1" target="_blank">Интернет-банкинг</a>
</div>

При вызове функции «eWalletPay» необходимо добавить параметры «Type» со значением «JSON» и «Inbox»:

Payture.eWalletPay({
	Type : "JSON",
	Inbox : true
});
Скачать Inbox шаблоны eWallet
ib
  • На странице оплаты должно присутствовать скрытое поле Key со значением {key}, в котором передаются параметры платежа
  • HTML-код страницы должен содержать блок с текстом {error}, который выводится при возникновении ошибки
  • На странице шаблона не должно быть ссылок, перенаправляющих пользователей на сторонние вебсайты
  • На странице шаблона запрещено использование внешних ресурсов, т.е. все изображения, файлы стилей и скриптов должны передаваться вместе со страницами шаблонов
  • Дополнительные параметры платежа могут быть переданы вами при инициализации сессии в параметре DATA. Для вывода их на странице оплаты следует использовать запись {param}, где {param} – это имя передаваемого параметра в нижнем регистре
  • Ссылки на используемые ресурсы (стили, изображения) должны иметь вид /Templates/{Key}/{File}, где {Key} – идентификатор продавца
  • В случае использования нескольких шаблонов желательно хранить все ресурсы в общей папке
  • Возможно использование нескольких типов шаблонов или языков. В этих случаях вы передаете параметры {TemplateTag}, {Language} в составе параметров DATA при инициализации сессии.

Название шаблона должно формироваться следующим образом:

[{API}]{Key}-{Type}-{TemplateTag}-{Language}.template

[MERCHANT]Merchant-Pay-Default-Default.template
[CUSTOMERS]VWMerchant-Pay-Default-Default.template

ПараметрОписаниеЗначение
{API}Тип используемого интерфейсаMERCHANT — для интерфейса InPay
CUSTOMERS — для интерфейса eWallet
{Key}Идентификатор Продавца в системепо умолчанию Merchant
{Type}Тип шаблонаPay — для шаблона оплаты
Add — для шаблона привязки карты
Return — для страницы возврата
{TemplateTag}Название шаблона, если используется несколько шаблоновпо умолчанию Default
{Language}Язык шаблона, если используется шаблоны на разных языкахпо умолчанию Default
ru меньше больше руб.