Nilon - Payment Token Customized UI
An overview of the procedure for processing a transaction using a payment token.
Show Dev code
Code of HTML
<HTML lang="en">
<HEAD>
<TITLE>Nilon JS Sample </TITLE>
<!-- Script to be added for Onepay Token JS -->
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script type="text/javascript" src="https://apidemo.onepay.com/payui/OnePayPaymentToken.min_v1.0.js"
data-paymenttokenkey="38FB6290-8DD7-8592-9F35-D8ECAF3F023F">
</script>
</HEAD>
<BODY>
<form class="credit-card">
<div class="form-header">
<h4 class="title">Credit Card Detail</h4>
</div>
<!-- The feild for tokenization result -->
<input id="onepayResult" type="hidden" name="onepayResult" />
<!-- Error display field -->
<span id="cardError" name="cardError" style="color:red"></span>
<div class="form-body">
<!-- Card Number -->
<input type="text" size="20" maxlength="16" class="card-number" id="cardNumber" name="cardNumber" placeholder="Card Number*" required>
<!-- Date Field -->
<div class="date-field">
<div class="month">
<select id="expMonth" name="expMonth">
<option value="">Month</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</div>
<div class="year">
<select id="expYear" name="expYear">
<option value="">Year</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
</select>
</div>
</div>
<!-- Card Verification Field -->
<div class="card-verification">
<div class="cvv-input">
<input type="text" id="securityCode" name="securityCode" placeholder="CVV" maxlength="3">
</div>
<div class="amount">
<input type="text" id="txtAmount" name="textAmount" placeholder="Amount*" maxlength="3" required>
</div>
</div>
<!-- Buttons -->
<button type="button" id="btnGenerateToken" class="proceed-btn" onclick="return getPaymentToken()">Submit</button>
</div>
</form>
<br>
</BODY>
</HTML>
Code of Javascript
<script src="https://code.jquery.com/jquery-3.5.0.js">
<script type="text/javascript" src="https://api.onepay.com/payui/OnePayPaymentToken.min_v2.0.js"
data-paymenttokenkey="0366f0df-014d-d42e-d4f1-8a67b4413e56">
</script>
<center>
<span id="spanPaymentTokenResponse"></span>
<br/>
<span id="spanTransactionResponse"></span>
</center>
<script>
let token;
function getPaymentToken() {
let result = CardTokenize("cardNumber", "expMonth", "expYear", "securityCode", "cardError", "onepayResult");
//document.getElementById('spanPaymentTokenResponse').innerHTML='<b>Payment Token Response</b> <br/>'+document.getElementById('onepayResult').value
let jsonResult =JSON.parse(document.getElementById('onepayResult').value);
token =jsonResult.token;
let amount = 0;
amount = document.getElementById('txtAmount').value;
if(amount==''){
document.getElementById('cardError').innerHTML ='Please enter the valid amount';
return false;
}
if(amount != '') {
postTransaction(token);
}
}
async function postTransaction(paymentToken){
let amount = document.getElementById('txtAmount').value;
if(amount=='')
amount = 25;
let url = 'https://apisandbox.onepay.com/Transaction';
let req = {"amount":amount,"method":"CC","type":2,"nonce":Date.now(),"test":"0","reference_transaction_id":"","market_code":"M","notes":"100026530010",
"card":{"payment_token": paymentToken }
} ;
if (document.getElementById('expMonth'). value == '' || document.getElementById('expYear'). value == ''){
req = {"amount":amount,"method":"CC","type":2,"nonce":Date.now(),"test":"0","reference_transaction_id":"","market_code":"M","notes":"100026530010",
"card":{"payment_token": paymentToken, "expiration_date": "0528"} } ;
}
const requestPayment = {
method: 'POST',
headers: { 'Content-Type': 'application/json', 'x-authorization': 'DC6A4A5D-4E17-8441-47AE-081561B3ACBE' },
body: JSON.stringify(req)
};
const response = await fetch(url, requestPayment);
const data = await response.json();
console.log(data);
let jsonData = JSON.parse(data);
document.getElementById('spanTransactionResponse').innerHTML = '<br/><b>Transaction response</b> <br/>' +JSON.stringify(jsonData, null, 6)
.replace(/\n( *)/g, function (match, p1) {
return '<br>' + ' '.repeat(p1.length);
});
</script>