webbuild infotech

Checkout with Stripe, Angular and Firebase

A stripe payment gateway is reliable and easy to implement and in the current blog, we are going to implement checkout functionality with stripe payment gateway, Angular, and Firebase where Angular is used for UI purposes and we will create backend logic and database In firebase.
Let’s start with the steps

Checkout with Stripe, Angular, and Firebase

Step 1: Create the angular project and setup firebase configuration in environment.ts for more information click

Step 2: Now let’s create the UI in the app.component.html file.

<div class="container">
  <div class="payment">
      <p>Price : $100</p>
      <button (click)="checkout($event)">Payment</button>

Step 3: Now go to index.html file and import the bellow line in the header

<script src="https://checkout.stripe.com/checkout.js"></script>

 Step 4: Now open the command prompt in the current directory and run the below command.

npm install @angular/fire
npm install --s @types/stripe-checkout
npm install --s @types/stripe-v3

 Step 5: so now go to app.module.ts file and import some packages as bellow.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {environment} from '../environments/environment';
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFireStorageModule } from '@angular/fire/storage';
import { AngularFireAuthModule } from '@angular/fire/auth';

  declarations: [
  imports: [
    // 3. Initialize
    AngularFirestoreModule, // firestore
    AngularFireAuthModule, // auth
    AngularFireStorageModule // storage
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

 Step 5: Let’s now go to the app.component.ts file and import the firebase package and make the login for stripe payment.

import { Component, OnInit, Input, HostListener } from '@angular/core';
import { AngularFireFunctions } from '@angular/fire/functions';
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']

export class AppComponent implements OnInit {
  constructor(private func: AngularFireFunctions) {}
  handler: StripeCheckoutHandler;
  confirmation: any;

  ngOnInit() {
    this.handler = StripeCheckout.configure({
      key: 'pk_test_your_key',
      locale: 'auto',
      source: async (source) => {
        const fun = this.func.httpsCallable('onCheckout');
        this.confirmation = await fun({ 
          source: source.id, 
          email: "test@gmail.com", 
          description: "This is just for testing purpose", 
          amount: 50 

  // Open the checkout handler
  async checkout(e) {
      name: 'Testing App',
      description: "This is just for testing!",
      amount: 50,
      email: 'test@gmail.com',

  // Close on navigate
  onPopstate() {

Step 6: Now let’s create the function for the firebase cloud and in that function, so before that install, the stripe package with the npm install stripe command.  we will implement some server-side logic as bellow.

const functions = require('firebase-functions');
const admin = require('firebase-admin');
exports.payment = functions.https.onRequest(async (req, response) => {
    cors(req, response, async () => {
    try {
        const stripe = require('stripe')("sk_test_key")
        const {amount, source, email} = req.body;
        const customer = await stripe.customers.create({
            email: email,
            source: source,
            name: 'test user',
            address: {
                line1: 'line1',
                postal_code: 'postal_code', 
                city: 'city',
                state: 'state',   
                country: 'country',  
            description :"test"

          const charge = await stripe.charges.create({
            amount: amount,
            currency: 'INR',
            customer: customer.id, 
            source: source,
            description : "test"

            status: "success",
            data: charge,
            message: "sucessfully"
    } catch (err) {
        console.log('err :', err.message)
            status: "fail",
            message: err.message

Note: On the above code you can see the cors() where it’s used for cross policy issues.

Step 6: Now run the angular code with ng serve command and you can test the firebase function on local with firebase emulators: start command.

Leave a Comment

Your email address will not be published. Required fields are marked *