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.
<router-outlet> <div class="container"> <div class="payment"> <p>Price : $100</p> <button (click)="checkout($event)">Payment</button> </div> </div> </router-outlet>
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-v3Step 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';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
// 3. Initialize
AngularFireModule.initializeApp(environment.config),
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';
@Component({
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
}).toPromise();
console.log('this.confirmation',this.confirmation);
}
});
}
// Open the checkout handler
async checkout(e) {
this.handler.open({
name: 'Testing App',
description: "This is just for testing!",
amount: 50,
email: 'test@gmail.com',
});
e.preventDefault();
}
// Close on navigate
@HostListener('window:popstate')
onPopstate() {
this.handler.close();
}
}
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');
admin.initializeApp();
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"
});
response.status(200).send({
status: "success",
data: charge,
message: "sucessfully"
})
} catch (err) {
console.log('err :', err.message)
response.status(500).send({
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.