如何在Ionic 4中集成Stripe付款

Question

我是离子框架的新手，正在尝试将Stripe集成到我的应用程序中。 我做了一些研究，只发现了这个https://ionicframework.com/docs/native/stripe。它解释得不够好。如何在.html文件上实现该概念，例如为用户提供触发付款的按钮？

我也尝试过https://fireship.io/lessons/stripe-elements-angular/，但一路迷路了。

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();
      });
    })
  }
}

我希望代码从条带中获取订阅计划，或者我已在上面的代码中手动输入，以便以规定的条带计划过帐付款。