[web] add error messages for payment failing on upgrade (#27054)

* [web] add error messages for payment failing to upgrade modal
* [web] show payment error on preview change page
* [web] add separate message for 3ds failure

GitOrigin-RevId: b2680ff9b4f01e42f31c1c11457f216a5eadf49d

services/web/app/src/Features/Subscription/SubscriptionController.js

@@ -20,6 +20,7 @@ const {
   DuplicateAddOnError,
   AddOnNotPresentError,
   PaymentActionRequiredError,
+  PaymentFailedError,
 } = require('./Errors')
 const SplitTestHandler = require('../SplitTests/SplitTestHandler')
 const AuthorizationManager = require('../Authorization/AuthorizationManager')
@@ -449,11 +450,29 @@ async function purchaseAddon(req, res, next) {
         { addon: addOnCode }
       )
     } else if (err instanceof PaymentActionRequiredError) {
+      logger.debug(
+        { userId: user._id },
+        'Customer needs to perform payment action to complete transaction'
+      )
       return res.status(402).json({
         message: 'Payment action required',
         clientSecret: err.info.clientSecret,
         publicKey: err.info.publicKey,
       })
+    } else if (err instanceof PaymentFailedError) {
+      logger.debug(
+        {
+          userId: user._id,
+          reason: err.info.reason,
+          adviceCode: err.info.adviceCode,
+        },
+        'Payment failed for transaction'
+      )
+      return res.status(402).json({
+        message: 'Payment failed',
+        reason: err.info.reason,
+        adviceCode: err.info.adviceCode,
+      })
     } else {
       if (err instanceof Error) {
         OError.tag(err, 'something went wrong purchasing add-ons', {