Search Developer Site

Authorize.Net Accept.js

Accept.js is a JavaScript-based solution for sending secure payment data directly to Authorize.Net. The Accept JavaScript library intercepts the payment data before it is passed to your server and instead submits it directly to Authorize.Net, which replaces it with a one-time-use token, or payment nonce. This payment nonce, which is returned by the JavaScript library, can be used in the place of payment data in any Authorize.Net API request.

Our JavaScript library offers developers two options for accepting payment:

  • You can host your own payment form for a PCI-DSS SAQ A-EP solution. This gives you complete control of the customer payment experience.
  • Within your payment form, you can include our fully hosted, mobile-optimized payment information form to collect the sensitive card data, which conforms to PCI-DSS SAQ A compliance.

For a fully hosted payment solution that you can redirect your customers to or embed as an IFrame within your page, see our documentation for Accept Hosted.

Generating and Using the Public Client Key

Whether you use the hosted form or non-hosted, you must first generate a merchant identifier that can be safely used in client applications, such as JavaScript Web applications and mobile applications. You should never use your API Transaction Key to make calls from anywhere other than a secure server. Because Accept.js does not initiate any transaction processing, the Public Client Key is safe to use in applications where the code resides on a client-side device, such as a browser or mobile phone.

To generate the Client Key, you must first log into your Authorize.Net account in the Merchant Interface and navigate to Account > Settings > Security Settings > General Security Settings > Manage Public Client Key. If the Public Client Key is present, then it has already been generated and you can access it to include in your client-side code. If the Client Key does not yet exist, you will be prompted to answer your security question before generating the key.

Workflow

Using Your Own Payment Form

You can use the Accept JavaScript library to capture sensitive payment information, entered by the consumer into your form, and send that information directly to Authorize.Net without it ever reaching your server. Authorize.Net responds with a payment nonce that you can use instead of the payment information in any createTransactionRequest API call. This provides you with a PCI-DSS SAQ A-EP compliance profile and a secure payment experience which can be integrated into any application, regardless of the business flow.

Accept.js uses a three-step process to send payment data to Authorize.Net:

1. Accept.js extracts the payment details from your form and sends them directly from the customer's web browser to Authorize.Net, which returns a payment nonce.

2. The browser posts the payment nonce to your server along with any other order information.

3. Your server sends a transaction request (for example, createTransactionRequest) to Authorize.Net using the payment nonce in place of the account number and other payment information.

Using the Hosted Payment Information Form

You can embed our hosted form into your application to capture and send sensitive payment information directly to Authorize.Net without it touching your server. Authorize.Net responds with a payment nonce that you can use in any createTransactionRequest call. This provides you with a PCI-DSS SAQ A compliance profile and a secure payment experience which can be integrated into any application, regardless of the business flow.

Using the hosted payment information form requires a five step process:

1. Define a button on your page that the customer will click to open the payment information form.

2. Your page imports the JavaScript library by calling the script for the appropriate environment (sandbox for testing or production for real transactions).

3. During checkout, the customer clicks the button to call the payment information form, fills out the form, and clicks the button that you defined in step 1.

4. The Accept script sends the payment information directly to Authorize.Net and receives a payment nonce. The script passes the payment nonce to the response handler function that you specified when you defined the button in step 1.

5. Your response handler sends the nonce and any other necessary information from your page back to your server, which sends a transaction request (for example createTransactionRequest) to Authorize.Net using the payment nonce in place of the account number and other payment information.

Integrating the JavaScript Library into Your Page

The appropriate Accept JavaScript library must be integrated into your page so that the sensitive data is intercepted and replaced with the payment nonce before the form contents are submitted to your server.

The Accept JavaScript libraries are hosted by Authorize.Net and must be loaded by your site from the Authorize.Net servers. The libaries are unique to both Authorize.Net environments (production and sandbox), so it is important to load the sandbox library if you are testing transactions, and to use the production library for live transaction processing, as shown below.

Loading the JavaScript Library (with Your Own Payment Form)

Sandbox
Production

Loading the JavaScript Library (with the Hosted Form)

Sandbox
Production

IMPORTANT: When using the payment information form, be sure that your page loads the library after the button is defined.

Building your Payment Form

When you build Accept.js into your own payment form you have complete control over the design and flow. You are only required to identify the elements in the payment form that you wish to process with Accept.js. This usually means that you only need to know the ID attributes of those input elements.

When you integrate the hosted payment information form into your payment form (using AcceptUI.js), you control everything but the fields for card number, expiration date, card code, and optionally, name and postal code. That information is collected on the payment form which pops up when the customer clicks the button you've defined for that purpose.

