Hosted fields widget

Requirement: SAQ A, TLS 1.2 All form inputs containing card data load within an iframe from domain. No card information is sent to your servers. Such architecture requires the simplest method of PCI validation: SAQ A. The merchant payment page must have HTTPS TLS 1.2 or above. Fields may have a custom design (color, font, etc.)

The merchant payment page should include a payment form, with hosted-fields containers in places for credit card fields. When a customer fills in the payment from and presses a pay button (method “PaySoft.Pay”), card data is sent to PaySoft`s server for processing. If the card has 3-D enabled, the customer will see a 3-D card authentication form in an additional iframe. A callback function will be called after processing.

Wait, the payment is processing

PMHostedFields :

Name Parameter name in html-form Mandatory? Description
Widget language language No ru – russian
uk – ukrainian
en – english
Order params params да Array of parameters

CallBack result object description

Name Description
result.LMI_MERCHANT_ID Merchant’s identifier
result.LMI_PAYMENT_NO Merchant’s payment number
result.LMI_PAYMENT_AMOUNT Payment amount
result.LMI_PAYMENT_DESC Payment description. The maximum length is 255 symbols. Encoding - UTF8.
result.LMI_SYS_PAYMENT_ID PaySoft’s payment identifier
result.LMI_MODE Payment mode: 0 - working mode; 1 – test mode.
result.LMI_SYS_PAYMENT_DATE Date and time of received payment in PaySoft system, format: YYYY-MM-DD hh:mm:ss (Kyiv time).
result.error.message Detailed description of an error for the client

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) {
            var displayError = document.getElementById('error-';
            if (event.detail.error !=null) {
                displayError.textContent = event.detail.error;
            } else {
                displayError.textContent = '';
    var processingText = document.getElementById('processing');
    form.addEventListener('submit', function (event) {
        event.preventDefault(); ='block';
        PaySoft.Pay(function (result) {
            var errorElement = document.getElementById('error-pay');
            if (result.status!='success') {
                errorElement.textContent = result.message;
            } else {
       = 'none';
                document.getElementById('payment-form').textContent='Оплата успешна!';


<script type="text/javascript" src=""></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 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 class="row">
        <div id="field-card-cvc" class="field"></div>
        <div Id="error-field-card-cvc" class="error"></div>
    <div class="row">
        <input id="pay-button" type="submit" value="Оплатить" />
        <div id="error-pay" class="error"></div>
    <div id="processing">
            <img src="" alt="">
            <h5>Подождите, платеж обрабатывается</h5>
#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);

results matching ""

    No results matching ""