Updating data in firebase doesnt work inside async handleclick func - reactjs

Question

I am working on an app that has a payment tab, when i click on the payment tab it takes me to a page which only has just one button, when i click on that button, it takes me to the stripe checkout system (https://stripe.com/docs/payments/checkout/client) and once it handles the payment, it takes me back to the app. I have a database in firebase that tracks if the current user that is logged in is either paid or not. if the current user is unpaid, i want the membership field of my db for that user to be updated from 'false' to 'true' AFTER the payment has been completed successfully. The problem is that if i do update of the db right after the payment is done inside the try block, the db is not updated, but if i do the update inside componentDidMount() func, i do see changes made to the db. What am i doing wrong? is the fact that the func is async casuing the problem here? if i want to update the database after payment is successful, than how would i go about doing that?
import React from 'react';
import firebase from "firebase/app";
import 'firebase/firestore';
import "firebase/database";
import { auth, database } from '../../firebase';
import { UserAndDbObjConsumer, UserAndDbObjContext } from '../../dbAndUserObjContext';
import { loadStripe } from '#stripe/stripe-js';
// Make sure to call `loadStripe` outside of a component’s render to avoid
// recreating the `Stripe` object on every render.
const stripePromise = loadStripe('test key here');
export default class Payment extends React.Component {
static contextType = UserAndDbObjContext;
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
componentDidMount() {
const {user, database} = this.context;
// When i update my data below, it updates the firebase db and i can
// see the changes taking effect
// database.collection("userCollection").doc(user.uid).update({
// membership: true
// })
}
handleClick = async (event) => {
const {user, database} = this.context;
console.log("i am inside handle but outside try")
try {
// When the customer clicks on the button, redirect them to Checkout.
const stripe = await stripePromise;
const { error } = await stripe.redirectToCheckout({
lineItems: [{
price: 'price_1IF4cPAt4f9zG3h2hTG64agQ', // Replace with the ID of your price
quantity: 1,
}],
mode: 'payment',
successUrl: 'https://app.guideanalytics.ca/',
cancelUrl: 'https://guideanalytics.ca/termsofuse.html',
});
// If `redirectToCheckout` fails due to a browser or network
// error, display the localized error message to your customer
// using `error.message`.
// When i update the firebase db here, than the changes on firebase dont take place
database.collection("userCollection").doc(user.uid).update({
membership: true
})
}
catch(e) {
console.log(e);
}
}
render() {
return (
<div>
<button role="link" onClick={(e) => this.handleClickTest()}>
Checkout
</button>
</div>
)
}
}
//Payment.contextType = Context;

Answer 1

stripe.redirectToCheckout will only error if there's a browser or network error, so in practically all cases your database.collection function call will never execute.
Instead you would need to call that function when the user hits the successUrl you defined in your Checkout Session. You might want to customize the successUrl to ensure that you know which customer to update. For instance:
successUrl: `https://app.guideanalytics.a/?userId=${user.uid}&sessionId={CHECKOUT_SESSION_ID}`,
The last part is a wildcard which Stripe will then automatically replace with the Session's ID.
Then on your success page you'd update the database based on the user ID and Checkout Session ID in the URL.