Run stripe extensions for processing payments through Firebase

I have been using the Run Payments with Stripe extension and setting up webhooks like checkout.session.completed. I am interested in knowing how to successfully post the job object to Firestore after a successful payment.

Here's my .ts code:

  const docRef = await db
                .collection('users')
                .doc(uid)
                .collection('checkout_sessions')
                .add({
                  automatic_tax: true,
                  tax_id_collection: true,
                  payment_method_types: ["card"],
                  mode: 'subscription',
                  line_items: [
                    {
                      price: this.paymentPlan.stripePriceId,
                      quantity: 1,
                      description: jobData.jobLevel + ' ' + jobData.jobTitle,
                    },
                  ],
                  allow_promotion_codes: true,
                  success_url: 'http://localhost:4200/success',
                  cancel_url: 'http://localhost:4200/success',
                  metadata: {
                    payId: payId
                  }
                });
              // Wait for the CheckoutSession ...

              docRef.onSnapshot((snap) => {
                const { error, url } = snap.data() as any;
                if (error) {
                  alert(`An error occurred: ${error.message}`);
                }
                if (url) {
                  window.location.assign(url);
                }
                this.loading = false;

              });

              
              this.db.collection('users').doc(uid).collection('jobs').add(job).then(() => {
                console.log('Job posted successfully!');
              }).catch(error => {
                console.error('Error posting job:', error);
              });


Do I need to create custom Firebase functions to handle the webhook and post the job?

Thank you!

Answer №1

To properly handle webhook events from Stripe, you will need to set up a Firebase function that listens for the payment_intent.success[1] and checkout.session.completed[2] events. You can refer to this example[3] for guidance on how to implement this. Once the events are captured, you can then call Firestore to create a new record[4]

[1] https://stripe.com/docs/api/events/types#event_types-payment_intent.succeeded

[2] https://stripe.com/docs/api/events/types#event_types-checkout.session.completed

[3] https://github.com/stripe/stripe-firebase-extensions/blob/next/firestore-stripe-payments/functions/src/index.ts#L676

[4] https://github.com/stripe/stripe-firebase-extensions/blob/055d467b3aa9441dae372904818847fb222ba57d/firestore-stripe-payments/functions/src/index.ts#L634

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When the client's URL is http://localhost:4200, the server is failing to respond to the post request

I have encountered a strange issue while working on an Angular app that communicates with an Express server. This problem has been perplexing me for the past few days and goes as follows: Upon loading the web page, I initiate a post request to the server. ...

Various modules in the project need to have distinct GitHub origins, particularly in the case of Spring-Angular

My goal is to create a well-structured project with separate frontend and backend modules. Here is the initial project structure: https://i.stack.imgur.com/EghPA.png I have attempted this in various configurations before, but every time I try, git recogn ...

Troubleshooting Error When Retrieving Snapshot Value in Firebase with Swift 3

