How to integrate Stripe payment in Ionic 4 - stripe-payments

Question

I am new in ionic framework and trying to integrate stripe in my app.
I did some research and found only this https://ionicframework.com/docs/native/stripe. It doesn't explain well enough. How can i implement the concept on .html file like to provide a user with a button to trigger the payment?
I also tried this https://fireship.io/lessons/stripe-elements-angular/ but got lost along the way.
checkout.page.ts
import { Component, OnInit, Input, HostListener } from '#angular/core';
// import { Stripe } from '#ionic-native/stripe/ngx';
import { AuthService } from '../services/auth.service';
import { FirebaseService } from '../services/firebase.service';
import { AngularFireFunctions } from '#angular/fire/functions';
import { Router } from '#angular/router';
import { Observable, of } from 'rxjs';
declare var Stripe;
#Component({
selector: 'app-rentals',
templateUrl: './rentals.page.html',
styleUrls: ['./rentals.page.scss'],
})
export class RentalsPage implements OnInit {
user$: Observable<User>;
constructor(
private router: Router,
// private stripe: Stripe,
private firebaseService: FirebaseService,
private auth: AuthService,
private functions: AngularFireFunctions
)
{
}
#Input() amount;
#Input() description;
handler: StripeCheckoutHandler;
confirmation: any;
loading = false;
ngOnInit() {
this.handler = StripeCheckout.configure({
key: 'pk_test_3PyCxdSZ21lC5Wg7lOs2gyF8',
image: '/assets/icon/favicon.png',
locale: 'auto',
source: async (source) => {
this.loading = true;
const user = await this.firebaseService.User();
const fun = this.functions.httpsCallable('stripeCreateCharge');
this.confirmation = await fun({ source: source.id, uid: user.uid, amount: this.amount }).toPromise();
this.loading = false;
}
});
}
// Open the checkout handler
async checkout(e) {
const user = await this.auth.getUser();
this.handler.open({
name: 'Fireship Store',
description: this.description,
amount: this.amount,
email: user.email,
});
e.preventDefault();
}
// Close on navigate
#HostListener('window:popstate')
onPopstate() {
this.handler.close();
}
}
checkout.page.html
<ion-card>
<ion-card-header>
<img *ngIf="!fileUrl" src="assets/1.jpeg"/>
<ion-card-subtitle>Bed Sitter</ion-card-subtitle>
<ion-input type="hidden" [(ngModel)]="id">{{ plan_Et8WWHlFFGNxym }}</ion-input>
<ion-card-title>KSH4,000.00 Monthly</ion-card-title>
</ion-card-header>
<ion-card-content>
bed sitter flat
</ion-card-content>
<ion-card-content>
<ion-input type="hidden" [(ngModel)]="amount">{{ 4000 }}</ion-input>
<ion-button slot="end" color="primary" (click)="checkout($event)">Pay 4000.00</ion-button>
</ion-card-content>
</ion-card>
auth.service.ts
import { Injectable } from '#angular/core';
import * as firebase from 'firebase/app';
import { FirebaseService } from './firebase.service';
import { AngularFireAuth } from '#angular/fire/auth';
import { Observable, of } from 'rxjs';
#Injectable({
providedIn: 'root'
})
export class AuthService {
user$: Observable<User>;
constructor(
private firebaseService: FirebaseService,
public afAuth: AngularFireAuth
){}
doRegister(value){
return new Promise<any>((resolve, reject) => {
firebase.auth().createUserWithEmailAndPassword(value.email, value.password)
.then(
res => resolve(res),
err => reject(err))
})
}
doLogin(value){
return new Promise<any>((resolve, reject) => {
firebase.auth().signInWithEmailAndPassword(value.email, value.password)
.then(
res => resolve(res),
err => reject(err))
})
}
doLogout(){
return new Promise((resolve, reject) => {
this.afAuth.auth.signOut()
.then(() => {
this.firebaseService.unsubscribeOnLogOut();
resolve();
}).catch((error) => {
console.log(error);
reject();
});
})
}
}
I expect the code to fetch subscription plans from stripe or as i have input manually on the code above, to post the payment with the stated plan to stripe.