JotForm has been making collecting payments through online forms easy for its users. And one of the most popular Payment Processing Apps that JotForm has available is Authorize.Net. Setting up Authorize.Net payment integration with forms created in JotForm is as easy as 1, 2, 3. Collect payments from product orders and process recurring payments with no additional transaction fees.
Adding the Authorize.Net payment field
On the builder page of the form, (1) BUILD tab, click the (2) Add Form Element button located on the left side of the page. Under the Form Elements side panel, select the (3) PAYMENTS tab. Use the (4) Search Bar and type “Authorize.Net” to easily find the Authorize.Net payment field from the payment field options listed below. (5) Click the Authorize.Net option from the menu to add it to the bottom of the form or under a selected field. Dragging the Authorize.Net payment field so it can already be positioned as being added to the form is possible.
Setting Up the Authorize.Net payment field
Although the Integration Settings opens automatically when the Authorize.Net payment field is added to the form, clicking the (6) Payment Settings icon on the right side of the payment field will also open the (7) Authorize.Net Integration Settings, manually.
API Login ID and Transaction Key
The API Login ID and Transaction Key can be obtained by logging in to the Authorize.Net account on the Authorize.Net website at https://www.authorize.net/
On the Merchant Interface, click the (1) Account tab. Then, on the left side panel, click (2) Settings. And, under Security Settings, click the (3) API Credentials and Keys option.
On the next page, can copy the (4) API Login ID and generate a Transaction Key.
Request and enter a PIN for verification by clicking the (5) Submit button while the New Transaction Key option is selected. The requested PIN will be sent to the email address associated with the Authorize.Net account.
Once verified, the new Transaction Key is displayed.
Related Article: How do I obtain my API Login ID and Transaction-Key
Prices displayed on the form and the amount that Authorize.Net will process is based on the selected currency in the integration settings. The Currency of the Authorize.Net payment field is, by default, set to USD. Other available Currencies that can be selected are EUR, CAD, GBP, and AUD.
🔘 Sell Products — this option allows Authorize.Net to process payments for products that will be sold through the form.
🔘 Sell Subscriptions— this option allows Authorize.Net to process payment(s) for services that will be offered through the form on a recurring basis.
🔘 User Defined Amount — this option allows Authorize.Net to process payments for amounts that will be based on user selections and inputs.
🔘 Collect Donations — this option allows Authorize.Net to process donation amounts that will be based on user selections and inputs.
Check out this guide to see basic payment form examples.
Additional Gateway Settings
Ask Billing Information to Customer
When this option is enabled, the form will send form field data to Authorize.Net.
The Billing Information Fields are, by default, set to None.
If the needed form field is not existing on the form, there is an option to add the field to the form through the Billing Information Field.
The data that will be sent to Authorize.Net can only come from the following form fields.
🔘 Unique ID widget or Short Text field for the (a) Invoice Number Field
🔘 Short Text field for the (b) Company Name Field
🔘 Email field for the (c) Customer Email Field
🔘 Full Name field for the (d) Shipping Name Field
🔘 Address fieldfor the (e) Shipping Address Field
And here will be the result:
Users Can Select Multiple Products
When this option is set as enabled, users can select multiple products on the Authorize.Net payment field similar to when selecting options in a Multiple-choice field (also known as checkbox field). This option is, by default, enabled and is only available on the Sell Products payment type.
Show Total Price on the Form
When this option is set as enabled, the Total Price is shown on the Authorize.Net payment field. This option is, by default, enabled and is only available on Sell Products and User Defined Amount payment types.
When this option is set as enabled, the Authorize.Net payment integration enters Test Mode and it will not charge regular cards. This option is intended for testing the integration. By default, this option is disabled.
Related Guide: How to Test Authorize.net Payment Tool on Sandbox Mode?
Authorize.Net provides Test Card Numbers that can be used for different scenarios and test outcomes.
Related Article: Testing Guide
The Auhorize.Net payment integration allows payment authorization or, also known as, two-steps payment processing. When this option is set as enabled, it is possible to authorize payment and capture it later. Payments can be captured through the Authorize.Net account only. By default, this option is disabled.
Related Article: How Do I Capture a Transaction?
The payment processing services that support Authorize.Net emulation can be set on this option. With this feature, JotForm may still be able to send the transaction to these Payment Gateways that are not currently supported. This is, by default, set to “None”.
Clickable Image Preview
When this option is set as enabled, product and subscription item images will become clickable to enlarge. This option is, by default, enabled.
Use Decimals/Decimal Separator
When this option is enabled, product prices, subscription prices, and the total amount will show decimals up to 2 decimal places, empty decimals are included.
When this option is disabled, product prices, subscription prices, and the total amount will be rounded to the nearest whole number.
RULE: If the number behind the decimal point is 5 or more, it is rounded up to the next whole number.
The Use Decimals option is, by default, enabled and the Decimal Separator is, by default, set as “Point”.
Credit Card Label Text
This refers to the Credit Card section label of the Authorize.Net payment field. By default, this is set as “Credit Card”.
This refers to the Billing Address section label of the Authorize.Net payment field. By default, this is set as “Billing Address”.
Comments and suggestions are welcome below.