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='Оплата успешна!'; } }); }); }
#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 :
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
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
Last updated