Credit Card

VISA

chip

0000 0000 0000 0000

VALID
THRU10/28
John M
123

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.

Onepay JS Sample

Credit Card Detail



OnePay - Payment Token Customized UI

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

  • Amount : 10.00
  • Zip Code : 64798
  • Expiry Date : 10/25

Code for HTML

<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>

Code for 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>' + '&nbsp;'.repeat(p1.length);
         });
</script>