How To Create Secure Authorize.net Payment Form

Accept Hosted
Accept Hosted is a mobile-optimized payment form hosted by Authorize.net. It enables you to use the Authorize.net API to submit payment transactions while maintaining SAQ-A level PCI compliance. You can redirect customers to the Accept Hosted payment form or embed the payment form directly in your own page.

For Accept Hosted API details, see the API Reference Guide.

To use a JavaScript library to accept payments, using either your payment form or the included hosted form, see the documentation for Accept.js.

The implementation and use of Accept Hosted follow a basic workflow:

1. You call getHostedPaymentPageRequest to request a form token. This request contains transaction information and form parameter settings.

2. You embed the payment form or redirect the customer to the payment form by sending an HTML POST containing the form token to https://accept.authorize.net/payment/payment.

3. Your customer completes and submits the payment form.

4. The API sends the transaction to Authorize.net for processing.

5. The customer is returned to your site, which displays a result page based on the URL followed or the response details sent.

Requesting the Form Token

The Accept Hosted process starts with a getHostedPaymentPageRequest API call. The response contains a form token that you can use in a subsequent request to display the hosted payment form. Using the form token ensures that the payment form request comes from you and that the transaction details remain unchanged by the customer or a third party.

The form token is valid for 15 minutes. You must display the payment form within that time. If the browser makes a request for the payment form using an expired form token, an error is displayed.

TRANSACTION REQUEST DETAILS

The transactionRequest element contains transaction details and values that can be used to populate the form fields. It uses the same child elements as the transactionRequest element in createTransactionRequest. Only the transactionType and amount elements are required.

Important: No form field is displayed if its corresponding element in transactionRequest is absent or set to a NULL value.

HOSTED FORM PARAMETER SETTINGS

To control the payment form, use the following parameter settings within the hostedPaymentSettings element of the getHostedPaymentPageRequest API call.
The values for all parameters sent within hostedPaymentSettings are sent as JSON objects, regardless of whether you sent the getHostedPaymentPageRequest API call in JSON or XML format. If you send the API request in JSON format, use backslashes to escape the quote characters within hostedPaymentSettings, as shown in the Get Hosted Payment Page Request and Response section below.

Get Hosted Payment Page Request and Response

JSON REQUEST

{
    "getHostedPaymentPageRequest": {
        "merchantAuthentication": {
            "name": "API_LOGIN_ID",
            "transactionKey": "API_TRANSACTION_KEY"
        },
        "transactionRequest": {
            "transactionType": "authCaptureTransaction",
            "amount": "20.00",
            "profile": {
                "customerProfileId": "123456789"
            },
            "customer": {
                "email": "[e-mail]"
            },
            "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://mysite.com/receipt\", \"urlText\": \"Continue\", \"cancelUrl\": \"https://mysite.com/cancel\", \"cancelUrlText\": \"Cancel\"}"
            }, {
                "settingName": "hostedPaymentButtonOptions",
                "settingValue": "{\"text\": \"Pay\"}"
            }, {
                "settingName": "hostedPaymentStyleOptions",
                "settingValue": "{\"bgColor\": \"blue\"}"
            }, {
                "settingName": "hostedPaymentPaymentOptions",
                "settingValue": "{\"cardCodeRequired\": false, \"showCreditCard\": true, \"showBankAccount\": true}"
            }, {
                "settingName": "hostedPaymentSecurityOptions",
                "settingValue": "{\"captcha\": false}"
            }, {
                "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://mysite.com/iFrameCommunicator.html\"}"
            }]
        }
    }
}

Reference Blog
How To Create Secure Authorize.net Payment Form