Integrating Accept.js into Your Payment Form

Form Construction

When building Accept.js into your own payment form, you are only required to identify the elements in the payment form that you will process with Accept.js. This usually means that you only need to know the ID attributes of those input elements.

Note that Accept.js handles card expiration dates as two distinct values for month and year. Additionally, the cardholder name is treated as a single field without breaking it up into first name and last name. If you are designing a new form, it will simplify your integration to keep these formats in mind.

By way of example, we'll start with this simple HTML form. The hidden fields will be used later to hold the payment nonce values returned by Authorize.Net.

Intercepting the Form Submission

To prevent the secure data from reaching your server, the form submission must be intercepted so that the secure details can be transmitted to Authorize.Net and replaced with a payment nonce (a single-use token). Many commonly used libraries include helper functions to perform an action before a form is posted and you can feel free to use those, but for basic HTML the easist way to do this is to capture a user clicking the submit button.

For our sample HTML payment form above, we would replace line number 10 with the following. The sendPaymentDataToAnet() method will be defined in the next section.

Dispatching Data to Authorize.Net

Accept.js includes a method to submit the secure data to Authorize.Net, but before that can be done, use the secure data to populate the required objects. At a minimum, the method to submit the data requires an authentication object (authData) and either a card data object (cardData) or a bank data object (bankData).

Building the Authentication Object

The authentication data object includes only two values, your API Login ID and the Public Client Key that was referenced above. The content of this object is used to tie the payment nonce to your individual Authorize.Net account. This data should be added to an object in your own script on the page.

Building the Card Data Object

The card data object includes all of the payment details that will be replaced by the payment nonce. At a minimum, this includes the card number and expiration date. In the case of our basic sample form, it would also include the card code. As with the authentication data, this should be added to an object.

The complete list of fields that can be inserted into the card data object are:

Card Data Properties

Property Data Type Description Required
cardNumberStringMust be a valid 13-16 digit card number.Yes
monthString2-digit month.Yes
yearString2-digit year.Yes
cardCodeString3 or 4-digit Card CodeNo
zipStringAlphanumeric postal code. 20-character maximum.No
fullNameStringAlphanumeric cardholder name. 64-character maximum.No

Accept.js contains built-in data type validation for these fields. While Accept.js validates the data, it doesn’t do any authorization of the card number or any check to see if the expiration date, postal code, or card code are correct for that card. Those steps will happen later in the process when you submit the payment nonce as part of a transaction request.

Building a Bank Data Object

As an alternative to using card data as shown above, you can also generate a payment nonce using bank account information for eCheck transactions. Use the bankData element to create an object for bank account information as shown below.

The complete list of fields that can be inserted into bankData are:

Bank Data Properties

Property Data Type Description
accountNumberNumeric string.
Up to 17 digits.
The bank account number.
routingNumberNumeric string.
9 digits.
The ABA routing number.
nameOnAccountString.
Up to 22 characters.
The name of the person who holds the bank account.
accountTypeString.
Either checking, savings, or businessChecking.
The type of bank account used for the eCheck.Net transaction.

When sending bankData all fields are required.

Running the Dispatch Data Method

The dispatchData() method takes two inputs. One is an object which collects both the authentication and payment data. The other is the JavaScript method that you will create to handle the Accept.js response. This method can either be defined inline, or can be referenced by name from elsewhere in your script. The response handler function will be created in the next section, but you can see it here referred to simply as responseHandler.

The code above represents the complete sendPaymentDataToAnet() function which was previously set to be executed upon clicking the submit button.

Continue to the Response Handling Section

Integrating the Hosted Payment Information Form

Form Construction

When you use the hosted payment information form, your own payment form can be simpler, collecting only the non-payment information that you need. The only required element is a button to launch the payment information form. You could choose to have that button also act as the submit button for your form by coding your response handler function to submit the rest of the information in your form once you've received the payment nonce. Alternatively, you could set up your response handler to return control to your form allowing the customer to fill or edit more information before clicking a different submit button to pass all of the information to your server.

In the following example, we start with this simple HTML form. The hidden fields will be used later to hold the payment nonce values returned by Authorize.Net.

Adding the Payment Information Form Button to Your Page

You can style the button in any way you like, however, the button must be a member of the AcceptUI class. In addition to the class attribute, a set of required data attributes are used to configure the card entry form.

