Lazy-load Stripe SDK so it only loads on checkout (#6546)

# Description of Changes

- Stripe SDK (`@stripe/*` + `js.stripe.com/v3`) was loading on every
page; now it only loads when an upgrade/checkout modal actually opens.
- Converted every import site to `React.lazy()` + `<Suspense>`, gated by
the existing `opened` state.
- Adds a Playwright spec that asserts no Stripe requests on landing or
settings.



---

## Checklist

### General

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md)
(if applicable)
- [ ] I have performed a self-review of my own code
- [ ] My changes generate no new warnings

### Documentation

- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### Translations (if applicable)

- [ ] I ran
[`scripts/counter_translation.py`](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/docs/counter_translation.md)

### UI Changes (if applicable)

- [ ] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

### Testing (if applicable)

- [ ] I have run `task check` to verify linters, typechecks, and tests
pass
- [ ] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md#7-testing)
for more details.

frontend/editor/src/saas/components/TrialExpiredBootstrap.tsx

@@ -1,7 +1,10 @@
-import { useEffect, useState } from "react";
+import { lazy, Suspense, useEffect, useState } from "react";
 import { useAuth } from "@app/auth/UseSession";
 import { TrialExpiredModal } from "@app/components/shared/TrialExpiredModal";
-import StripeCheckout from "@app/components/shared/StripeCheckoutSaas";
+
+const StripeCheckout = lazy(
+  () => import("@app/components/shared/StripeCheckoutSaas"),
+);
 
 /**
  * Bootstrap component that shows the trial expired modal when a user's trial has ended
@@ -106,20 +109,22 @@ export default function TrialExpiredBootstrap() {
         onSubscribe={handleSubscribe}
       />
 
-      {user && (
-        <StripeCheckout
-          opened={checkoutOpened}
-          onClose={handleCheckoutClose}
-          purchaseType="subscription"
-          planId="pro"
-          creditsPack={null}
-          planName="Pro"
-          onSuccess={handleCheckoutSuccess}
-          onError={(error) =>
-            console.error("[TrialExpired] Checkout error:", error)
-          }
-          isTrialConversion={false} // Trial already ended, so this is not a conversion
-        />
+      {user && checkoutOpened && (
+        <Suspense fallback={null}>
+          <StripeCheckout
+            opened={checkoutOpened}
+            onClose={handleCheckoutClose}
+            purchaseType="subscription"
+            planId="pro"
+            creditsPack={null}
+            planName="Pro"
+            onSuccess={handleCheckoutSuccess}
+            onError={(error) =>
+              console.error("[TrialExpired] Checkout error:", error)
+            }
+            isTrialConversion={false} // Trial already ended, so this is not a conversion
+          />
+        </Suspense>
       )}
     </>
   );

frontend/editor/src/saas/components/shared/TrialStatusBanner.tsx

@@ -1,11 +1,14 @@
-import { useEffect, useState, useCallback } from "react";
+import { lazy, Suspense, useEffect, useState, useCallback } from "react";
 import { useBanner } from "@app/contexts/BannerContext";
 import { useAuth } from "@app/auth/UseSession";
 import { useTranslation } from "react-i18next";
 import { InfoBanner } from "@app/components/shared/InfoBanner";
-import StripeCheckout from "@app/components/shared/StripeCheckoutSaas";
 import { BASE_PATH } from "@app/constants/app";
 
+const StripeCheckout = lazy(
+  () => import("@app/components/shared/StripeCheckoutSaas"),
+);
+
 const SESSION_STORAGE_KEY = "trialBannerDismissed";
 
 export function TrialStatusBanner() {
@@ -113,18 +116,20 @@ export function TrialStatusBanner() {
 
   return (
     <>
-      {trialStatus && (
-        <StripeCheckout
-          opened={checkoutOpen}
-          onClose={() => setCheckoutOpen(false)}
-          purchaseType="subscription"
-          planId="pro"
-          creditsPack={null}
-          planName="Pro"
-          onSuccess={handleCheckoutSuccess}
-          onError={(error) => console.error("Checkout error:", error)}
-          isTrialConversion={true}
-        />
+      {trialStatus && checkoutOpen && (
+        <Suspense fallback={null}>
+          <StripeCheckout
+            opened={checkoutOpen}
+            onClose={() => setCheckoutOpen(false)}
+            purchaseType="subscription"
+            planId="pro"
+            creditsPack={null}
+            planName="Pro"
+            onSuccess={handleCheckoutSuccess}
+            onError={(error) => console.error("Checkout error:", error)}
+            isTrialConversion={true}
+          />
+        </Suspense>
       )}
     </>
   );

frontend/editor/src/saas/components/shared/config/configSections/Plan.tsx

@@ -1,11 +1,15 @@
-import React, { useState, useCallback, useEffect } from "react";
+import React, { lazy, Suspense, useState, useCallback, useEffect } from "react";
 import { Divider, Loader, Alert, Select, Group, Text } from "@mantine/core";
 import { usePlans, PlanTier } from "@app/hooks/usePlans";
-import StripeCheckout, {
+import type {
   PurchaseType,
   CreditsPack,
   PlanID,
 } from "@app/components/shared/StripeCheckoutSaas";
+
+const StripeCheckout = lazy(
+  () => import("@app/components/shared/StripeCheckoutSaas"),
+);
 import AvailablePlansSection from "@app/components/shared/config/configSections/plan/AvailablePlansSection";
 import ApiPackagesSection from "@app/components/shared/config/configSections/plan/ApiPackagesSection";
 import ActivePlanSection from "@app/components/shared/config/configSections/plan/ActivePlanSection";
@@ -204,29 +208,36 @@ const Plan: React.FC = () => {
       />
 
       {/* Stripe Checkout Modal */}
