topic Re: Online payment page in Integration and Testing

Online payment page

solid — Mon, 15 Jun 2020 19:53:03 GMT

Hello, everyone. I need some help in getting a Pay Online type of button added to my website. Using the forum, I found a simple method to do so, but I am not 100% sure if I have done it correctly. Here is the code I am using:

<!DOCTYPE html>
<html>
<head>
    <title>Payment form</title>
</head>

<body>

<script type="text/javascript" src="https://jstest.authorize.net/v3/AcceptUI.js" charset="utf-8">
</script>

<form id="paymentForm" method="POST" action="https://YourServer/PathToExistingPaymentProcessingScript">
    <input type="hidden" name="dataValue" id="dataValue">
    <input type="hidden" name="dataDescriptor" id="dataDescriptor">
    <button type="button" class="AcceptUI" data-billingaddressoptions='{"show":true, "required":false}' data-apiloginid="XXXXXXXXX" data-clientkey="XXXXXXXXXXXXXXXX" data-acceptuiformbtntxt="Submit" data-acceptuiformheadertxt="Card Information" data-responsehandler="responseHandler">Pay Online
    </button>
</form>

<script type="text/javascript">

function responseHandler(response) {
    if (response.messages.resultCode === "Error") {
        var i = 0;
        while (i < response.messages.message.length) {
            console.log(
                response.messages.message[i].code + ": " +
                response.messages.message[i].text
            );
            i = i + 1;
        }
    } else {
        paymentFormUpdate(response.opaqueData);
    }
}


function paymentFormUpdate(opaqueData) {
    document.getElementById("dataDescriptor").value = opaqueData.dataDescriptor;
    document.getElementById("dataValue").value = opaqueData.dataValue;

    // If using your own form to collect the sensitive data from the customer,
    // blank out the fields before submitting them to your server.
    // document.getElementById("cardNumber").value = "";
    // document.getElementById("expMonth").value = "";
    // document.getElementById("expYear").value = "";
    // document.getElementById("cardCode").value = "";

    document.getElementById("paymentForm").submit();
}
</script>

</body>
</html>

What I am hoping to do is use Hosted Access so that when the customer clicks on the Pay Online button, it redirects them to the virtual payment form on Authorize.net.

Does this look correct, or am I way off base? Also, how can edit the button itself? It is tiny and just a beige square with the words "Pay Online" in it.

Thank you in advance!!

Re: Online payment page

NexusSoftware — Tue, 16 Jun 2020 12:14:02 GMT

Hello,

The button text is arbitrary and can say anything you would like. The button style can be modified with CSS just like any other on page UI elements.

For example, a simple Accept.js with the hosted form:

<!DOCTYPE html>
<html>
<head>
    <title>Sample form</title>
    <style>

.myButton {
    background-color:#44c767;
    border-radius:28px;
    border:1px solid #18ab29;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:17px;
    padding:16px 31px;
    text-decoration:none;
    text-shadow:0px 1px 0px #2f6627;
}
.myButton:hover {
    background-color:#5cbf2a;
}
.myButton:active {
    position:relative;
    top:1px;
}

    </style>
</head>

<body>

<script type="text/javascript"
    src="https://jstest.authorize.net/v3/AcceptUI.js"
    charset="utf-8">
</script>

<form id="paymentForm"
    method="POST"
    action="https://YourServer/PathToExistingPaymentProcessingScript">
    <input type="hidden" name="dataValue" id="dataValue" />
    <input type="hidden" name="dataDescriptor" id="dataDescriptor" />
    <button type="button"
        class="AcceptUI myButton"
        data-billingAddressOptions='{"show":true, "required":false}' 
        data-apiLoginID="YOUR API LOGIN ID" 
        data-clientKey="YOUR PUBLIC CLIENT KEY"
        data-acceptUIFormBtnTxt="Submit" 
        data-acceptUIFormHeaderTxt="Card Information" 
        data-responseHandler="responseHandler">Buy Now</button>
</form>

<script type="text/javascript">

function responseHandler(response) {
    if (response.messages.resultCode === "Error") {
        var i = 0;
        while (i < response.messages.message.length) {
            console.log(
                response.messages.message[i].code + ": " +
                response.messages.message[i].text
            );
            i = i + 1;
        }
    } else {
        paymentFormUpdate(response.opaqueData);
    }
}


function paymentFormUpdate(opaqueData) {
    document.getElementById("dataDescriptor").value = opaqueData.dataDescriptor;
    document.getElementById("dataValue").value = opaqueData.dataValue;

    // If using your own form to collect the sensitive data from the customer,
    // blank out the fields before submitting them to your server.
    // document.getElementById("cardNumber").value = "";
    // document.getElementById("expMonth").value = "";
    // document.getElementById("expYear").value = "";
    // document.getElementById("cardCode").value = "";

    document.getElementById("paymentForm").submit();
}
</script>

</body>
</html>