Button Input Parameters
Parameter Type Description
data-billingAddressOptionsJSON-formatted stringElements of this parameter include:
show - Boolean indicating whether the name and postal code fields should be shown on the form. The default is true.
required - Boolean indicating whether the name and postal code fields are required to be filled in. The default is true.
data-apiLoginIDStringAPI Login ID of the merchant. It can be found in the Authorize.Net Merchant Interface at Account > Settings > Security Settings > General Security Settings > API Credentials and Keys. Required.
data-clientKeyStringPublic Client Key for the merchant. It can be generated in the Authorize.Net Merchant Interface at Account > Settings > Security Settings > General Security Settings > Manage Public Client Key. Required.
data-acceptUIFormBtnTxtStringThis is the text that is displayed on the button. The default is “Pay”.
data-acceptUIFormHeaderTxtStringThis is the text that is displayed on the header of the payment form. The default is to not display any text.
data-responseHandlerresponseHandlerSpecifies the responseHandler JavaScript function.

You don't need to specify an onClick handler or anything else to allow the button to activate the payment form. The button’s membership in the AcceptUI class allows the script to listen for the button’s onClick event.

If you are building your page dynamically, be sure that your page loads the Accept JavaScript library after the button is defined. For the library to correctly interface with the button, the button must already exist in the DOM when the library is loaded.

Handling the Response

You must create a JavaScript function to handle the response from Authorize.Net. This function will receive an object containing the request status as well as the payment nonce (in the case of a successful request).

Response Parameters
Property Type Description
opaqueData.dataDescriptorStringThis value must be passed to the Authorize.Net API, along with dataValue, to represent the card details.
opaqueData.dataValueStringThis value is the payment nonce that you received from Authorize.Net. This value must be passed to the Authorize.Net API, along with dataDescriptor, to represent the card details. The nonce is valid for 15 minutes.
encryptedCardData.cardNumberStringThis is only returned when using the hosted form. Last four digits of the card.
encryptedCardData.expDateStringThis is only returned when using the hosted form. Expiration date submitted with the card.
encryptedCardData.binStringThis is only returned when using the hosted form. Issuer Identification Number (first six digits of the card number).
customerInformation.firstNameStringThis is only returned when using the hosted form. Customer first name submitted with the card.
customerInformation.lastNameStringThis is only returned when using the hosted form. Customer last name submitted with the card.

A complete response from the Authorize.Net servers will look something like the code samples below. These particular examples represents a successful request.

Hosted Form Sample Response Object
Non-Hosted Form Sample Response Object

Examining the Response for Accept.js Request Status

The messages block of the response identifies the result of your request for tokenization through the Accept.js library. The resultCode element will have a status of either Ok or Error, while the message's code and text will provide more meaningful details in the case of a failure. A full list of error codes is provided in the Appendix. For your responseHandler function, you will want to start by checking if the result was an error.

Examining the Response for Card Information (Hosted Form Only)

When you use the hosted form, the encryptedCardData block of the response will contain non-sensitive information about the card which you may want to use to display before completing the transaction. The customerInformation object contains the cardholder name and postal code if captured in the form. Other information, such as opaqueData is just the same as when not using the hosted form version of the library.

Capturing the Opaque Data

When a request is successful, your script will receive the payment nonce in the dataValue element of the opaqueData object. In the case of a successful response, you must capture the value of dataValue. The nonce is valid for 15 minutes.

Your server can call the Authorize.Net API to actually process the transaction just like you would if you were using actual card information.The dataDescriptor and dataValue will be entered into the payment section instead of the card data for any API request.

In this example, we will add lines to the script that will send the opaqueData object on to another function that will insert it into the form for submission to your server.

Updating and Submitting the Payment Form

Once you have successfully integrated the Accept.js library and processed the request to tokenize the payment data, you will have received payment nonce in the form of the dataDescriptor and dataValue, which you will later need for your request to the Authorize.Net API. The nonce is valid for 15 minutes.

The next step is to insert this data into your payment form so that it can be submitted to your server. Important: you must also remove the card payment data from the form so that it won’t get sent to your server (as shown below).

Inserting the Opaque Data

In the original sample HTML, there were two hidden input fields created specifically for the purpose of storing this data. It is now time to insert the data into these fields.

Removing Secure Data

Submitting the Form

This process was kicked off when the user clicked the button to submit the payment form. Now that the process of tokenizing the card data is complete, it is time to allow the form to submit its information to your server. This can be done by adding a single simple JavaScript command, as shown below.

Example of the Complete HTML Page

Following are examples of a complete sample HTML page, constructed from all of the sample code snippets above:

Using the JavaScript Library (with Your Own Payment Form)

Using the JavaScript Library (with the Hosted Form)

A complete example implementation is available in our Sample Application on GitHub.

Using the Payment Nonce in an API Request From Your Server