-      <StripeCheckout
-        opened={
-          checkoutOpen &&
-          (selectedPlan !== null || selectedCreditsPack !== null)
-        }
-        onClose={handleCheckoutClose}
-        purchaseType={purchaseType}
-        planId={
-          purchaseType === "subscription" ? (selectedPlan?.id as PlanID) : null
-        }
-        creditsPack={purchaseType === "credits" ? selectedCreditsPack : null}
-        planName={
-          purchaseType === "subscription"
-            ? selectedPlan?.name || ""
-            : data?.apiPackages.find((pkg) => pkg.id === selectedCreditsPack)
-                ?.name || ""
-        }
-        onSuccess={handlePaymentSuccess}
-        onError={handlePaymentError}
-        isTrialConversion={
-          trialStatus?.isTrialing && purchaseType === "subscription"
-        }
-      />
+      {checkoutOpen &&
+        (selectedPlan !== null || selectedCreditsPack !== null) && (
+          <Suspense fallback={null}>
+            <StripeCheckout
+              opened={true}
+              onClose={handleCheckoutClose}
+              purchaseType={purchaseType}
+              planId={
+                purchaseType === "subscription"
+                  ? (selectedPlan?.id as PlanID)
+                  : null
+              }
+              creditsPack={
+                purchaseType === "credits" ? selectedCreditsPack : null
+              }
+              planName={
+                purchaseType === "subscription"
+                  ? selectedPlan?.name || ""
+                  : data?.apiPackages.find(
+                      (pkg) => pkg.id === selectedCreditsPack,
+                    )?.name || ""
+              }
+              onSuccess={handlePaymentSuccess}
+              onError={handlePaymentError}
+              isTrialConversion={
+                trialStatus?.isTrialing && purchaseType === "subscription"
+              }
+            />
+          </Suspense>
+        )}
     </div>
   );
 };

frontend/editor/src/saas/components/shared/config/configSections/plan/ApiPackagesSection.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Button, Card, Text, Stack, Flex, Slider } from "@mantine/core";
 import { useTranslation } from "react-i18next";
-import { CreditsPack } from "@app/components/shared/StripeCheckoutSaas";
+import type { CreditsPack } from "@app/components/shared/StripeCheckoutSaas";
 
 interface ApiPackage {
   id: string;