Hosted fields
Виджет "Hosted fields" позволяет производить оплату не покидая сайт Продавца. Для приема платежей таким способом сайт Продавца должен быть доступен по протоколу HTTPS. Поля ввода могут гибко настраиваться Продавцом. Все поля ввода размещаются через iframe на серверах PaySoft.ua, поэтому Продавцу не нужно проходить полную сертификацию PCI DSS, достаточно заполнить самоопросник PCI DSS SAQ-A.
document.addEventListener("DOMContentLoaded", function (event) {
form = document.getElementById('payment-form');
if(!form ) {
return;
}
var PaySoft = PMHostedFields({
params: {
"LMI_MERCHANT_ID": "1412",
"LMI_PAYMENT_NO": 'o-2222',
"LMI_PAYMENT_AMOUNT": "10.99",
"LMI_PAYMENT_DESC": "Order description"
},
language: 'ru',
callbacks: {
onFieldsLoaded: function() {
console.log('Widget is loaded');
}
}
});
var style = {
base: {
'font-size': '24px',
'color': '#6772e5'
} ,
placeholder: {
'color': '#aaa'
},
error: {
'color': 'red'
}
};
var cardNumber = PaySoft.create('cardnumber', '#field-card-number', {style: style});
var cardExpireYear = PaySoft.create('cardexpireyear', '#field-card-expire-year', {style: style});
var cardExpireMonth = PaySoft.create('cardexpiremonth', '#field-card-expire-month', {style: style});
var cardCVV = PaySoft.create('cardcvv', '#field-card-cvc', {style: style});
var fields = [cardNumber,cardExpireMonth,cardExpireYear,cardCVV];
fields.forEach(function(element, idx) {
element.addEventListener('change', function(event) {
console.log(event)
var displayError = document.getElementById('error-'+element.parentNode.id);
if (event.detail.error !=null) {
displayError.textContent = event.detail.error;
displayError.style.display ='inline-block';
} else {
displayError.textContent = '';
displayError.style.display ='none';
}
});
});
var processingText = document.getElementById('processing');
form.addEventListener('submit', function (event) {
event.preventDefault();
processingText.style.display ='block';
PaySoft.Pay(function (result) {
console.log(result);
processingText.style.display ='none';
var errorElement = document.getElementById('error-pay');
if (result.status!='success') {
errorElement.textContent = result.message;
errorElement.style.display ='inline-block';
} else {
errorElement.style.display = 'none';
document.getElementById('payment-form').textContent='Оплата успешна!';
}
});
});
});
<script type="text/javascript" src="https://lmi.paysoft.solutions/js/widget/PMHostedFields.min.js"></script>
<form action="" method="post" id="payment-form">
<div class="row">
<div id="field-card-number" class="field"></div>
<div Id="error-field-card-number" class="error"></div>
</div>
<div class="row">
<div id="field-card-expire-month" class="field"></div>
<div id="field-card-expire-year" class="field"></div>
<div id="error-field-card-expire-month" class="error"></div>
<div id="error-field-card-expire-year" class="error"></div>
</div>
<div class="row">
<div id="field-card-cvc" class="field"></div>
<div Id="error-field-card-cvc" class="error"></div>
</div>
<div class="row">
<input id="pay-button" type="submit" value="Оплатить" />
<div id="error-pay" class="error"></div>
</div>
<div id="processing">
<div>
<img src="https://lmi.paysoft.solutions/img/premerchant/redesign/preloader.gif" alt="">
<h5>Подождите, платеж обрабатывается</h5>
</div>
</div>
</form>
#payment-form {
font-family: "Verdana";
font-size: 16px;
color: #6772e5;
width: 100%;
max-width: 500px;
background: rgba(18, 91, 152, 0.05);
border-radius: 4px;
box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px
rgba(0, 0, 0, 0.08);
padding: 25px;
}
#payment-form .row {
margin-bottom: 10px;
}
#payment-form .field {
display: inline-block;
width: 50px;
margin-left: 30px;
}
#payment-form #field-card-number {
width: 250px;
}
#payment-form #field-card-cvc {
width: 65px;
}
#payment-form #pay-button {
width: 90%;
height: 37px;
background-color: rgb(56, 132, 255);
border-radius: 4px;
color: #fff;
border: 0px;
margin: 7px;
}
#payment-form .error {
display: none;
position: absolute;
max-width: 240px;
margin-left: 17px;
margin-top: 5px;
line-height: 14px;
color: #FFF !important;
font-size: 11px;
border-radius: 5px;
box-shadow: 0 0 15px rgba(0, 0, 0, .5);
padding: 5px 10px 7px;
background: #e31837;
-moz-box-sizing: border-box;
box-sizing: border-box;
z-index: 9;
}
#payment-form .error::before {
content: '';
position: absolute;
top: 5px;
left: -5px;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid #e31837;
}
#payment-form #processing {
width: 100%;
height: 100%;
position: fixed;
z-index: 1000;
background-color: rgba(90, 161, 202, 0.5);
top: 0px;
left: 0px;
display: none;
}
#payment-form #processing div {
text-align: center;
position: absolute;
width: 440px;
height: 320px;
left: 50%;
top: 50%;
margin-left: -220px;
margin-top: -160px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 38px 0 rgba(0, 0, 0, 0.21)
}
#payment-form #processing img {
margin-top: 90px;
margin-bottom: 25px;
}
#payment-form #processing h5 {
color: rgb(56, 132, 255);
}
Параметры конструктора PMHostedFields
Название | Название параметра | Обязательный? | Описание |
---|---|---|---|
Язык виджета | language | Нет | ru – русский язык uk – украинский язык en – английский язык |
Параметры заказа | params | да | Массив параметров |
Идентификатор продавца | LMI_MERCHANT_ID | Да | Идентификатор магазина. Идентификатор Продавец может получить в Кабинете(https://merchant.paysoft.solutions). |
Сумма платежа | LMI_PAYMENT_AMOUNT | Да | Сумма платежа, которую Продавец желает получить от Клиента. Сумма должна быть больше нуля, дробная часть отделяется точкой. |
Внутренний номер заказа в системе учета Продавца | LMI_PAYMENT_NO | Нет | В этом поле Продавец определяет номер заказа в соответствии со своей системой учета. Несмотря на то, что параметр не является обязательным, рекомендуется всегда задавать его, поскольку он нужен для корректной работы других интерфейсов. Желательно использовать уникальный номер для каждого платежа. Номер может содержать буквы английского алфавита, цифры и знак дефиса «-». Максимальная длина - 64 символов. |
Назначение платежа | LMI_PAYMENT_DESC | Да* | Описание товара или услуги. Формируется на стороне продавца. Если присутствует, добавляется в назначение платежа транзакции PaySoft. Максимальная длина - 255 символов, кодировка UTF-8. |
Назначение платежа | LMI_PAYMENT_DESC_BASE64 | Да* | Описание товара или услуги в UTF-8 с последующим кодированием с помощью алгоритма Base64. Формируется на стороне продавца. Если присутствует, то результат декодирования будет подставлен вместо LMI_PAYMENT_DESC. Позволяет не зависеть от кодирования на сайте Продавца. |
Срок оплаты заказа | LMI_EXPIRES | Нет | Срок, в течение которого заказ может быть оплачен. Передается в формате YYYY-MM-DD hh:mm:ss. Если параметр пустой, время оплаты является неограниченным. |
Идентификатор платежного инструмента | LMI_PAYMENT_SYSTEM | Нет | Идентификатор платежного инструмента, который Клиент выбрал для оплаты при формировании заказа на сайте продавца. Посмотреть перечень платежных инструментов можно в Кабинете. |
Признак тестового режима | LMI_SIM_MODE | Нет | Указывает, как проводить транзакцию после оплаты: 0 - всегда успешно, 1 - всегда неуспешно (возврат средств клиенту), 2 - вариативно (80% успешно, 20% не успешно) |
Номер телефона Клиента | LMI_PAYER_PHONE_NUMBER | Нет** | Номер телефона Клиента в формате 380xxxxxxxxx. |
Электронный адрес Клиента | LMI_PAYER_EMAIL | Нет** | Электронный адреса Клиента |
Идентификатор клиента на стороне Продавца | LMI_PAYER_ID | Нет | Может содержать буквы английского алфавита, цифры и знак дефиса «-». Максимальная длина 25 символов. |
Сохранение реквизитов карты | LMI_CREATE_TOKEN | Нет | Флаг, принимает значение 0 или 1. Если равен 1, то после успешной оплаты реквизиты карты, будут сохранены и возвращен параметр LMI_PAYMENT_TOKEN. См Списание по сохраненной карте |
Оплата по сохраненном токену карты | LMI_PAYMENT_TOKEN | Нет | Передается уже сохраненый токен карты. Оплата будет производится с подтверждением CVV и 3DSecure Пример |
Контрольная подпись | LMI_HASH | Нет | Контрольная подпись запроса. Если в Кабинете Продавца установлены соответствующие настройки «Включить проверку подписи формы запроса платежа», эта подпись будет использоваться для проверки целостности полученной информации и однозначной идентификации отправителя. Подпись является результатом шифрования строки, полученной путем склеивания (без разделителей) значений следующих параметров точно в указанном порядке: LMI_MERCHANT_ID LMI_PAYMENT_NO LMI_PAYMENT_AMOUNT secretKey Алгоритм шифрования и Secret Key устанавливаются Продавцом в настройках его Кабинета, и известен только продавцу и системе PaySoft. Рекомендуемый алгоритм шифрования есть SHA256. |
Дополнительные параметры | Определяются Продавцом | Нет | Все поля формы, не имеющие в названии префикса "LMI_", принимаются сервисом PaySoft Merchant Interface и передаются (транслируются) без изменений на веб-сайт Продавца во всех других html-формах PaySoft Merchant Interface. |
PMHostedFields.create
PMHostedFields.create создает поля ввода карточных данных. Аргументы функции
Название | Обязательный? | Описание |
---|---|---|
Тип поля ввода | Да | Может принимать значения cardnumber - номер карты,cardexpiremonth - месяц в сроке действия,cardexpireyear - год в сроке действия,cardcvv - код CVV2 с обратной стороны карты |
Идентификатор HTML тега | Да | Идентификатор тега в который будет вставлено поле ввода |
Параметры поля | Нет | style - задает оформление поля ввода |
font-size style.base
PMHostedFields.Pay
** - Обязательность поля определяется настройками в Кабинете продавца.