OnePay Plugin with Basic Checkout

Checkout allows you to quickly and easily enter user details and and complete the payment in few easy steps.   

Using this Onepay checkout plugin, user will be able to complete payment by entering:

  • Card Number

  • Expiry date

  • CVV

Following TEST card can be used to test your integration.

Card No : 4017779995555556

  • Amount 10.00
  • ZIP CODE 64798
  • Expiry Date : 10/25

Code of HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title></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://apidev.onepay.com/PayUI/onepay_v2.0.js"
            data-token=""
            data-key="0D75E6A9-B83D-00A3-BFAB-1E1488CCE8A2"
            data-header="payment"
            data-displayMode="popup"
            data-mode="payment">
    </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>