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

Adding PayStack payments to your Ionic 2+ application – Part2

This is tutorial is a continuation of our earlier tutorial  Adding PayStack payments to your Ionic 2+ application – Part1, in the last tutorial we achieved the following

  1. Creation of an application called myPaystackApp
  2. Creation of account with Paystack at paystack.com

In this tutorial we are going to

  1. Create items page, where we have a list of items you want to purchase
  2. Create paystack payment interface
  3. Create method to navigate to paystack payment interface

We have a lot of work to do let’s get started.


  1. Create items page, where we have a list of items you want to purchase

From our last tutorial, let’s open our home.html page in a code editor and delete everything between <ion-content> </ion-content> tag.

Now, let’s create a fictitious online toy shop with just two toys; sheep and mouse toys by adding the following codes to your home.html between <ion-content> </ion-content> tag as shown below

<ion-content no-padding >

  <ion-grid  >

  <ion-row >

    <ion-col (click)=”checkOut()”  >    

   <img src=”assets/imgs/mouse.jpg” />

     <ion-label >Mouse Toy</ion-label>

  <ion-label >NGN 5,000.00</ion-label>

    </ion-col>

    <ion-col  (click)=”checkOut2()”>  

   <img  src=”assets/imgs/sheep.jpg” />

  <ion-label>Sheep Toy</ion-label>

     <ion-label >NGN 7,500.00</ion-label>

    </ion-col>

  </ion-row>

  </ion-grid>

  </ion-content>

If you run your application now, you should have something like this

ionicdon-paystack



 

2.  Create paystack payment interface

To achieve this second step we need to do the following

  1. create a new page in our application
  2. design the new page to accept payment card information

a              create a new page in our application

To create a new page, let us use CLI (Command Line Interface), every files needed is created automatically for you, The CLI will generate the HTML, TypeScript, and SCSS files for your new page in a new directory under  src/pages

Let’s name our second page “paystack”

Type ionic g page paystack

For more information on creating a new page see my tutorial on How To Navigate Between Pages In Ionic 2+ Application

 

2. Design the new page to accept payment card information

in this section we are going to do the following

  1. design our paystack.html and
  2. style the page in paystack.scss.

To design the newly created paystack.html, copy the following code into your paystack.html file

 

<ion-header>

<ion-navbar>

<ion-title>paystack</ion-title>

</ion-navbar>

</ion-header>

<ion-content  >

<div class=”image”><img  src=”assets/imgs/paystack_logo.png” /></div>

<div class=”amount”>NGN {{data | number:’.2′}}</div>

<div class=”input-area”>

<ion-list >

<ion-item >

<ion-input type=”text” placeholder=”Email Address” name=”email” #email> [(ngModel)]=”email”</ion-input>

</ion-item>

<div class=”cardnumber”>

<ion-label >CARD NUMBER</ion-label>

<ion-item >

<ion-input type=”tel” placeholder=”0000000000000000″ name=”card_number” #card_number [(ngModel)]=”cardNumberValue”></ion-input>

</ion-item>

</div>

<ion-grid padding>

<ion-row >

<ion-col col-6>Expiry date</ion-col>

<ion-col col-2> </ion-col>

<ion-col col-4> CVV</ion-col>

</ion-row>

<ion-row no-lines align-items-start>

<ion-col col-3>

<ion-item no-padding>

<ion-input type=”tel” placeholder=”MM” name=”expiryMonth” #expiryMonth> [(ngModel)]=”expiryMonthValue”</ion-input>

</ion-item>

</ion-col >

<ion-col col-3>

<ion-item no-padding>

<ion-input type=”tel”  placeholder=”YY” name=”expiryYear” #expiryYear [(ngModel)]=”expiryYearValue”></ion-input>

</ion-item>

</ion-col>

<ion-col col-2>

</ion-col>

<ion-col col-4>

<div class=”cvv”>

<ion-item>

<ion-input type=”tel” placeholder=”123″ name=”cvc” #cvc [(ngModel)]=”cvcValue”></ion-input>

</ion-item>

</div>

</ion-col>

</ion-row>

</ion-grid>

<div class=”pay-button”>

<button ion-button full (click)=”ChargeCard()”>PAY NGN {{data | number:’.2′}} </button>

</div>

</ion-list>

</div>

<div class=”footer”>

<div class=”secured”>

<ion-icon name=”lock” item-start></ion-icon>

SECURED BY PAYSTACK

</div>

<div class=”whatspaystack”>

<button ion-button outline  small round class=”app-font-25″ (click)=”whatsPaystack()”> WHAT IS PAYSTACK?</button>

</div>

</div>

</ion-content>




Now, let style this page copy the following code into your paystack.scss file

.ios, .md{

page-paystack{

.image{

text-align: center;

}

.emailadd {

margin-top:30px;

text-align:center;

}

.amount {

font-size:25px;

color:green;

text-align:center;

font-weight:bold;

}

.pay-button{

padding: 0 10px;

text-align:center;

font-size:6px;

button {

background:green;

}

}

.whatspaystack {

font-size:8px;

text-align:center;

}

ion-icon {

font-size: 15px; //Preferred size here

padding-right:3px;

}

.secured{

text-align:center;

font-size: 12px!important;

padding:10px;

}

ion-item {

border:1px solid #f0f0f0;

}

.input-area {

background-color:#f8f8f8;

padding: 5px 10px 1px 10px;

}

}

}




3.    Create method to navigate to paystack payment interface.

This is the simplest step in this tutorial, because we have covered it earlier in tutorial How To Pass Data Between Pages In Ionic 2+ Application

Now, let open our home.ts file and replace the contents with the following code

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

import { NavController } from ‘ionic-angular’;

import { PaystackPage} from ‘../paystack/paystack’

@Component({

selector: ‘page-home’,

templateUrl: ‘home.html’

})

export class HomePage {

data:any;

constructor(public navCtrl: NavController) {

}

checkOut(){

let data = {

price:”5000″

};

this.navCtrl.push(PaystackPage, data)

}

checkOut2(){

let data = {

price:”7500″

};

this.navCtrl.push(PaystackPage, data)

}

}

NOTE THAT

You will need to do the following in the app.module.ts file:

  1. Import PaystackPage from its location
  2. Add PaystackPage to declaration and entryComponents section

 

See How To Navigate Between Pages In Ionic 2+ Application for details

 

We are get there!, let run our application we should have a replica of the video below

Leave a Reply

Close Menu