PREREQUISITES: Make sure the Authorize.Net Accept.js add-on is installed and enabled.
To enable Authorize.Net Accept.js as a payment method in your online store, add it to the list of your store's active payment methods:
Go to the Payment Methods page in your store's Admin area (Store Setup> Payment Methods). Then, in the Online methods section, click Add payment method:
In the popup box that appears, find the Authorize.Net Accept.js method and select to Add this method:
If the Authorize.NET Accept.js add-on is not installed in your online store at the time of adding the method, there will be an Install button instead of Add:
Use this button to install the add-on and add the method.
Configure the Authorize.Net Accept.js payment on the payment settings page as follows:
If you don't have a registered account with Authorize.NET, sign up using the Sign up for Authorize.NET link at the top of the page.
Next, you'll need to specify the following settings:
API Login ID: Locate your API Login ID in the Authorize.NET Merchant Interface ("Security Settings" section -> "API Credentials & Keys" link), copy the value, and paste it here.
Transaction key: Specify the transaction key in this field.
To obtain the transaction key from the Merchant Interface, do as follows:
Log into the Merchant Interface
Select Settings from the Main Menu
Click on Obtain Transaction Key in the Security section
Answer the secret question configured on the setup
Public key: Specify your Authorize.NET public key
Transaction type: If you set the value as Auth only, you'll need to process each transaction manually. This option is preferred if you need to have an opportunity to void orders. If you set the value as Auth and Capture, your online store will process all transactions automatically.
Test/Live mode: Use this setting to select the operation mode for your Authorize.NET integration. Before you can offer Authorize.Net Accept.js payment on your website, you will first need to successfully carry out some required test transactions. To do the testing, you will need to set the operation mode of your integration to Test. Then, when the payment is ready for production use, you can switch the Test/Live mode setting to Live.
Invoice number prefix: If you use the same account to accept payments from more than one X-Cart store, use this field to set an invoice number prefix for this store. The prefix will serve as an identifier of the store and help you avoid the "duplicate invoice number" type. Limit the length of the invoice prefix to 9 characters. Larger prefixes will be cut before transaction initialization.
Save the settings.
If necessary, add the payment description or change the payment name in the Names, Descriptions & Sorting tab of the Store Setup -> Payment Methods section in the Admin area.
For details, see Sorting Payment Methods on the Storefront.
The payment position at checkout will be as defined on this page, i.e., if this is the first active payment method, it will be shown first at checkout.
When a customer chooses to pay an order with Authorize.Net Accept.js, they'll be able to submit the credit card data info directly on the checkout page in your online store. This info will be safely transferred to the Authorize.Net site and processed there.