






Copyright © 2023 OnePay
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis ex nec nulla posuere sollicitudin. Proin nec orci at est pellentesque malesuada eu a neque. Maecenas quis porttitor odio. Praesent faucibus dui nisl, ac luctus mauris pulvinar in. Morbi vitae ante a nunc ullamcorper rutrum. Donec non interdum purus, gravida elementum mi.
Introduction
An overview of the procedure for processing a transaction using a payment token.
Payment token:
Credit card payments may be secure, but they are still susceptible to fraud. Instead of directly using credit cards to make payments, use the credit card to generate a payment token. This token will help you to process secure payments instead of providing credit card details.
Using this OnePay – Payment Token Customized UI plugin, user will be able to complete payment by entering:
Card Number
Expiry date
CVV
The following TEST card can be used to test your integration.
Card No : 4017779995555556
<HTML lang="en">
<HEAD>
<TITLE>Onepay 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>
<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>
9801 Washingtonian Blvd.
Suite 200 Gaithersburg, MD 20878
Phone : 650-709-2400
Email : team@onepay.com
OnePay is a registered ISO/MSP of Merrick Bank, South Jordan, UT
Copyright © 2023 OnePay
Cookie | Duration | Description |
---|---|---|
cookielawinfo-checkbox-analytics | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics". |
cookielawinfo-checkbox-functional | 11 months | The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional". |
cookielawinfo-checkbox-necessary | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary". |
cookielawinfo-checkbox-others | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other. |
cookielawinfo-checkbox-performance | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance". |
viewed_cookie_policy | 11 months | The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data. |