document.addEventListener("DOMContentLoaded", function (event) {
    var  PaySoft = PMHostedFields({
        params: {
            "LMI_MERCHANT_ID": "1412",
            "LMI_PAYMENT_NO": 'o-2222',
            "LMI_PAYMENT_AMOUNT": "10.99",
            "LMI_PAYMENT_DESC": "Order description"
        },
        language: 'en',
        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);
}