After upgrading to Swift 3, I encountered an error while trying to access certain data from a snapshot observe event. This is my code: ref.child("users").child(userID!).observeSingleEvent(of: .value, with: { (snapshot) in let username = snapshot.val ...

The issue with angular JavaScript in the child component is causing the left side navigation dropdown to malfunction

I'm currently facing an issue with the left side navigation in my home component. The dropdown functionality is not working within one of the routing modules (admin-routing.module.ts). Interestingly, the navigation works perfectly fine in app-routing. ...

Display modal when button in table row is clicked

I am currently using the Next Angular 8 Free Admin Template and I am looking to display a modal when the button in a specific data table row is clicked. Below is the code snippet: HTML Code: <div class="col-sm-12"> <app-card cardTi ...

In the application I'm developing, I'm utilizing React alongside TypeScript, making use of the useContext and useReducer hooks. However, I've encountered an issue where the dispatch function is not being

Currently, I have implemented a feature where two lists are displayed as cards based on one main list of objects. The goal is to toggle the 'favorite' value for each card item when the star button is clicked. This action should move the favorited ...

Tips for handling numerous users on an Android device

Currently, I am creating an android application that makes use of Firebase authentication. While I am able to successfully log in and out a user at a time, I am looking to enhance the user experience by allowing them to switch between accounts seamlessly ...

merging pictures using angular 4

Is there a way in Angular to merge two images together, like combining images 1 and 2 to create image 3 as shown in this demonstration? View the demo image ...

What is the difference between TypeScript's import/as and import/require syntax?

In my coding project involving TypeScript and Express/Node.js, I've come across different import syntax options. The TypeScript Handbook suggests using import express = require('express');, while the typescript.d.ts file shows import * as ex ...

Dynamically manipulate menu items in material-ui and react by adding, removing, editing, or toggling their state

I have scoured every corner of the internet in search of an answer to this dilemma. Imagine a scenario where there is a menu located at the top right of a navigation bar, initially showcasing TWO options (1. Login. 2. Register). When a user clicks on eithe ...

Transform the object into an array of JSON with specified keys

Here is a sample object: { labels: ["city A", "city B"], data: ["Abc", "Bcd"] }; I am looking to transform the above object into an array of JSON like this: [ { labels: "city A", data: "Abc" }, { labels: "city B", data: "Bcd" }, ]; ...

Cluster multiple data types separately using the Google Maps JavaScript API v3

I am looking to implement MarkerClusterer with multiple markers of various types and cluster them separately based on their type. Specifically, I want to cluster markers of type X only with other markers of type X, and markers of type Y with other markers ...

Error with Background component in Next.js-TypeScript when trying to change color on mouseover because Window is not defined

Within my Background component, there is a function that includes an SVG which changes color upon mouseover. While this functionality works fine, I encountered an error when hosting the project using Vercel - "ReferenceError: window is not defined." This i ...

Trouble with styles not displaying correctly in nodemailer when using handlebars

I am using nodemailer and handlebars to send an email, the email is being received successfully but the styles are not being applied. This is the code I am using to send the email: const hbsConfig = { viewEngine: { extName: '. ...

Using Angular, I am able to generate a table of Orders by utilizing information from an API that provides a list of Order numbers and a specific endpoint that retrieves all details related to each Order

As a beginner in Angular, I am facing a challenge with the endpoints provided to me. One endpoint GETs an array of integers which are unique identifiers, while the other GETs a singular Order object using a number as a parameter in the URL. My task is to d ...

Switching the theme on the mat-icon to Outlined mode

When using <mat-icon>person</mat-icon>, I am currently achieving a certain result: https://i.sstatic.net/xlrr2.png However, I require the icon to be in the Outlined theme: https://i.sstatic.net/SIKiM.png What is the correct approach to achiev ...

Discover the seamless transformation of a class definition into a Vue 3 component definition utilizing the dazzling 'tc39' decorators

The proposed API in the tc39/proposal-decorators repository is significantly different from the previous decorators API. Although TypeScript 5 doesn't fully support the new API yet, it's only a matter of time before the old API becomes deprecated ...

Creating string enums in NextJS with TypeScript

I am working on my nextjs application and I have a component with a prop that is a string. I decided to create an enum, so I attempted the following: enum Label { dermatology = 'Dermatologi', psychology = 'Psykologi', rheumatology = ...

The call stack has exceeded its maximum size in Angular Single SPA, resulting in an error

Encountering an issue while running npm run build for a single spa application. I recently converted this angular application into single-spa and upgraded the angular version to 10.2.5: https://i.stack.imgur.com/qIHMf.png https://i.stack.imgur.com/adSTB. ...

Can TypeScript declaration doc comments be translated and displayed in hover info and suggestion descriptions in VS Code?

English is not my native language, so I am wondering if there are translated versions available for the boxes that appear when hovering over a declaration to provide descriptions/documentation. For instance, with the String.prototype.split() method: ...