CODEWITHSUNDEEP
payment-gatewayauthorize.netauthorize.net-cim
Kiran
Kiran

Reputation: 8518

Using the Default Payment Form with Authorize.Net Accept Hosted Payment Page

I am integrating Authorize.NET with my web application. I am using the Hosted Payment Form as described here:

I would like to use the default Payment form as described in the settings page: https://sandbox.authorize.net/UI/themes/sandbox/Settings/SettingsPayFormMain.aspx I would like to customize this payment form by passing relevant fields.

I am using the following JSON object:

{
  "getHostedPaymentPageRequest": {
    "merchantAuthentication": {
      "name": "api_key",
      "transactionKey": "transaction_key"
    },
    "transactionRequest": {
      "transactionType": "authCaptureTransaction",
      "amount": "20.00",
      "profile": {
        "customerProfileId": "123456789"
      },
      "customer": {
        "email": "[email protected]"
      },
      "billTo": {
        "firstName": "Ellen",
        "lastName": "Johnson",
        "company": "Souveniropolis",
        "address": "14 Main Street",
        "city": "Pecan Springs",
        "state": "TX",
        "zip": "44628",
        "country": "USA"
      }
    },
    "hostedPaymentSettings": {
      "setting": [{
        "settingName": "hostedPaymentReturnOptions",
        "settingValue": "{\"showReceipt\": true, \"url\": \"https://example.com/receipt\", \"urlText\": \"Continue\", \"cancelUrl\": \"https://example.com/cancel\", \"cancelUrlText\": \"Cancel\"}"
      },  {
        "settingName": "hostedPaymentShippingAddressOptions",
        "settingValue": "{\"show\": false, \"required\": false}"
      }, {
        "settingName": "hostedPaymentBillingAddressOptions",
        "settingValue": "{\"show\": true, \"required\": false}"
      }, {
        "settingName": "hostedPaymentCustomerOptions",
        "settingValue": "{\"showEmail\": false, \"requiredEmail\": false, \"addPaymentProfile\": true}"
      }, {
        "settingName": "hostedPaymentOrderOptions",
        "settingValue": "{\"show\": true, \"merchantName\": \"G and S Questions Inc.\"}"
      }, {
        "settingName": "hostedPaymentIFrameCommunicatorUrl",
        "settingValue": "{\"url\": \"https://example.com/special\"}"
      }]
    }
  }
}

I am receiving the following Payment form which doesn't looks professional. Any idea how to use the default payment form from Authorize.NET

enter image description here

Default Form enter image description here

HTML FORM used:

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<head>

</head>
<body>
    <form method="post" action="https://test.authorize.net/payment/payment" id="formAuthorizeNetTestPage" name="formAuthorizeNetTestPage">
        <input type="hidden" name="token" value="Replace with form token from getHostedPaymentPageResponse" />
        Continue to Authorize.Net to Payment Page
        <button id="btnContinue">Continue to next page</button>
    </form>         
</body>
</html>

Upvotes: 3

Views: 3635

Answers (2)

vishnu ghule
vishnu ghule

Reputation: 164

The payment page you are looking for is an old page which Authorize used to provide and now they moved to new one. as per their website old url was https://secure.authorize.net/gateway/transact.dll to get the old page but it is now deprecated. please see this link for what has been changed https://developer.authorize.net/api/upgrade_guide.html

Upvotes: 1

John Conde
John Conde

Reputation: 219794

The Authorize.Net accept.js hosted form cannot be customized in the way you would like it to be. That's by design. It is intended for businesses/developers who do not have the technical know how to do a more complicated, even if only slightly, implementation of a checkout page.

The self-hosted accept.js form can be customized completely and still keep our site outside of PCI scope because the credit card data never passes through your server.

To summarize, the Authorize.Net-hosted form cannot be customized in the manner you are looking to do. But that shouldn't be necessary as you can accomplish the same thing and stay out of PCI scope by using the self-hosted version of that form.

This is the code I use to get the hosted payment form which appears how you want it to. If you do not see the same page I do, verify you have the correct URL in the form action. Below is the Sandbox URL. The production URL is https://accept.authorize.net/payment/payment.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Hosted Accept.js Payment Form</title>
</head>
<body>
    <form id="paymentForm" method="POST" action="https://test.authorize.net/payment/payment">
        <input type="hidden" name="token" id="token" value="YOUR_TOKEN_HERE" />
        <button onclick="sendPaymentDataToAnet()">Go to Authorize.Net hosted payment form</button>
    </form>
</body>
</html>

Upvotes: 5

Related Questions