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

PMHostedFields.create

PMHostedFields.create создает поля ввода карточных данных. Аргументы функции

font-size style.base

PMHostedFields.Pay

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