### Complete Hosted Payment Page Integration Example Source: https://developer.authorize.net/api/reference/features/accept-hosted.html This comprehensive example demonstrates all steps for integrating the Authorize.net hosted payment page, including iframe setup, form submission, and communication handling. ```html HostedPayment Test Page
Open Authorize.net in an iframe to complete transaction
``` -------------------------------- ### Sample Token Response Source: https://developer.authorize.net/api/reference/features/oauth.html This is an example of a successful response when requesting an access token. ```APIDOC ## Sample Token Response HTTP/1.1 200 OK Content-Type: application/json;charset=UTF-8 Cache-Control: no-store Pragma: no-cache { "access_token": "eyJraWQiOiI4MGI2ZDJjM2NkZGRkMmY2NmY3MmRjYjIyMmZiNGM1MCIsImFsZyI6IlJTMjU2In0.eyJqdGkiOiI0Y2E5NGUyNy04NzkzLTRmOGQtYjY4YS01OWM0MjMwODlhZDAiLCJzY29wZXMiOlsicmVhZCIsIndyaXRlIiwiZGVsZXRlIl0sImlhdCI6MTQ3MTU3MDE5NjM0MiwiY2xpZW50X2lkIjoiOGw1N0lZZmZGYiIsIm1lcmNoYW50X2lkIjoiMzI1MzY4IiwiZXhwaXJlc19pbiI6MTQ3MTU5ODk5NjM0Mn0.cmYor7iW6lxRCiM3kWPKauMsiKNGwRrrRFKowcTdkRQewgbQ0Mn9As1RhZwDKL4duxCzAzLw4e8aV8PUyd2-_eCUsqbPMWLWjGo75eU8GI9rrvSGTxEP-fr6jPAr-jBJekQTzMLgkKVtSGaJgtz08dHqrJnrejR8rZs4h1GpPMk6i99cOVMHjuTV7ZzognvkLKj_OR01H4XK5M8TWH5uoAXWrII3K-JJV1YkzjpVkpS0tVXTIXJI-pk_eNeBaJ7Q6in9X3xQKXnIqA8I8zxZt3LNnxR-aui2yufzP5BDh2kfwU0B1Uq8fEuqNmbj4HN1NrmnTHkRJTZ4ooYoqAQtnQ", "token_type": "bearer", "refresh_token": "eyJraWQiOiI4MGI2ZDJjM2NkZGRkMmY2NmY3MmRjYjIyMmZiNGM1MCIsImFsZyI6IlJTMjU2In0.eyJqdGkiOiI4N2IxNDg2MC03YzI0LTQ0NmQtOWJlYS05Mzk2ZDI3MmNmOWQiLCJzY29wZXMiOlsicmVhZCIsIndyaXRlIiwiZGVsZXRlIl0sImlhdCI6MTQ3MTU3MDE5NjMyMywiY2xeZW50X2lkIjoiOGw1N0lZZmZGYiIsIm1lcmNoYW50X2lkIjoiMzI1MzY4IiwiZXhwaXJlc19pbiI6MTQ3MTU5ODk5NjMyM30.Fn8ZlXgvGBr-uvDi6e7-72g8tP-u42T5FNW5NW4YQ7GkrMqUEthexGc9NOcf6uWYfSD4EiSbDVO8EIojZzIUgyXmG3tYDgSejFcDSPcMrF11m9WkOcapbIFTnFk2OyPVi48BVZ6vNb7j2184pJ3KHKoq9E7qlaKrEbvBn2HRVdtvb1yj1Xv1tH38I6Qong8xMAEMCcIfzTinEOFIbENYzgxBsSNVrS15CYtDRFEDPGmAVPzd4I7HN_ed-pzOET3YbUBBQUbrAuZSrSrBcgfBCtT9C5szd7tYXmi-1AMVdFybnVXArAXsDX0nZzm-PuCi_DGKMJET0sY2QNyesyKv8w", "expires_in": 28798, "scope": "read write", "refresh_token_expires_in": 28799, "client_status": "active" } ``` -------------------------------- ### Landing Page Flow URL Example Source: https://developer.authorize.net/api/reference/features/oauth.html This URL initiates the OAuth boarding flow. Adjust `profileTypeID` to filter pricing options. ```url https://account.authorize.net/signUpNow?resellerID=1234&profileTypeID=1&sub=oauth&client_id=bjdk2V33pF&state=someValue&scope=read,write&redirect_uri=https://www.yourredirecturl.com/ ``` -------------------------------- ### Complete HTML with JavaScript for Redirect Source: https://developer.authorize.net/api/reference/features/accept-hosted.html This example combines HTML structure with JavaScript to manage the payment token for redirect integration. It allows users to input a token and then submit it via a button click. ```html
Redirect-Continue to Authorize.net to Payment Page
``` -------------------------------- ### Submit API Request with Access Token (SOAP) Source: https://developer.authorize.net/api/reference/features/oauth.html This example shows how to include an access token within the `merchantAuthentication` block for SOAP API requests. ```json { "authenticateTestRequest": { "merchantAuthentication": { "accessToken": "eyJraWQiOiIyNmRjfjVkZTdlMmYwYTI0ODg0MjU1YjIwZWJjMGY0MSIsImFs } } } ``` -------------------------------- ### HTML Form with JavaScript for Token Handling Source: https://developer.authorize.net/api/reference/features/accept_hosted.html This example demonstrates how to dynamically set the form token using JavaScript before submitting the redirect form. It includes jQuery for event handling. ```html
Redirect-Continue to Authorize.net to Payment Page
``` -------------------------------- ### Get Hosted Payment Page Request and Response Source: https://developer.authorize.net/api/reference/features/accept-hosted.html This section provides examples of the JSON and XML requests and responses for the Get Hosted Payment Page API. It illustrates the necessary fields for transaction details and hosted payment settings. ```APIDOC ## Get Hosted Payment Page Request and Response ### Description This operation allows you to request a hosted payment page. You can configure various settings such as return options, button text, styling, payment options, security features, address display, customer options, and order details. ### JSON Request Example ```json { "getHostedPaymentPageRequest": { "merchantAuthentication": { "name": "API_LOGIN_ID", "transactionKey": "API_TRANSACTION_KEY" }, "transactionRequest": { "transactionType": "authCaptureTransaction", "amount": "20.00", "profile": { "customerProfileId": "123456789" }, "customer": { "email": "ellen@mail.com" }, "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\"}" } ] } } } ``` ### JSON Response Example ```json { "token": "FCfc6VbKGFztf8g4sI0B1bG35quHGGlnJx7G8zRpqV0gha2862KkqRQ/NaGa6y2SIhueCAsP/CQKQDQ0QJr8mOfnZD2D0EfogSWP6tQvG3xlv1LS28wFKZHt2U/DSH64eA3jLIwEdU+++++++++++++shortened_for_brevity++++++++WC1mNVQNKv2Z+ 1msH4oiwoXVleb2Q7ezqHYl1FgS8jDAYzA7ls+AYf05s=.89nE4Beh", "messages": { "resultCode": "Ok", "message": [ { "code": "I00001", "text": "Successful." } ] } } ``` ### XML Request Example ```xml API_LOGIN_ID API_TRANSACTION_KEY authCaptureTransaction 20.00 123456789 ellen@mail.com Ellen Johnson Souveniropolis
14 Main Street
Pecan Springs TX 44628 USA hostedPaymentReturnOptions {"showReceipt": true, "url": "https://mysite.com/receipt", "urlText": "Continue", "cancelUrl": "https://mysite.com/cancel", "cancelUrlText": "Cancel"} hostedPaymentButtonOptions {"text": "Pay"} hostedPaymentStyleOptions {"bgColor": "blue"} hostedPaymentPaymentOptions {"cardCodeRequired": false, "showCreditCard": true, "showBankAccount": true} hostedPaymentSecurityOptions {"captcha": false} hostedPaymentShippingAddressOptions {"show": false, "required": false} hostedPaymentBillingAddressOptions {"show": true, "required":false} hostedPaymentCustomerOptions {"showEmail": false, "requiredEmail": false, "addPaymentProfile": true} hostedPaymentOrderOptions {"show": true, "merchantName": "G and S Questions Inc."} hostedPaymentIFrameCommunicatorUrl {"url": "https://mysite.com/IFrameCommunicator.html"} ``` ### XML Response Example ```xml FCfc6VbKGFztf8g4sI0B1bG35quHGGlnJx7G8zRpqV0gha2862KkqRQ/NaGa6y2SIhueCAsP/CQKQDQ0QJr8mOfnZD2D0EfogSWP6tQvG3xlv1LS28wFKZHt2U/DSH64eA3jLIwEdU+++++++++++++shortened_for_brevity++++++++WC1mNVQNKv2Z+ 1msH4oiwoXVleb2Q7ezqHYl1FgS8jDAYzA7ls+AYf05s=.89nE4Beh Ok I00001 Successful. ``` ``` -------------------------------- ### Retrieve All Supported Event Types Source: https://developer.authorize.net/api/reference/features/webhooks.html Use this GET request to list all event types that the Webhooks REST API supports. No specific setup is required. ```HTTP GET https://apitest.authorize.net/rest/v1/eventtypes ``` -------------------------------- ### E00017: Start Date in the Past Source: https://developer.authorize.net/api/reference/dist/json/responseCodes.json The specified start date for the subscription is in the past relative to the submission date. Ensure the start date is current or in the future. ```text E00017 ``` -------------------------------- ### Load Accept.js Library (Sandbox) Source: https://developer.authorize.net/api/reference/features/acceptjs.html Include this script tag to load the Accept.js library for sandbox testing. Ensure it's loaded after your payment form elements are defined. ```html ``` -------------------------------- ### E00018: Credit Card Expires Before Subscription Start Date Source: https://developer.authorize.net/api/reference/dist/json/responseCodes.json The credit card associated with the subscription expires before the subscription's intended start date. Update the credit card information or adjust the subscription start date. ```text E00018 ``` -------------------------------- ### Load AcceptUI.js Library (Sandbox) Source: https://developer.authorize.net/api/reference/features/acceptjs.html Include this script tag to load the AcceptUI.js library for sandbox testing when using the hosted payment form. Ensure it's loaded after your button element is defined. ```html ``` -------------------------------- ### Webhook Notification Payload Example Source: https://developer.authorize.net/api/reference/features/webhooks.html This is an example of a webhook notification payload for a payment event. It includes details about the event, such as `eventType`, `eventDate`, and `payload` which contains transaction-specific information. ```json { "notificationId": "d0e8e7fe-c3e7-4add-a480-27bc5ce28a18", "eventType": "net.authorize.payment.authcapture.created", "eventDate": "2017-03-29T20:48:02.0080095Z", "webhookId": "63d6fea2-aa13-4b1d-a204-f5fbc15942b7", "payload": { "responseCode": 1, "merchantReferenceId": "19102146534003137356", "authCode": "LZ6I19", "avsResponse": "Y", "authAmount": 45.00, "entityName": "transaction", "id": "60020981676" } } ``` -------------------------------- ### Iframe Communicator Message Example Source: https://developer.authorize.net/api/reference/features/accept-hosted.html This example shows the format of a transactResponse message received by an iframe communicator when a customer successfully submits a transaction. It includes order details and payment profile creation status. ```text action=transactResponse&response={"accountType":"MasterCard","accountNumber":"XXXX5454", "transId":"2155590169","responseCode":"1","authorization":"D29J20","merchantName": "G and S Questions Inc.","billTo":{"phoneNumber":"425 111 2222","firstName":"Bob", "lastName":"Smith","address":"1234 Test Ave N.E. %5","city":"Tester","state":"WA","zip": "98009","country":"USA"},"shipTo":{"firstName":"Bob","lastName":"Smith","address": "1234 Test Ave N.E.","city":"Tester","state":"WA","zip":"98009","country":"USA"}, "orderDescription":"Order description","taxAmount":"1.01","shippingAmount":"2.01", "dutyAmount":"3.01","customerId":"CUST12345","totalAmount":"62.88","poNumber": "PO#12345678","orderInvoiceNumber":"INV_pf7JzZb","dateTime":"9/13/2018 5:40:55 PM", "createPaymentProfileResponse":{"success":"true","message":"null"}} ``` -------------------------------- ### Complete HTML Page with Accept.js Integration Source: https://developer.authorize.net/api/reference/features/acceptjs.html This snippet shows a full HTML page that includes the Accept.js library and a form for collecting payment details. It demonstrates how to use the library to securely send payment information to Authorize.Net and handle the response. ```html Sample form
















``` -------------------------------- ### Load AcceptUI.js Library (Production) Source: https://developer.authorize.net/api/reference/features/acceptjs.html Include this script tag to load the AcceptUI.js library for production use when using the hosted payment form. Ensure it's loaded after your button element is defined. ```html ``` -------------------------------- ### Load Accept.js Library (Production) Source: https://developer.authorize.net/api/reference/features/acceptjs.html Include this script tag to load the Accept.js library for production use. Ensure it's loaded after your payment form elements are defined. ```html ``` -------------------------------- ### Get a Webhook Source: https://developer.authorize.net/api/reference/features/webhooks.html Retrieves detailed information about a specific existing webhook using its ID. ```APIDOC ## Get a Webhook ### Description To retrieve details of an existing webhook, follow this method. ### Method GET ### Endpoint https://apitest.authorize.net/rest/v1/webhooks/{webhookId} ### Parameters #### Path Parameters - **webhookId** (string) - Required - The unique identifier of the webhook to retrieve. ### Response #### Success Response (200) - **_links** (object) - Contains links to related resources. - **webhookId** (string) - The unique identifier for the webhook. - **name** (string) - The name of the webhook. - **eventTypes** (array) - A list of event types the webhook is subscribed to. - **status** (string) - The current status of the webhook (e.g., 'active', 'inactive'). - **url** (string) - The URL that receives webhook notifications. ### Response Example ```json { "_links": { "self": { "href": "/rest/v1/webhooks/72a55c78-66e6-4b1e-a4d6-3f925c00561f" } }, "webhookId": "72a55c78-66e6-4b1e-a4d6-3f925c00561f", "name": "My New Webhook", "eventTypes": [ "net.authorize.payment.authcapture.created", "net.authorize.customer.created", "net.authorize.customer.paymentProfile.created", "net.authorize.customer.subscription.expiring" ], "status": "active", "url": "https://{yourserver.com}/{your path}/{your endpoint}" } ``` ``` -------------------------------- ### Invalid Access Token Error Source: https://developer.authorize.net/api/reference/features/oauth.html Example of an error response when an invalid access token is provided. ```APIDOC #### Error Responses The following error is returned when the access token is invalid. ```xml Error E00124 The provided access token is invalid ``` For more information about specific error responses when using the Authorize.net API, see our Response Code Tool. ``` -------------------------------- ### Configuring the Accept.js Payment Button Source: https://developer.authorize.net/api/reference/features/acceptjs.html This HTML button is configured to launch the Accept.js hosted payment information form. It requires the 'AcceptUI' class and several data attributes for customization, including billing address options, API login ID, client key, button text, header text, and payment options. ```html
``` -------------------------------- ### Sample Customer Profile Request with Opaque Data Source: https://developer.authorize.net/api/reference/features/acceptjs.html This XML request demonstrates how to create a customer profile using opaque data. It's useful for storing payment information securely without handling raw card details. ```xml 4vzCzTK46uB 4eT533qH5xD4v62S Merchant_Customer_ID Profile description here customer-profile-email@here.com individual COMMON.ACCEPT.INAPP.PAYMENT eyJjb2RlIjoiNTBfMl8wNjAwMDUyNUMxREY1NEVGNDBGQkNDNDdCNTk3QjI2QzI5MjAzNUJEOTUwRTQ3MjBCMTJDODM2NDk2NDhBMTgwNjg4RTlENTZGMDg5RTE1MEJGMjI4Q0U0NkJCMzQ3QzcwODk1QjE5IiwidG9rZW4iOiI5NTI3ODM1MzMxMzgzOTQ5MTA0NjA0IiwidiI6IjEuMSJ9 liveMode ``` -------------------------------- ### Successful Notification Example Source: https://developer.authorize.net/api/reference/features/webhooks.html This JSON response indicates a webhook notification was successfully delivered. It includes metadata about the event and delivery. ```json { "_links": { "self": { "href": "/rest/v1/notifications/bd4a0c5d-f28b-4e7f-9931-312989ccdd31" } }, "notificationId": "bd4a0c5d-f28b-4e7f-9931-312989ccdd31", "deliveryStatus": "Delivered", "eventType": "net.authorize.payment.authcapture.created", "eventDate": "2017-04-11T09:35:00.96", "webhookId": "56872c2d-c0fb-4d5d-81fb-f34ac45547a3", "retryLog": { "logs": [] } } ``` -------------------------------- ### Create a Webhook Source: https://developer.authorize.net/api/reference/features/webhooks.html Creates a new webhook by sending a POST request to the `/webhooks` endpoint. You must provide a secure URL and a list of event types to subscribe to. ```APIDOC ## Create a Webhook ### Description Creates a webhook to receive event notifications. Requires a secure URL and a list of event types. ### Method POST ### Endpoint `https://apitest.authorize.net/rest/v1/webhooks` ### Parameters #### Request Body - **name** (string) - Optional - A name for the webhook. - **url** (string) - Required - A secure URL to receive webhook messages. Must only contain letters, numbers, dots, hyphens, underscores, and forward slashes. - **eventTypes** (array of strings) - Required - A list of event types to subscribe to. - **status** (string) - Optional - The status of the webhook. Can be `active` or `inactive`. Defaults to `active`. ### Request Example ```json { "name": "My New Webhook", "url": "https://{yourserver.com}/{your path}/{your endpoint}", "eventTypes": [ "net.authorize.payment.authcapture.created", "net.authorize.customer.created", "net.authorize.customer.paymentProfile.created", "net.authorize.customer.subscription.expiring" ], "status": "active" } ``` ### Response Example ```json { "_links": { "self": { "href": "/rest/v1/webhooks/72a55c78-66e6-4b1e-a4d6-3f925c00561f" } }, "webhookId": "72a55c78-66e6-4b1e-a4d6-3f925c00561f", "name": "My New Webhook", "eventTypes": [ "net.authorize.payment.authcapture.created", "net.authorize.customer.created", "net.authorize.customer.paymentProfile.created", "net.authorize.customer.subscription.expiring" ], "status": "active", "url": "https://{yourserver.com}/{your path}/{your endpoint}" } ``` ``` -------------------------------- ### Retrieve Notification History Source: https://developer.authorize.net/api/reference/features/webhooks.html Use this GET request to retrieve the history of a specific notification by its ID. This helps in debugging delivery issues. ```http GET https://apitest.authorize.net/rest/v1/notifications/{{notificationId}} ``` -------------------------------- ### Configure Hosted Payment Return Options Source: https://developer.authorize.net/api/reference/features/accept-hosted.html Control the receipt page, return URLs, and buttons for the payment form and receipt page. When embedded in an iframe, URL parameters are optional. `showReceipt` controls the default receipt page. If `showReceipt` is false, a `url` must be provided. ```json { "hostedPaymentReturnOptions": { "showReceipt": true, "url": "https://mysite.com/receipt", "urlText": "Continue", "cancelUrl": "https://mysite.com/cancel", "cancelUrlText": "Cancel" } } ``` -------------------------------- ### Submitting API Requests with Access Token Source: https://developer.authorize.net/api/reference/features/oauth.html Instructions on how to use the obtained access token for authenticating API requests. ```APIDOC ### Submitting API Requests Use the access token to authenticate transactions. For requests to the Authorize.net API, the access token is included in the `merchantAuthentication` block as shown in the following example: ```json { "authenticateTestRequest": { "merchantAuthentication": { "accessToken": "eyJraWQiOiIyNmRjfjVkZTdlMmYwYTI0ODg0MjU1YjIwZWJjMGY0MSIsImFs" } } } ``` In requests to the REST API, the access token is sent in an HTTP Authorization header with the `Bearer` type, as shown in the following example: ``` Authorization: Bearer eyJraWQiOiIyNmRjfjVkZTdlMmYwYTI0ODg0MjU1YjIwZWJjMGY0MSIsImFs ``` ``` -------------------------------- ### Build Authentication Object with Accept.js Source: https://developer.authorize.net/api/reference/features/acceptjs.html Construct the authentication data object required for submitting secure data to Authorize.net. This object links the payment nonce to your Authorize.net account. ```javascript function sendPaymentDataToAnet() { var authData = {}; authData.clientKey = "YOUR PUBLIC CLIENT KEY"; authData.apiLoginID = "YOUR API LOGIN ID"; } ```