# Пользовательский интерфейс

# Платежная страница

Платежная страница Mandarinpay имеет адаптивный дизайн, содержит ваш логотип, а также информацию о платеже, переданную вами в API-запросе.

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

Платежная страница локализована на русском и английском языках. Язык выбирается автоматически в зависимости от настроек браузера пользователя.

Платежная страница на русском языке

Payment Page Desktop - Russian

Платежная страница на английском языке

Payment Page Desktop - English

Мобильная верстка платежной страницы

Payment Page Mobile - Russian&English

# Mandarin Custom Pay

# Встраиваемая форма оплаты

Встраиваемая форма оплаты Mandarin Custom Pay позволяет осуществить полноценную интеграцию в ваш интерфейс, при этом для вас отсутствуют требования по соответствию стандарту безопасности банковских карт PCI DSS.

Mandarin Custom Pay представляет собой форму с полями, которые на самом деле являются отдельными страницами в iframe. Соответственно, вы можете стилизовать всё, что окружает поля iframe.

Логически такая форма состоит из двух частей:

  • html-код с набором тегов div, содержащих классы mandarinpay-field-card-number, mandarinpay-field-card-holder, mandarinpay-field-card-expiration и mandarinpay-field-card-cvv. Внутри тегов div помещаются поля iframe.

  • js-скрипт, запускающий процесс установки полей iframe и обрабатывающий нажатие на кнопку платежа.

Для начала работы необходимо подключить <script src="https://secure.mandarinpay.com/api/hosted.js"></script>, затем вызвать mandarinpay.hosted.setup, передав ему селектор формы, а также функции для вызова при успешном запросе, либо ошибке. В обработчике события нажатия на кнопку платежа следует вызвать return mandarinpay.hosted.process(this); (вместо this можно использовать селектор формы).

В качестве operationId необходимо передать значение, полученное в поле jsOperationId синхронного ответа.

По мере взаимодействия формы с пользователем тегам div могут быть присвоены классы mandarinpay-field-state-error, mandarinpay-field-state-focused и mandarinpay-field-state-valid.

Базовый вариант внешнего вида:

Mandarin Custom Pay

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

При переносе комиссии на плательщика, в интерфейсе Custom Pay нужно указывать не "Комиссия Mandarin", а просто "Комиссия", поскольку Custom Pay - это White label решение. Например, "Сумма к оплате: 3060.0 руб. (в т.ч. комиссия с плательщика 60.0 руб.)".

Код формы

<form id="form-hosted-pay">
  <div style="margin: 10px; padding: 10px; border: 1px solid gray">
    Card Number:
    <div class="mandarinpay-field-card-number hosted-field"><div class="glyphicon glyphicon-check"></div></div>
    Card Holder:
    <div class="mandarinpay-field-card-holder hosted-field"><div class="glyphicon glyphicon-check"></div></div>
    Card Expiration:
    <div class="mandarinpay-field-card-expiration hosted-field"><div class="glyphicon glyphicon-check"></div></div>
    CVV:
    <div class="mandarinpay-field-card-cvv hosted-field"><div class="glyphicon glyphicon-check"></div></div>
    <br/>
    <a href="#" onclick="return mandarinpay.hosted.process(this);" class="btn btn-default">Оплатить</a>
  </div>
</form>

Инициализация (подключение) скрипта

<script>
mandarinpay.hosted.setup("#form-hosted-pay", {
  operationId: "9874694yr87y73e7ey39ed80",
  onsuccess: function(data) {
    alert("Success, id: " + data.transaction.id);
  },
  onerror: function(data) {
    alert("Error: " + data.error);
  }
});
</script>

CSS для полей

.hosted-field
{
    background: #f0f0f0;
    height: 40px;
    padding: 5px;
    border: 1px solid gray;
    border-radius: 10px;
}

.hosted-field {
    position: relative;
}

.hosted-field .glyphicon {
    visibility: hidden;
    position: absolute;
    right: 5px;
    top: 5px;
    color: green;
    float: right;
}

.mandarinpay-field-state-error
{
    background: #fff0f0;
    border: 1px solid #900000;
}

.mandarinpay-field-state-focused
{
    background: #ffffff;
    border: 1px solid yellowgreen;
}

.mandarinpay-field-state-valid {
    background: #c0ffc0 !important;
    border: 1px solid green !important;
}

.mandarinpay-field-state-valid  .glyphicon{
    visibility: visible;
}

# Стилизация текстовых полей

Стилизация осуществляется посредством добавления соответствующего поля в объект, передаваемый mandarinpay.hosted.setup. Для изменения доступны placeholder и CSS-стили.

Пример стилизации

