Adding PayStack payments to your Ionic 2+ application – Part3

Posted on Posted in Beginner

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

 

8 thoughts on “Adding PayStack payments to your Ionic 2+ application – Part3

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

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

      1. See my code below;
        async ChargeCardAndSubmit(){

        this.cardNumber = “4084084084084081”;
        this.expiryMM = 11;
        this.expiryYY = 2022;
        this.cvc = “408”;

        const loading = await this.loader.create({spinner: “dots”,message: “Processing Charge…”});
        await loading.present();

        await this.platform.ready().then(() => {
        if (this.platform.is(‘cordova’)) {
        (window).window.PaystackPlugin.chargeCard(
        (resp)=>{
        loading.dismiss();
        console.log(‘charge successful: ‘, resp.reference);
        //this.api.postOrder(form).subscribe(res => {});
        },(resp)=>{
        loading.dismiss();
        console.log(‘charge failed: ‘+this.cardNumber+”, “+this.expiryMM+”, “+this.expiryYY+”, “+this.cvc+”, “+resp);
        },
        {
        cardNumber: this.cardNumber,
        expiryMonth: this.expiryMM,
        expiryYear: this.expiryYY,
        cvc: this.cvc,
        email: ‘chargeIOS@master.dev’,
        amountInKobo: 150000
        });
        }else{
        this.api.ShowNotification(“Payment plugins not supported on this device”,”danger”);
        }
        });
        }

        When I use (window).window.PaystackPlugin.chargeCard or window.PaystackPlugin.chargeCard and try to compile it, it gives error…”Property PaystackPlugin” does not exist on type window.

        But when I use (window).window.PaystackPlugin.chargeCard and try to compile it, no error but nothing happen when I want to make payment. Error generate is “missing command error”

          1. @Oyeyemi

            Did you do the following

            1.Add Paystack API to your application
            2. Install cordova plugins and Paystack Plugin

            Bcos, I followed the tutorial and it worked

Leave a Reply

Your email address will not be published. Required fields are marked *