Nilon Plugin with Address Checkout
Using this Nilon address checkout plugin, the user has the ability to checkout with the following on landing page.
Show Dev code
Code of HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>PayOne</title>
</head>
<body>
<div id="onepayResponseResult"> </div>
<input id="onepayResult" type="hidden" />
<input id="onepayToken" type="hidden" />
<input type="text" id="txtAmount" value="" placeholder="Amount" maxlength="12" style="width:110px" />
<button id="btnPayment"> Payment</button>
<div id="divIframe1"></div>
</body>
</html>
Code of Javascript
<script id="scriptIframe" type="text/javascript" src="https://apidemo.nilon.com/PayUI/nilon.min_v3.0.js"
data-token=""
data-key="2ECEA808-852F-BDA6-2CA2-64E0EBC53AC0"
data-header="payment"
data-displayMode="popup"
data-mode="payment"
data-firstname="*"
data-lastname=""
data-address="*"
data-city=""
data-state=""
data-zipcode=""
data-email=""
data-phone=""
data-invoiceno=""
data-note="">
</script>
<script>
btnPayment.onclick = function () {
let customerId = '';
let amount = document.getElementById("txtAmount").value;
MakePayment(amount, customerId, 'divCheckoutContent', 0, ShowResult);
}
function ShowResult() {
// document.getElementById("onepayResponseResult").innerHTML = document.getElementById("onepayResult").value;
let jsonResult = JSON.parse(document.getElementById("onepayResult").value);
let resultText ='';
if (jsonResult != undefined && jsonResult.transaction_response !== undefined) {
resultText = jsonResult.transaction_response.result_text
if(jsonResult.transaction_response.result_code === 1){
alert("Payment transaction "+resultText ); // popup or display success status
}
else
{
// popup resultText or Transaction failed
}
}
}
</script>
Using this Nilon address checkout plugin, the user has the ability to checkout with the following on landing page.
- Personal Details
- Name/Email
- Address
- State/City
- Zip Code