Task/eliminate ngx-stripe (#6116)

* Eliminate ngx-stripe

* Update changelog

CHANGELOG.md

@@ -10,12 +10,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Added a new endpoint to get all platforms (`GET api/v1/platforms`)
+- Added the session url to the endpoint response of the _Stripe_ checkout
 
 ### Changed
 
 - Improved the routing of the user detail dialog in the users section of the admin control panel
 - Lifted the asset profile identifier editing restriction for `MANUAL` data sources in the asset profile details dialog of the admin control panel
+- Deprecated the public _Stripe_ key
 - Improved the language localization for German (`de`)
+- Eliminated `ngx-stripe`
 - Upgraded `angular` from version `20.2.4` to `20.3.9`
 - Upgraded `ng-extract-i18n-merge` from `3.1.0` to `3.2.1`
 - Upgraded `Nx` from version `21.5.1` to `22.1.3`

apps/api/src/app/subscription/subscription.service.ts

@@ -100,7 +100,8 @@ export class SubscriptionService {
     );
 
     return {
-      sessionId: session.id
+      sessionId: session.id,
+      sessionUrl: session.url
     };
   }
 

apps/client/src/app/components/user-account-membership/user-account-membership.component.ts

@@ -21,9 +21,8 @@ import { MatCardModule } from '@angular/material/card';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { RouterModule } from '@angular/router';
 import ms, { StringValue } from 'ms';
-import { StripeService } from 'ngx-stripe';
 import { EMPTY, Subject } from 'rxjs';
