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

** - Обязательность поля определяется настройками в Кабинете продавца.

results matching ""

    No results matching ""