mandarinpay.hosted.setup("#form-hosted-pay",
{
    onsuccess: function(data) {alert("Success, id: " + data.transaction.id);},
    onerror: function(data) {alert("Error: " + data.error);},
    fields:
    {
        "card-number": {
            settings: {
                placeholder: "НОМЕР КАРТЫ",
                styles: {
                    "font-size": "20px",
                    "font-family": "Helvetica",
                    "color": "#0000c0"
                },
                placeholderStyles: {
                    "color": "pink"  
                },
            }
        }
    }
});
  • color в формате #000000.
  • font-size с единицами px и pt.
  • font-family (можно использовать запятые и кавычки).
  • font-style.

# Интерактивный платеж как пример реализации Mandarin Custom Pay

Интерактивный платеж использует токен карты. В отличие от обычного реккурентного платежа, в случае интерактивной оплаты пользователь вводит CVV/CVC-код. Для реализации формы ввода CVV/CVC-кода вы должны использовать технологию Mandarin Custom Pay.

Таким образом, вы можете использовать токен полных карточных данных, даже если он находится в статусе payout-only и для платежа в схеме одностадийной оплаты, и для авторизации в схеме двухстадийной оплаты.

Интерактивный платеж может быть реализован двумя способами:

  • interactive. Платеж будет осуществлен в интерактивном режиме независимо от статуса токена. Для этого необходимо передать "interactive": true.

  • allowinteractive. Платеж будет произведен с помощью автосписания (реккурентный платеж). Если токен находится в статусе payout-only, то он будет осуществлен в интерактивном режиме. Для этого необходимо передать "allowinteractive": true.

Платеж происходит в два этапа:

  1. Инициация (в интерактивном режиме через API).

  2. Создание транзакции (с применением Mandarin Custom Pay).

# Инициация

В качестве примера рассмотрим запрос платежа по сохраненной карте в интерактивном режиме, где "interactive": true.

Для запроса платежа по сохраненной карте без ввода CVV/CVC-кода и без прохождения 3-D Secure, где "allowinteractive": true, необходимо использовать те же параметры.

В синхронном ответе содержится id платежа, и jsOperationId для создания транзакции через Mandarin Custom Pay.

Запрос interactive платежа для одностадийной оплаты

POST https://secure.mandarinpay.com/api/transactions
{
	"payment": {
		"action": "pay",
		"orderId": "your_unique_order_id",
		"price": "1000.00"
	},
	"target": {
		"card": "0eb51e74-e704-4c36-b5cb-8f0227621518"
	},
	"interactive": true,
	"customValues": [
		{"name": "parameter to save and show 0", "value": "0"},
		{"name": "parameter to save and show 1", "value": "1"}
	],
	"metadata": {
		"parameter to callback and not to show 0": "0",
		"parameter to callback and not to show 1": "1"
	},
	"urls": {
		"callback": "http://...",
		"return": "http://..."
	}
}

Запрос interactive авторизации для двухстадийной оплаты

POST https://secure.mandarinpay.com/api/transactions
{
	"payment": {
		"action": "preauth",
		"orderId": "your_unique_order_id",
		"price": "1000.00"
	},
	"target": {
		"card": "0eb51e74-e704-4c36-b5cb-8f0227621518"
	},
	"interactive": true,
	"customValues": [
		{"name": "parameter to save and show 0", "value": "0"},
		{"name": "parameter to save and show 1", "value": "1"}
	],
	"metadata": {
		"parameter to callback and not to show 0": "0",
		"parameter to callback and not to show 1": "1"
	},
	"urls": {
		"callback": "http://...",
		"return": "http://..."
	}
}

Ответ в случае успешной инициации (200 ОК)

{
	"id": "43913ddc000c4d3990fddbd3980c1725",
	"jsOperationId": "9874694yr87y73e7ey39ed80"
}

Ответ в случае, если инициация не произошла (400 Bad request)

{
	"error": "Invalid request"  
}

# Создание транзакции

Полученный в синхронном ответе jsOperationId в рамках предыдущего запроса необходимо использовать для создания транзакции через Mandarin Custom Pay. В этом случае необходимо передать только значение CVV. Передача остальных карточных данных не требуется.

Детальное описание находится в соответствующем разделе.

Создание транзакции через Mandarin Custom Pay

<form id="form-hosted-pay">
  <div style="margin: 10px; padding: 10px; border: 1px solid gray">
    CVV:
    <div class="mandarinpay-field-card-cvv hosted-field"><div class="glyphicon glyphicon-check"></div></div>
    <br/>
    <a href="#" onclick="return mandarinpay.hosted.process(this);" class="btn btn-default">Оплатить</a>
  </div>
</form>
<script>
mandarinpay.hosted.setup("#form-hosted-pay", {
  operationId: "9874694yr87y73e7ey39ed80",
  onsuccess: function(data) {
    alert("Success, id: " + data.transaction.id);
  },
  onerror: function(data) {
    alert("Error: " + data.error);
  }
});
</script>