This article provides an explanation and fix for the Magento Commerce 2.3.X issue where the checkout gets stuck if Authorize.net is used, with the 'Cannot read property 'length' of null' error message in the browser console log.
Affected products and versions
- Magento Commerce 2.3.X
The core Magento Authorize.Net payment integration is deprecated since 2.3.4 and will be completely removed in 2.4.0. Use the official extension from marketplace instead.
Issue
Steps to reproduce
- Configure the Authorize.net payment method in the Magento Admin.
- Go to the storefront.
- Add a product to the cart and proceed to checkout.
- Choose Authorize.net as a payment method.
- Click Place Order.
Expected result
The Authorize.net iframe is loaded.
Actual result
Ajax spinner is displayed, and the page never loads. The following JS error is displayed in the browser console log: 'Uncaught TypeError: Cannot read property 'length' of null at b (jstest.authorize.net/v1/AcceptCore.js:1)'
Cause
One of the most common reasons of this issue is the Public Client Key not being specified in the Authorize.Net configuration in the Magento Admin.
Solution
Under Stores > Settings > Configuration > Sales > Payment Methods, in the Authorize.net section, check if the value is specified in the Public Client Key field. If it is empty, enter the key value from your Authorize.Net merchant account.
For the changes to be applied, clean the cache by running bin/magento cache:clean.
Related reading
- Authorize.net in Magento User Guide.