67, Obafemi Awolowo way, Ikeja Lagos +234 802 302 0838 info@ionicdon.com

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>

 




  1. 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

 ionic don tutorial

  • cordova plugin add cordova-custom-config

 ionic don tutorial

  • cordova plugin add cordova-plugin-paystack

 ionic don tutorial

 

 

  1. 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

 

This Post Has 5 Comments

  1. iTs not working pls do you have a repo

    1. Hi Tobi,

      What is not working, what error message are you getting.

      Meanwhile, see the repo HERE

  2. tried to use this plugin but i got error: “Unable to resolve host “standard.paystack.co”: No address associated with hostname”
    __proto__: Object

  3. Hello, Please I need your help asap. I use your code to integrate paystack to ionic 4 mobile app. but I get error everytime i call (window).window.PaystackPlugin.chargeCard

    The error is “missing command error”…What should I do?

    1. @Francis

      use the command as it is

      ( window).window.PaystackPlugin.chargeCard

      remember there’s in the first bracket

      make sure you follow the tutorial word for word, it works

Leave a Reply

Close Menu