After using Accept.js, you will have a payment nonce on your server in the form of the dataValue element, which is contained in the opaqueData object. The nonce is valid for 15 minutes. Because this data represents a payment card, an opaqueData payment object can be used anywhere in the Authorize.Net API that accepts a creditCard or bankAccount payment type. The data descriptor and data value will both be needed to build the opaque data payment object in your transaction processing application on your server. This opaque data object then replaces the card or bank account information in an API request.

Building the Opaque Data Payment Type

opaqueData is a generic payment data type which is used to process tokenized or encrypted payment information. The payment type uses a data descriptor to identify the type of payment information and a data value which is the tokenized or encrypted data itself.

Field Name Description Format Required
dataDescriptorIdentifies the type or source of opaque payment data. For Accept transactions, the value must be COMMON.ACCEPT.INAPP.PAYMENTText StringYes
dataValueThe unmodified token or encrypted data BLOB that represents the payment data.Text StringYes
Opaque Data Payment Structure

Sample One-Time Payment Request

Although the opaqueData can be used in numerous API methods, the most common request is to process a one-time payment. Here is a complete sample one-time payment request using our API, with an opaque data object replacing the usual credit card object.

A complete sample request and link to sample code for several programming languages can be found in our API Reference Guide.

Appendix: Error Codes

Code Text Notes
I_WC_01Successful.The request was processed successfully.
E_WC_01Please include Accept.js library from CDN.To maintain security and take advantage of updates, load the Accept.js script from the Authorize.Net servers.
E_WC_02A HTTPS connection is required.The page that embeds Accept.js must be served over an HTTPS connection.
E_WC_03Accept.js is not loaded correctly.Ensure that the Accept.js library is loaded from the Authorize.Net servers and that the Accept.js script executed in the browser matches the version stored on the server. This error typically occurs when the script is loaded from a local source, or when the browser or proxy has improperly cached an older version of the script.
E_WC_04Please provide mandatory field to library.When sending card information, you must include cardNumber and the expiration date (month and year). When sending bank information, you must include accountNumber, routingNumber, nameOnAccount, and accountType.
E_WC_05Please provide valid credit card number.If card information is provided, cardNumber) must pass a Luhn mod 10 check.
E_WC_06Please provide valid expiration month.If card information is provided, the expiration month (month) must be a maximum of two digits.
E_WC_07Please provide valid expiration year.If card information is provided, the expiration year (year) must be in either YY or YYYY format.
E_WC_08If card information is provided, the expiration date (month and year) must be in the future.
E_WC_10Please provide valid apiLoginID.The value of apiLoginID must be same as the ID that you use to authenticate API requests.
E_WC_13Invalid Fingerprint.The Accept.js script executed in the browser doesn't match the version stored on the server. This error typically occurs when the browser or proxy has improperly cached an older version of the script.
E_WC_14Accept.js encryption failed.A general error. Encrypting and transmitting the card data failed, either within the browser or at the Authorize.Net servers.
E_WC_15Please provide valid CVV.The value of cardCode must be three or four digits.
E_WC_16Please provide valid ZIP code.The postal code (zip) is optional but should be no more than 20 characters if included.
E_WC_17Please provide valid card holder name.The cardholder name (fullName) is optional but should be no more than 64 characters if included.
E_WC_18Client Key is required.The value for clientKey can be obtained through the Authorize.Net Merchant Interface, by navigating to Account > Settings > Security Settings > General Security Settings > Manage Public Client Key.
E_WC_19An error occurred during processing. Please try again.Check the value of the API Login ID. The value of apiLoginID must be same as the ID that you use to authenticate API requests. Additionally, an API Login ID generated for the Sandbox environment can only be used with the Sandbox version of the script. An API Login ID generated for the Production environment can only be used with the Production version of the script.
E_WC_21User authentication failed due to invalid authentication values.Either the API Login ID or Public Client Key, or both values, are incorrect. The value of apiLoginID must be same as the ID that you use to authenticate API requests. The value for clientKey can be obtained through the Authorize.Net Merchant Interface, by navigating to Account > Settings > Security Settings > General Security Settings > Manage Public Client Key.
E_WC_23Please provide either card information or bank information.Either cardData or bankData must be provided, but not both.
E_WC_24Please provide valid account number.If bank information is provided, accountNumber must be no more than 17 digits.
E_WC_25Please provide valid routing number.If bank information is provided, routingNumber must be nine digits.
E_WC_26Please provide valid account holder name.If bank information is provided, nameOnAccount must be no more than 22 characters.
E_WC_27Please provide valid account type.If bank information is provided, accountType must be one of the following: checking, savings, or businessChecking.