Task/eliminate ngx-stripe (#6116)

* Eliminate ngx-stripe * Update changelog
4 months ago · 0f9bebcf82
parent 40c01c38dd
commit 0f9bebcf82
9 changed files with 25 additions and 66 deletions
--- a/CHANGELOG.md
+++ b/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`
--- a/apps/api/src/app/subscription/subscription.service.ts
+++ b/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
    };
  }

--- a/apps/client/src/app/components/user-account-membership/user-account-membership.component.ts
+++ b/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;
      });
  }

--- a/apps/client/src/app/pages/pricing/pricing-page.component.ts
+++ b/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;
      });
  }

--- a/apps/client/src/main.ts
+++ b/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
--- a/libs/common/src/lib/interfaces/info-item.interface.ts
+++ b/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;
 }
--- a/libs/common/src/lib/interfaces/responses/create-stripe-checkout-session-response.interface.ts
+++ b/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;
 }
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",