OnePay Plugin with Address Checkout

PayOne

OnePay Plugin with Address Checkout

Using this OnePay address checkout plugin, the user has the ability to checkout with the following on landing page

Personal Details
Name / Email
Address
State / City
Zip code

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" />
    <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 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', 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>