Angular(Ionic)でPaypalで決済機能を追加する

ionic g page publicPages/billing

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import { BillingPageRoutingModule } from './billing-routing.module';

import { BillingPage } from './billing.page';
import { NgxPayPalModule } from 'ngx-paypal';
@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    BillingPageRoutingModule,
    NgxPayPalModule,
  ],
  declarations: [BillingPage]
})
export class BillingPageModule {}

<ion-header>
  <ion-toolbar>
    <ion-title>billing</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ngx-paypal [config]="payPalConfig"></ngx-paypal>

</ion-content>

import { Component, OnInit } from '@angular/core';

import {
  IPayPalConfig,
  ICreateOrderRequest 
} from 'ngx-paypal';


@Component({
  selector: 'app-billing',
  templateUrl: './billing.page.html',
  styleUrls: ['./billing.page.scss'],
})
export class BillingPage implements OnInit {

  public payPalConfig ? : IPayPalConfig;
  showSuccess:any;
  showCancel :any;
  showError:any;

  constructor() { }

  ngOnInit() {
    this.initConfig();
  }




  private initConfig(): void {
    this.payPalConfig = {
        currency: 'USD',
        clientId: 'ASg-**********--IpykqRps-1kfcndOa4lUCCRt**********',
        createOrderOnClient: (data) => < ICreateOrderRequest > {
            intent: 'CAPTURE',
            purchase_units: [{
                amount: {
                    currency_code: 'USD',
                    value: '1.00',
                    breakdown: {
                        item_total: {
                            currency_code: 'USD',
                            value: '1.00'
                        }
                    }
                },
                items: [{
                    name: '商品の名前',
                    quantity: '1',
                    category: 'DIGITAL_GOODS',
                    unit_amount: {
                        currency_code: 'USD',
                        value: '1.00',
                    },
                }]
            }]
        },
        advanced: {
            commit: 'true'
        },
        style: {
            label: 'paypal',
            layout: 'vertical'
        },
        onApprove: (data, actions) => {
            console.log('onApprove - transaction was approved, but not authorized', data, actions);
            actions.order.get().then(details => {
                console.log('onApprove - you can get full order details inside onApprove: ', details);
            });

        },
        onClientAuthorization: (data) => {
            console.log('onClientAuthorization - you should probably inform your server about completed transaction at this point', data);
            this.showSuccess = true;
        },
        onCancel: (data, actions) => {
            console.log('OnCancel', data, actions);
            this.showCancel = true;

        },
        onError: err => {
            console.log('OnError', err);
            this.showError = true;
        },
        onClick: (data, actions) => {
            console.log('onClick', data, actions);
            //this.resetStatus();
        }
    };
}





}