# Hosted fields widget

Requirement: SAQ A, TLS 1.2 All form inputs containing card data load within an iframe from Paymaster.ua 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 “paymaster.Pay”), card data is sent to Paymaster\`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.

\
var eventRegistered;\
var gitbook;\
\
document.addEventListener("DOMContentLoaded", eventRegister);\
\
function eventRegister() {\
    if(gitbook!=undefined && !eventRegistered) {\
        gitbook.events.bind("page.change", function(){\
            loadWidget();\
            eventRegistered= true;\
        })\
    }\
}\
\
eventRegister();\
\
\
function loadWidget() {\
\
    form = document.getElementById('payment-form')\
    if(!form ) {\
        return;\
    }\
\
    if(typeof PMHostedFields !== "function") {setTimeout(loadWidget,500);return;}\
    var  paymaster = PMHostedFields({\
        params: {\
            "LMI\_MERCHANT\_ID": "1412",\
            "LMI\_PAYMENT\_NO": 'o-2222',\
            "LMI\_PAYMENT\_AMOUNT": "10.99",\
            "LMI\_PAYMENT\_DESC": "Order description"\
        },\
        language: 'en'\
    });\
\
\
    var style = {\
        base: {\
            'font-size': '24px',\
            'color': '#6772e5'\
        } ,\
        placeholder: {\
                    'color': '#aaa'\
                },\
        error: {\
                    'color': 'red'\
                }\
    };\
    var cardNumber = paymaster.create('cardnumber', '#field-card-number', {style: style});\
    var cardExpireYear = paymaster.create('cardexpireyear', '#field-card-expire-year', {style: style});\
    var cardExpireMonth = paymaster.create('cardexpiremonth', '#field-card-expire-month', {style: style});\
    var cardCVV = paymaster.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';\
        paymaster.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='Оплата успешна!';\
            }\
\
        });\
    });\
}<br>

![](https://lmi.paymaster.ua/img/premerchant/redesign/preloader.gif)

\
\#payment-form {\
&#x20;   font-family: "Verdana";\
&#x20;   font-size: 16px;\
&#x20;   color: #6772e5;\
&#x20;   width: 100%;\
&#x20;   max-width: 500px;\
&#x20;   background: rgba(18, 91, 152, 0.05);\
&#x20;   border-radius: 4px;\
&#x20;   box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px\
&#x20;       rgba(0, 0, 0, 0.08);\
&#x20;   padding: 25px;\
}\
\
\#payment-form .row {\
&#x20;   margin-bottom: 10px;\
}\
\
\#payment-form .field {\
&#x20;   display: inline-block;\
&#x20;   width: 50px;\
&#x20;   margin-left: 30px;\
}\
\
\#payment-form #field-card-number {\
&#x20;   width: 250px;\
}\
\
\#payment-form #field-card-cvc {\
&#x20;   width: 65px;\
}\
\
\#payment-form #pay-button {\
&#x20;   width: 90%;\
&#x20;   height: 37px;\
&#x20;   background-color: rgb(56, 132, 255);\
&#x20;   border-radius: 4px;\
&#x20;   color: #fff;\
&#x20;   border: 0px;\
&#x20;   margin: 7px;\
}\
\
\#payment-form .error {\
&#x20;   display: none;\
&#x20;   position: absolute;\
&#x20;   max-width: 240px;\
&#x20;   margin-left: 17px;\
&#x20;   margin-top: 5px;\
&#x20;   line-height: 14px;\
&#x20;   color: #FFF !important;\
&#x20;   font-size: 11px;\
&#x20;   border-radius: 5px;\
&#x20;   box-shadow: 0 0 15px rgba(0, 0, 0, .5);\
&#x20;   padding: 5px 10px 7px;\
&#x20;   background: #e31837;\
&#x20;   -moz-box-sizing: border-box;\
&#x20;   box-sizing: border-box;\
&#x20;   z-index: 9;\
}\
\
\#payment-form .error::before {\
&#x20;   content: '';\
&#x20;   position: absolute;\
&#x20;   top: 5px;\
&#x20;   left: -5px;\
&#x20;   width: 0;\
&#x20;   height: 0;\
&#x20;   border-top: 8px solid transparent;\
&#x20;   border-bottom: 8px solid transparent;\
&#x20;   border-right: 8px solid #e31837;\
}\
\
\#payment-form #processing {\
&#x20;   width: 100%;\
&#x20;   height: 100%;\
&#x20;   position: fixed;\
&#x20;   z-index: 1000;\
&#x20;   background-color: rgba(90, 161, 202, 0.5);\
&#x20;   top: 0px;\
&#x20;   left: 0px;\
&#x20;   display: none;\
}\
\
\#payment-form #processing div {\
&#x20;   text-align: center;\
&#x20;   position: absolute;\
&#x20;   width: 440px;\
&#x20;   height: 320px;\
&#x20;   left: 50%;\
&#x20;   top: 50%;\
&#x20;   margin-left: -220px;\
&#x20;   margin-top: -160px;\
&#x20;   background-color: #fff;\
&#x20;   border-radius: 10px;\
&#x20;   box-shadow: 0 0 38px 0 rgba(0, 0, 0, 0.21)\
}\
\
\#payment-form #processing img {\
&#x20;   margin-top: 90px;\
&#x20;   margin-bottom: 25px;\
}\
\
\#payment-form #processing h5 {\
&#x20;   color: rgb(56, 132, 255);\
}\ <br>

## PMHostedFields :

| **Name**        | **Parameter name in html-form** | **Mandatory?** | **Description**                                        |
| --------------- | ------------------------------- | -------------- | ------------------------------------------------------ |
| Widget language | language                        | No             | <p>ru – russian<br>uk – ukrainian <br>en – english</p> |
| 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                                            | PayMaster’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 PayMaster system, format: YYYY-MM-DD hh:mm:ss (Kyiv time). |
| result.error.message    Detailed description of an error for the client |                                                                                                 |

{% tabs %}
{% tab title="JavaScript" %}

```javascript
document.addEventListener("DOMContentLoaded", function (event) {
    var  paymaster = PMHostedFields({
        params: {
            "LMI_MERCHANT_ID": "1412",
            "LMI_PAYMENT_NO": 'o-2222',
            "LMI_PAYMENT_AMOUNT": "10.99",
            "LMI_PAYMENT_DESC": "Order description"
        },
        language: 'ru'
    });


    var style = {
        base: {
            'font-size': '24px',
            'color': '#6772e5'
        } ,
        placeholder: {
                    'color': '#aaa'
                },
        error: {
                    'color': 'red'
                }
    };
    var cardNumber = paymaster.create('cardnumber', '#field-card-number', {style: style});
    var cardExpireYear = paymaster.create('cardexpireyear', '#field-card-expire-year', {style: style});
    var cardExpireMonth = paymaster.create('cardexpiremonth', '#field-card-expire-month', {style: style});
    var cardCVV = paymaster.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';
        paymaster.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='Оплата успешна!';
            }

        });
    });

});
```

{% endtab %}

{% tab title="XML/HTML/SVG" %}

```markup
<script type="text/javascript" src="https://lmi.paymaster.ua/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.paymaster.ua/img/premerchant/redesign/preloader.gif" alt="">
            <h5>Подождите, платеж обрабатывается</h5>
        </div>
    </div>
</form>
```

{% endtab %}

{% tab title="CSS" %}

```css
#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);
}
```

{% endtab %}
{% endtabs %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://paymaster-ua.gitbook.io/api/sources/en/sources/hosted-fields.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.