I recently upgraded one of my clients website from Magento 2.4.2 to Magento 2.4.4 and the site uses Braintree as the payment gateway and the backend Braintree Virtual Terminal is used quite frequently in their business.

After the upgrade, the virtual terminal stopped working though it’s still inconclusive if it was good by the Magento upgrade.

Issue:

Braintree Virtual Terminal does not work and clicking on the Take Payment button returns the following error in console:

virtual.js:144 Uncaught TypeError: this.$container.validate is not a function
    at UiClass.submitOrder (virtual.js:144:29)
    at HTMLFormElement.dispatch (jquery.js:5430:49)
    at elemData.handle (jquery.js:5234:47)
    at Object.trigger (jquery.js:8719:28)
    at HTMLFormElement.<anonymous> (jquery.js:8797:30)
    at Function.each (jquery.js:385:35)
    at jQuery.fn.init.each (jquery.js:207:27)
    at jQuery.fn.init.trigger (jquery.js:8796:25)
    at $.<computed>.<computed>._click (button.js:48:31)
    at $.<computed>.<computed>._click (jquery-ui.js:143:41)

Steps to replicate:

• Go to Magento admin > Sales > Braintree virtual terminal and add test card details and fill the dummy information > Click Take Payment
• Nothing happens and instead a console error is returned

Fix:

I found that the required jQuery validator was missing in vendor/paypal/module-braintree-core/view/adminhtml/web/js/virtual.js and adding the missing library fixed the issue.

Since this was a core modification and there is no fix available yet so I have created a patch that you can apply with composer to add the missing library. Please note it is never a good idea to modify the core code file directly so either create a preference/override or create a diff patch to apply via composer.

To apply the patch, create a new file called diff.patch and put the following code in it and finally, install it with composer update.

diff --git a/vendor/paypal/module-braintree-core/view/adminhtml/web/js/virtual.js b/vendor/paypal/module-braintree-core/view/adminhtml/web/js/virtual.js
--- a/vendor/paypal/module-braintree-core/view/adminhtml/web/js/virtual.js
+++ b/vendor/paypal/module-braintree-core/view/adminhtml/web/js/virtual.js
@@ -12,7 +12,8 @@
     'mage/translate',
     'PayPal_Braintree/js/validator',
     'braintree',
-    'braintreeHostedFields'
+    'braintreeHostedFields',
+    'jquery/validate'
 ], function ($, Class, alert, domObserver, $t, validator, client, hostedFields) {
     'use strict';