feat: update subscription check out url handling

app/scripts/metamask-controller.js

@@ -372,7 +372,7 @@ import { NameControllerInit } from './controller-init/confirmations/name-control
 import { GasFeeControllerInit } from './controller-init/confirmations/gas-fee-controller-init';
 import { SelectedNetworkControllerInit } from './controller-init/selected-network-controller-init';
 import { SubscriptionControllerInit } from './controller-init/subscription';
-import { webAuthenticatorFactory } from './services/oauth/web-authenticator-factory';
+import { getIdentityAPI } from './services/oauth/web-authenticator-factory';
 import { AccountTrackerControllerInit } from './controller-init/account-tracker-controller-init';
 import { OnboardingControllerInit } from './controller-init/onboarding-controller-init';
 import { RemoteFeatureFlagControllerInit } from './controller-init/remote-feature-flag-controller-init';
@@ -2219,29 +2219,77 @@ export default class MetamaskController extends EventEmitter {
     return publicConfigStore;
   }
 
-  async startSubscriptionWithCard(params) {
-    const webAuthenticator = webAuthenticatorFactory();
+  async startSubscriptionWithCard(
+    params,
+    /* current tab can be undefined if open from non tab context (e.g. popup, background) */
+    currentTabId,
+  ) {
+    const identityAPI = getIdentityAPI();
+    const redirectUrl = identityAPI.getRedirectURL();
+
     const { checkoutSessionUrl } =
-      await this.subscriptionController.startShieldSubscriptionWithCard(params);
-    // TODO: use chrome.tabs manually to have full browser feature in checkout session (e.g auto-fill form, etc.)
-    // use same launchWebAuthFlow api as oauth service to launch the stripe checkout session and get redirected back to extension from a pop up
-    // without having to handle chrome.windows.create and chrome.tabs.onUpdated event explicitly
+      await this.subscriptionController.startShieldSubscriptionWithCard({
+        ...params,
+        successUrl: redirectUrl,
+      });
+
+    const checkoutTab = await this.platform.openTab({
+      url: checkoutSessionUrl,
+    });
+
+    // --- We will define our listeners here so we can reference them for cleanup ---
+    // eslint-disable-next-line prefer-const
+    let onTabUpdatedListener;
+    // eslint-disable-next-line prefer-const
+    let onTabRemovedListener;
+
     await new Promise((resolve, reject) => {
-      webAuthenticator.launchWebAuthFlow(
-        {
-          url: checkoutSessionUrl,
-          interactive: true,
-        },
-        (responseUrl) => {
-          try {
-            resolve(responseUrl);
-          } catch (error) {
-            reject(error);
+      let checkoutSucceeded = false;
+      const cleanupListeners = () => {
+        // Important: Remove both listeners to prevent memory leaks
+        if (onTabUpdatedListener) {
+          this.platform.removeTabUpdatedListener(onTabUpdatedListener);
+        }
+        if (onTabRemovedListener) {
+          this.platform.removeTabRemovedListener(onTabRemovedListener);
+        }
+      };
+
+      // Set up a listener to watch for navigation on that specific tab
+      onTabUpdatedListener = (tabId, changeInfo, _tab) => {
+        // We only care about updates to our specific checkout tab
+        if (tabId === checkoutTab.id && changeInfo.url) {
+          if (changeInfo.url.startsWith(redirectUrl)) {
+            // Payment was successful!
+            checkoutSucceeded = true;
+
+            // Clean up: close the tab
+            this.platform.closeTab(tabId);
           }
-        },
-      );
+          // TODO: handle cancel url ?
+        }
+      };
+      this.platform.addTabUpdatedListener(onTabUpdatedListener);
+
+      // Set up a listener to watch for tab removal
+      onTabRemovedListener = (tabId) => {
+        if (tabId === checkoutTab.id) {
+          cleanupListeners();
+          if (checkoutSucceeded) {
+            resolve();
+          } else {
+            reject(new Error('Checkout failed'));
+          }
+        }
+      };
+      this.platform.addTabRemovedListener(onTabRemovedListener);
     });
 
+    if (!currentTabId) {
+      // open extension browser shield settings if open from pop up (no current tab)
+      this.platform.openExtensionInBrowser('/settings/transaction-shield');
+    }
+
     // fetch latest user subscriptions after checkout
     const subscriptions = await this.subscriptionController.getSubscriptions();
     return subscriptions;

app/scripts/platforms/extension.js

@@ -147,6 +147,22 @@ export default class ExtensionPlatform {
     browser.windows.onRemoved.addListener(listener);
   }
 
+  addTabRemovedListener(listener) {
+    browser.tabs.onRemoved.addListener(listener);
+  }
+
+  removeTabRemovedListener(listener) {
+    browser.tabs.onRemoved.removeListener(listener);
+  }
+
+  addTabUpdatedListener(listener) {
+    browser.tabs.onUpdated.addListener(listener);
+  }
+
+  removeTabUpdatedListener(listener) {
+    browser.tabs.onUpdated.removeListener(listener);
+  }
+
   async getAllWindows() {
     const windows = await browser.windows.getAll();
     return windows;

package.json

@@ -356,7 +356,7 @@
     "@metamask/solana-wallet-snap": "^2.4.0",
     "@metamask/solana-wallet-standard": "^0.5.1",
     "@metamask/streams": "^0.4.0",
-    "@metamask/subscription-controller": "^0.1.0",
+    "@metamask/subscription-controller": "^0.2.0",
     "@metamask/transaction-controller": "^60.2.0",
     "@metamask/user-operation-controller": "^39.0.0",
     "@metamask/utils": "^11.4.2",

ui/pages/settings/transaction-shield-tab/cancel-membership-modal.test.tsx

@@ -20,6 +20,7 @@ const mockSubscription: Subscription = {
     card: {
       brand: 'Visa',
       last4: '1234',
+      displayBrand: 'Visa',
     },
   },
 };

ui/pages/settings/transaction-shield-tab/transaction-shield.test.tsx

@@ -44,6 +44,7 @@ describe('Transaction Shield Page', () => {
             card: {
               brand: 'Visa',
               last4: '1234',
+              displayBrand: 'Visa',
             },
           },
         } satisfies Subscription,

ui/store/actions.ts

@@ -392,9 +392,10 @@ export function startSubscriptionWithCard(params: {
   recurringInterval: RecurringInterval;
 }): ThunkAction<Subscription[], MetaMaskReduxState, unknown, AnyAction> {
   return async (_dispatch: MetaMaskReduxDispatch) => {
+    const currentTab = await global.platform.currentTab();
     const subscriptions = await submitRequestToBackground<Subscription[]>(
       'startSubscriptionWithCard',
-      [params],
+      [params, currentTab?.id],
     );
 
     return subscriptions;

yarn.lock

@@ -7475,16 +7475,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@metamask/subscription-controller@npm:^0.1.0":
-  version: 0.1.0
-  resolution: "@metamask/subscription-controller@npm:0.1.0"
+"@metamask/subscription-controller@npm:^0.2.0":
+  version: 0.2.0
+  resolution: "@metamask/subscription-controller@npm:0.2.0"
   dependencies:
-    "@metamask/base-controller": "npm:^8.3.0"
+    "@metamask/base-controller": "npm:^8.4.0"
     "@metamask/controller-utils": "npm:^11.14.0"
     "@metamask/utils": "npm:^11.8.0"
   peerDependencies:
     "@metamask/profile-sync-controller": ^25.0.0
-  checksum: 10/f99dd74b6b057a357676447222f75a3753ce7522e2ff61002de46809bd67bcc3b8d71d246260aae302c3a458fec62ff543b03cf018d89bf77f1734292d24e6ca
+  checksum: 10/c97a25966f6a4f3670bb096e4b31e5c458705fd8224bbe6bc861104ed03ac775ae4d7d1038c62a31e3327cc079ae0cf1920e64407b868f5e4d147aebb057789b
   languageName: node
   linkType: hard
 
@@ -32003,7 +32003,7 @@ __metadata:
     "@metamask/solana-wallet-snap": "npm:^2.4.0"
     "@metamask/solana-wallet-standard": "npm:^0.5.1"
     "@metamask/streams": "npm:^0.4.0"
-    "@metamask/subscription-controller": "npm:^0.1.0"
+    "@metamask/subscription-controller": "npm:^0.2.0"
     "@metamask/superstruct": "npm:^3.2.1"
     "@metamask/test-bundler": "npm:^1.0.0"
     "@metamask/test-dapp": "npm:9.3.0"