stripe.redirectToCheckout does not exist on type stripe

[donemmx]

please how do i fix this issue.
import { AngularFirestore } from '@angular/fire/firestore';
import { ServicesClass } from './../services/service';
import { Component, OnInit } from '@angular/core';
import Stripe from 'stripe';

@component({
selector: 'app-plans',
templateUrl: './plans.component.html',
styleUrls: ['./plans.component.css'],
})
export class PlansComponent implements OnInit {
plans;
constructor(private afs: AngularFirestore, public service: ServicesClass) {
this.afs
.collection('products')
.ref.where('active', '==', true)
.get()
.then(function (querySnapshot) {
querySnapshot.forEach(async function (doc) {
console.log(doc.id, ' => ', doc.data());
// const priceSnap = await doc.ref.collection('prices').get();
// priceSnap.docs.forEach((doc) => {
// console.log(doc.id, ' => ', doc.data());
// });
});
});
}

async subscribe() {
const docRef = await this.afs
.collection('users')
.doc(this.service.userData.uid)
.collection('checkout_sessions')
.add({
price: 'price_1GqIC8HYgolSBA35zoTTN2Zl',
success_url: window.location.origin,
cancel_url: window.location.origin,
});
// Wait for the CheckoutSession to get attached by the extension
docRef.onSnapshot((snap) => {
const { sessionId } = snap.data();
if (sessionId) {
// We have a session, let's redirect to Checkout
// Init Stripe

    // const stripe = Stripe('pk_test_*****************');

    const stripe = new Stripe(
      'pk_********************',
      {
        apiVersion: '2020-08-27',
        typescript: true,
      }
    );
     stripe.redirectToCheckout({ sessionId });
  }
});

}

ngOnInit(): void {}
}

[donemmx]

Its really of a big concern because i really need it to redirect me to stripe checkout from my angular app

[thorsten-stripe]

@donemmx it looks like you're importing the stripe node library rather than Stripe.js. You will want to do this instead: https://github.com/stripe/stripe-js#installation

import {loadStripe} from '@stripe/stripe-js';

const stripe = await loadStripe('pk_test_TYooMQauvdEDq54NiTphI7jx');
stripe.redirectToCheckout({ sessionId });

[donemmx]

please how where do i add const stripe = await loadStripe('pk_test_TYooMQauvdEDq54NiTphI7jx'); this line that won't make it throw errors.
i am quite new to this.

[donemmx]

import { AngularFirestore } from '@angular/fire/firestore';
import { ServicesClass } from './../services/service';
import { Component, OnInit } from '@angular/core';
import {loadStripe} from '@stripe/stripe-js';

@component({
selector: 'app-plans',
templateUrl: './plans.component.html',
styleUrls: ['./plans.component.css'],
})
export class PlansComponent implements OnInit {
plans;
constructor(private afs: AngularFirestore, public service: ServicesClass) {
this.afs
.collection('products')
.ref.where('active', '==', true)
.get()
.then(function (querySnapshot) {
querySnapshot.forEach(async function (doc) {
console.log(doc.id, ' => ', doc.data());
const priceSnap = await doc.ref.collection('prices').get();
priceSnap.docs.forEach((doc) => {
console.log(doc.id, ' => ', doc.data());
});
});
});
}

async subscribe() {
const docRef = await this.afs
.collection('users')
.doc(this.service.userData.uid)
.collection('checkout_sessions')
.add({
price: 'price_1GqIC8HYgolSBA35zoTTN2Zl',
success_url: window.location.origin,
cancel_url: window.location.origin,
});
// Wait for the CheckoutSession to get attached by the extension
docRef.onSnapshot((snap) => {
const { sessionId } = snap.data();
if (sessionId) {
// We have a session, let's redirect to Checkout
// Init Stripe
// const stripe = Stripe('pk_test_*****************');
// );
const stripe = await loadStripe('pk_test_TYooMQauvdEDq54NiTphI7jx');
stripe.redirectToCheckout({ sessionId });
}
});
}

ngOnInit(): void {}
}

[thorsten-stripe]

You need to make the onSnapshot callback function async so that you can call await within it:

  // Wait for the CheckoutSession to get attached by the extension
  docRef.onSnapshot(async (snap) => {
    const { sessionId } = snap.data();
    if (sessionId) {
      // We have a session, let's redirect to Checkout
      // Init Stripe
      const stripe = await loadStripe("pk_test_*****************");
      stripe.redirectToCheckout({ sessionId });
    }
  });

[donemmx]

thank you so much it works. no more errors...hurray... awesome

[thorsten-stripe]

Glad to hear that 🎉