Nilon Plugin with Add & Edit Card
Checkout allows you to quickly and easily enter user details and complete the payment in a few easy steps.
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>OnePay Token</title>
</head>
<body>
<div id="ResultOnepayResponse"></div>
<input id="onepayResult" type="hidden" />
<input id="onepayToken" type="hidden" />
<button id="btnAdd"> Add card</button>
<div id="divonepayiframe"> </div>
<!--data-displayMode is popup or inline-->
</body>
</html>
Code of Javascript
<script id="scriptIframe" type="text/javascript" src="https://apidemo.nilon.com/PayUI/nilon.min_v3.0.js"
data-key='2ECEA808-852F-BDA6-2CA2-64E0EBC53AC0'
data-displayMode="popup"
data-mode='token'>
</script>
<script>
//Show response in Div from onepayResult hidden field. Edit card is success, onepay response stores in onepayResult hidden field value
function ShowOnePayResponse() {
//document.getElementById("ResultOnepayResponse").innerHTML = document.getElementById("onepayResult").value;
let jsonResult = JSON.parse(document.getElementById("onepayResult").value);
if (jsonResult != undefined && jsonResult.customer_response !== undefined) {
resultText = jsonResult.customer_response.result_text
if(jsonResult.customer_response.result_code === 1){
alert("Card/token information added success" ); // popup or display success status
}
}
}
btnAdd.onclick = function () {
let customerId = '';
// params are 1) div id for render iFrame in Div, 2) customerId is optional 3) Call back method is optional
//AddCard( 'divonepayiframe', customerId, ShowOnePayResponse);
//
AddCard( '', '', ShowOnePayResponse);
//// without param , after close inspect value of onepayResult hidden field
// AddCard();
}
</script>
Checkout allows you to quickly and easily enter user details and complete the payment in a few easy steps.
- Card Number
- Expiry Date
- CVV