Angular Ngx Stripe error: Property 'id' does not exist on type 'Object'

Question

I cut and paste the Ngx Stripe examples into my Angular project. I'm using Angular 13. I got this error:

Error: src/app/checkout/checkout.component.ts:22:77 - error TS2339: Property 'id' does not exist on type 'Object'.

22           return this.stripeService.redirectToCheckout({ sessionId: session.id })

Is this a strict mode error? Do I need to put in a return type :any on the function? I tried session: any but that didn't compile. The .pipe is confusing me where a return type would go.

Or is something else causing the error?

Here's my checkout.component.ts :

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { switchMap } from 'rxjs/operators';

import { StripeService } from 'ngx-stripe';

@Component({
  selector: 'app-checkout',
  templateUrl: './checkout.component.html'
})
export class CheckoutComponent {
  constructor(
    private http: HttpClient,
    private stripeService: StripeService
  ) {}

  checkout() {
    // Check the server.js tab to see an example implementation
    this.http.post('/create-checkout-session', {})
      .pipe(
        switchMap(session => {
          return this.stripeService.redirectToCheckout({ sessionId: session.id })
        })
      )
      .subscribe(result => {
        // If `redirectToCheckout` fails due to a browser or network
        // error, you should display the localized error message to your
        // customer using `error.message`.
        if (result.error) {
          alert(result.error.message);
        }
      });
  }
}

Here's my app.module.ts :

// Angular
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

// Material
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatTabsModule } from '@angular/material/tabs';

// Made by me
import { HomeComponent } from './home/home.component';
import { FunctionsService } from './home/functions.service';
import { AboutMaggieComponent } from './about-maggie/about-maggie.component';
import { AboutKabbalahComponent } from './about-kabbalah/about-kabbalah.component';
import { DonateComponent } from './donate/donate.component';
import { ContactComponent } from './contact/contact.component';
import { CheckoutComponent } from './checkout/checkout.component';

// 3rd party
import { NgxStripeModule } from 'ngx-stripe';

@NgModule({
  declarations: [
    AppComponent,
    AboutMaggieComponent,
    HomeComponent,
    AboutKabbalahComponent,
    DonateComponent,
    ContactComponent,
    CheckoutComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatToolbarModule,
    MatInputModule,
    MatFormFieldModule,
    MatButtonModule,
    MatCardModule,
    MatTabsModule,
    NgxStripeModule.forRoot('pk_test_51HUwT...'),
  ],
  providers: [FunctionsService],
  bootstrap: [AppComponent]
})
export class AppModule { }

I installed ngx-stripe with npm and I see it in my project's Node modules. I haven't set up the backend server code.

Answer 1

The error occurs because TypeScript strictly checks the Object type (what it assumes session will be) and it doesn't find an 'id' property.

However, we can assume that session will have an id property when the response is sent as we are following the official ngx-stripe docs .

To get rid of this error, you can assign the any type to the session :

// Check the server.js tab to see an example implementation
this.http.post('/create-checkout-session', {})
  .pipe(
    switchMap((session: any) => {
      return this.stripeService.redirectToCheckout({ sessionId: session.id })
    })
  )
  .subscribe(result => {
    // If `redirectToCheckout` fails due to a browser or network
    // error, you should display the localized error message to your
    // customer using `error.message`.
    if (result.error) {
      alert(result.error.message);
    }
  });