OnePay Plugin with Terms & Conditions and Address Checkout

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

Using this OnePay checkout 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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>PayOne</title>
</head>
<body>
    <div id="onepayResponseResult"> </div>
    <input id="onepayResult" type="hidden" />
    <input id="onepayToken" type="hidden" />
 <!-- Amount to enter  -->
    <input type="text" id="txtAmount" value="" placeholder="Amount" maxlength="12" style="width:110px" />
<div id="divIframe1"></div>
</body>
</html>

Code for Javascript

  <script id="scriptIframe" type="text/javascript" src="https://apidemo.onepay.com/PayUI/onepay_v2.0.js"
            data-token=""
            data-key="1115a683-6b20-88ab-2d1e-9a5ac4587490"
            data-header="payment"
            data-displayMode="popup"
            data-mode="payment"
            data-firstname="*"
            data-lastname=""
            data-address="*"
            data-city=""
            data-state=""
            data-zipcode=""
            data-email=""
            data-phone=""
            data-invoiceno=""
            data-note="">
    </script>
<script>     
    btnPayment.onclick = function () {        
        let customerId = ''; 
        let amount = document.getElementById("txtAmount").value;
        MakePayment(amount, customerId, 'divCheckoutContent', 1, 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>