This is the final part of our Paystack payment tutorial, in this tutorial, we are going to achieve the following:
- Add Paystack API to our application
- Install cordova plugins
- Write method to charge payment card
- 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,
-
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>
-
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
-
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
tobi
25 Jul 2018iTs not working pls do you have a repo
adminion
25 Jul 2018Hi Tobi,
What is not working, what error message are you getting.
Meanwhile, see the repo HERE
Adeniyi Samuel
17 Dec 2018tried to use this plugin but i got error: “Unable to resolve host “standard.paystack.co”: No address associated with hostname”
__proto__: Object
Oyeyemi Francis
4 Feb 2019Hello, 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?
adminion
4 Feb 2019@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