-import { catchError, switchMap, takeUntil } from 'rxjs/operators';
+import { catchError, takeUntil } from 'rxjs/operators';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -62,7 +61,6 @@ export class GfUserAccountMembershipComponent implements OnDestroy {
     private dataService: DataService,
     private notificationService: NotificationService,
     private snackBar: MatSnackBar,
-    private stripeService: StripeService,
     private userService: UserService
   ) {
     const { baseCurrency, globalPermissions } = this.dataService.fetchInfo();
@@ -113,23 +111,17 @@ export class GfUserAccountMembershipComponent implements OnDestroy {
         priceId: this.priceId
       })
       .pipe(
-        catchError((error) => {
+        catchError((error: Error) => {
           this.notificationService.alert({
             title: error.message
           });
 
-          throw error;
+          return EMPTY;
         }),
-        switchMap(({ sessionId }) => {
-          return this.stripeService.redirectToCheckout({ sessionId });
-        })
+        takeUntil(this.unsubscribeSubject)
       )
-      .subscribe((result) => {
-        if (result.error) {
-          this.notificationService.alert({
-            title: result.error.message
-          });
-        }
+      .subscribe(({ sessionUrl }) => {
+        window.location.href = sessionUrl;
       });
   }
 

apps/client/src/app/pages/pricing/pricing-page.component.ts

@@ -27,9 +27,8 @@ import {
   informationCircleOutline
 } from 'ionicons/icons';
 import { StringValue } from 'ms';
-import { StripeService } from 'ngx-stripe';
-import { Subject } from 'rxjs';
-import { catchError, switchMap, takeUntil } from 'rxjs/operators';
+import { EMPTY, Subject } from 'rxjs';
+import { catchError, takeUntil } from 'rxjs/operators';
 
 @Component({
   host: { class: 'page' },
@@ -98,7 +97,6 @@ export class GfPricingPageComponent implements OnDestroy, OnInit {
     private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
     private notificationService: NotificationService,
-    private stripeService: StripeService,
     private userService: UserService
   ) {
     addIcons({
@@ -155,23 +153,17 @@ export class GfPricingPageComponent implements OnDestroy, OnInit {
         priceId: this.priceId
       })
       .pipe(
-        switchMap(({ sessionId }) => {
-          return this.stripeService.redirectToCheckout({ sessionId });
-        }),
-        catchError((error) => {
+        catchError((error: Error) => {
           this.notificationService.alert({
             title: error.message
           });
 
-          throw error;
-        })
+          return EMPTY;
+        }),
+        takeUntil(this.unsubscribeSubject)
       )
-      .subscribe((result) => {
-        if (result.error) {
-          this.notificationService.alert({
-            title: result.error.message
-          });
-        }
+      .subscribe(({ sessionUrl }) => {
+        window.location.href = sessionUrl;
       });
   }
 

apps/client/src/main.ts

@@ -23,7 +23,6 @@ import { ServiceWorkerModule } from '@angular/service-worker';
 import { provideIonicAngular } from '@ionic/angular/standalone';
 import { provideMarkdown } from 'ngx-markdown';
 import { provideNgxSkeletonLoader } from 'ngx-skeleton-loader';
-import { NgxStripeModule, STRIPE_PUBLISHABLE_KEY } from 'ngx-stripe';
 
 import { CustomDateAdapter } from './app/adapter/custom-date-adapter';
 import { DateFormats } from './app/adapter/date-formats';
@@ -50,8 +49,6 @@ import { environment } from './environments/environment';
 
   (window as any).info = info;
 
-  environment.stripePublicKey = info.stripePublicKey;
-
   if (environment.production) {
     enableProdMode();
   }
@@ -65,7 +62,6 @@ import { environment } from './environments/environment';
         MatNativeDateModule,
         MatSnackBarModule,
         MatTooltipModule,
-        NgxStripeModule.forRoot(environment.stripePublicKey),
         RouterModule.forRoot(routes, {
           anchorScrolling: 'enabled',
           preloadingStrategy: ModulePreloadService,
@@ -92,10 +88,6 @@ import { environment } from './environments/environment';
         provide: MAT_DATE_FORMATS,
         useValue: DateFormats
       },
-      {
-        provide: STRIPE_PUBLISHABLE_KEY,
-        useFactory: () => environment.stripePublicKey
-      },
       {
         provide: TitleStrategy,
         useClass: PageTitleStrategy

libs/common/src/lib/interfaces/info-item.interface.ts

@@ -18,6 +18,9 @@ export interface InfoItem {
   platforms: Platform[];
 
   statistics: Statistics;
+
+  /** @deprecated */
   stripePublicKey?: string;
+
   subscriptionOffer?: SubscriptionOffer;
 }

libs/common/src/lib/interfaces/responses/create-stripe-checkout-session-response.interface.ts

@@ -1,3 +1,6 @@
 export interface CreateStripeCheckoutSessionResponse {
+  /** @deprecated */
   sessionId: string;
+
+  sessionUrl: string;
 }

package-lock.json

@@ -41,7 +41,6 @@
         "@prisma/client": "6.19.0",
         "@simplewebauthn/browser": "13.1.0",
         "@simplewebauthn/server": "13.1.1",
-        "@stripe/stripe-js": "7.9.0",
         "ai": "4.3.16",
         "alphavantage": "2.2.0",
         "big.js": "7.0.1",
@@ -76,7 +75,6 @@
         "ngx-device-detector": "10.1.0",
         "ngx-markdown": "20.0.0",
         "ngx-skeleton-loader": "11.3.0",
-        "ngx-stripe": "20.7.0",
         "open-color": "1.9.1",
         "papaparse": "5.3.1",
         "passport": "0.7.0",
@@ -11040,15 +11038,6 @@
         "storybook": "^10.1.10"
       }
     },
-    "node_modules/@stripe/stripe-js": {
-      "version": "7.9.0",
-      "resolved": "https://registry.npmjs.org/@stripe/stripe-js/-/stripe-js-7.9.0.tgz",
-      "integrity": "sha512-ggs5k+/0FUJcIgNY08aZTqpBTtbExkJMYMLSMwyucrhtWexVOEY1KJmhBsxf+E/Q15f5rbwBpj+t0t2AW2oCsQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=12.16"
-      }
-    },
     "node_modules/@swc/helpers": {
       "version": "0.5.17",
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.17.tgz",
@@ -25113,20 +25102,6 @@
         "@angular/core": ">=19.0.0"
       }
     },
-    "node_modules/ngx-stripe": {
-      "version": "20.7.0",
-      "resolved": "https://registry.npmjs.org/ngx-stripe/-/ngx-stripe-20.7.0.tgz",
-      "integrity": "sha512-gwrjOSfGKXgdjlqyxt61Tz6kKnlJhs38iMqAuyZH+UJ2TeClBA4+iywIheTU3GOg8DLnaANKunr7BDO/gjQkPQ==",
-      "license": "MIT",
-      "dependencies": {
-        "tslib": "^2.3.0"
-      },
-      "peerDependencies": {
-        "@angular/common": ">=20.0.0 <21.0.0",
-        "@angular/core": ">=20.0.0 <21.0.0",
-        "@stripe/stripe-js": ">=7.0.0 <8.0.0"
-      }
-    },
     "node_modules/nice-try": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",

package.json

@@ -85,7 +85,6 @@
     "@prisma/client": "6.19.0",
     "@simplewebauthn/browser": "13.1.0",
     "@simplewebauthn/server": "13.1.1",
-    "@stripe/stripe-js": "7.9.0",
     "ai": "4.3.16",
     "alphavantage": "2.2.0",
     "big.js": "7.0.1",
@@ -120,7 +119,6 @@
     "ngx-device-detector": "10.1.0",
     "ngx-markdown": "20.0.0",
     "ngx-skeleton-loader": "11.3.0",
-    "ngx-stripe": "20.7.0",
     "open-color": "1.9.1",
     "papaparse": "5.3.1",
     "passport": "0.7.0",