Adding PayStack payments to your Ionic 2+ application – Part3

This is the final part of our Paystack payment tutorial, in this tutorial, we are going to achieve the following:

1. Add Paystack API to our application
2. Install cordova plugins
3. Write method to charge payment card
4. Test our application.

 

To get the bet out this tutorial, make sure you have gone through the earlier parts, Part 1 and  Part2

Now let let started,

 

1. Add Paystack API to our application

Paste the code below in config.xml file in the android Platform tag <platform>add here</platform> and replace ‘INSERT-PUBLIC-KEY-HERE’ with your public key, remember the key we got in first part of this tutorial, Adding PayStack payments to your Ionic 2+ application – Part1

.

<preference name=”android-minSdkVersion” value=”16″ />

    <config-file target=”AndroidManifest.xml” parent=”application”>

         <meta-data android:name=”co.paystack.android.PublicKey” android:value=”INSERT-PUBLIC-KEY-HERE”/>

    </config-file>

 

2. Install cordova plugins

In this section, we are going to install the custom config cordova plugin, to automatically edit the configuration files in the platforms/directory  and cordova plugin playstack

Now let change to our CLI, type the following code, make sure you change directory to the app directory

• npm install

 

• cordova plugin add cordova-custom-config

 

• cordova plugin add cordova-plugin-paystack

 

 

 

3. Write method to charge payment card

The next step is writing method to charge payment card, now copy the following code into our paystack.ts file

 

import { Component, ViewChild  } from ‘@angular/core’;

import { NavController, AlertController, ViewController,  Platform,  NavParams  } from ‘ionic-angular’;

import { LoadingController } from ‘ionic-angular’;

import { InAppBrowser } from ‘ionic-native’;

@Component({

  selector: ‘page-paystack’,

  templateUrl: ‘paystack.html’

})

export class PaystackPage {

  @ViewChild(“email_add”) email_add;

  @ViewChild(“card_number”) card_number;

  @ViewChild(“expiryMonth”) expiryMonth;

  @ViewChild(“expiryYear”) expiryYear;

  @ViewChild(“cvc”) cvc;

customerEmail:any;

price:any;

chargeAmount:any;

cardNumberValue: any;

expiryMonthValue: any;

expiryYearValue: any;

cvcValue: any;

  constructor(public navCtrl: NavController, public alertCtrl: AlertController, public navParams: NavParams,   public loading: LoadingController,  public platform: Platform, public viewCtrl: ViewController) {

  }

ngOnInit(){

this.price= this.navParams.get(‘price’);

this.chargeAmount = this.price*100;

}

  ChargeCard(){

    let card = this.card_number.value

    let month = this.expiryMonth.value

    let cvc = this.cvc.value

    let year = this.expiryYear.value

    let amount = this.chargeAmount

    let email = this.customerEmail

  console.log(card);

    console.log(month);

      console.log(cvc);

        console.log(year);

          console.log(amount);

            console.log(email);

    let loader = this.loading.create({

      content: ‘Processing Charge…’

    });

    loader.present();

        this.platform.ready().then(() => {

          if (this.platform.is(‘cordova’)) {

          // Now safe to use device APIs

          (<any>window).window.PaystackPlugin.chargeCard(

            (resp) =>{

              loader.dismiss();

              //this.pop.showPayMentAlert(“Payment Was Successful”, “We will Now Refund Your Balance”);

              console.log(‘charge successful: ‘, resp);

              alert(‘Payment Was Successful’ )

            },

            (resp) =>{

              loader.dismiss();

           alert(‘We Encountered An Error While Charging Your Card’ )

            },

            {

              cardNumber: card,

              expiryMonth: month,

              expiryYear: year,

              cvc: cvc,

              email: email,

              amountInKobo: amount,

          })

        }else{

        }

      })

  }

whatsPaystack(){

this.platform.ready().then(() => {

           let browser = new InAppBrowser(“https://paystack.com/what-is-paystack”,’_blank’);

         });  

}

close(){

  this.viewCtrl.dismiss();

}

}

Here we are!!, we have completed our application, run the app to see how awesome it is, bring up command interface and type

 ionic serve –l

NOTE THAT

You will need to use the following card information for testing

Card Number: 4084 0840 8408 4081
Expiry Date: any date in the future
CVV: 408