The Techies' pub

Ionic 2 – Payment processing with Stripe

Hope you are all well. In this post we’ll discuss about Payment Processing in your Ionic 2 apps. This has been requested by a lot of our friends. We’ll be using an external library called stripe to achieve this.

This post will constitute of two sections. The back-end using Node.js and the app using Ionic 2.

Go to stripe.com and signup for an account. Once you have signed up and logged in, click on the API option available in the left side of the dashboard. You will see 2 sets of keys with 2 keys each namely a test set and a production set. Copy both the keys in the test set.

First let’s deal with the Node.js code.

Initialize a node project with npm init.

Then use the below command to install dependencies.

1

npm install express body-parser cors stripe--save

Now create a new file called index.js in your project directory and type the below code in it.

We are simply creating a REST endpoint which when hit will obtain the stripetoken and amount to be charged from the request body and then create a charge. If successful then it will simply return a json.

The Ionic 2 Part:

Install the cordova-plugin-stripe using the below commands.

1

2

ionic plugin add cordova-plugin-stripe

npm install@ionic-native/stripe

Open up the ionic app. Use the below command to create a new page where we will be getting the card details.

1

ionicgpage card

(You could simply use a prompt alert to get the card details as well).

Now open up app.module.ts and import everything as shown below.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

import{BrowserModule}from'@angular/platform-browser';

import{ErrorHandler,NgModule}from'@angular/core';

import{HttpModule}from'@angular/http';

import{IonicApp,IonicErrorHandler,IonicModule}from'ionic-angular';

import{SplashScreen}from'@ionic-native/splash-screen';

import{StatusBar}from'@ionic-native/status-bar';

import{Stripe}from'@ionic-native/stripe';

import{MyApp}from'./app.component';

import{HomePage}from'../pages/home/home';

import{Card}from'../pages/card/card';

@NgModule({

declarations:[

MyApp,

HomePage,

Card

],

imports:[

BrowserModule,

HttpModule,

IonicModule.forRoot(MyApp)

],

bootstrap:[IonicApp],

entryComponents:[

MyApp,

HomePage,

Card

],

providers:[

StatusBar,

SplashScreen,

Stripe,

{provide:ErrorHandler,useClass:IonicErrorHandler}

]

})

exportclassAppModule{}

Now open up home.html and add a button

1

2

<p>Item price-$50</p>

<button ion-button(click)="carddetails()">Checkout</button>

Open up home.ts and wire this up

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

import{Component}from'@angular/core';

import{NavController}from'ionic-angular';

import{Card}from'../card/card';

@Component({

selector:'page-home',

templateUrl:'home.html'

})

exportclassHomePage{

constructor(publicnavCtrl:NavController){

}

carddetails(){

this.navCtrl.push(Card);

}

}

Now open card.html and add the below code in-between the <ion-content> tags.

Please paste the test publishable key (obtained from stripe.com) in the this.stripe.setPublishableKey() line.

We are simply creating a token from the card details and passing it along with the amount to be charged to the backend server (our Node.js app) and then if the transaction is successful i.e., if the charge is created successfully then the alert shows up.

That’s it guys. Stripe has several options available which you can make use of.

To test the above code, you could simply run your node.js app on a hosting provider like heroku, then replace the post request URL with the url provided by heroku and try making a payment request from your client applications.

All your client applications will have the publishable key in them. (Never use the server key in your client-side code).

Hope this helped you guys. If it did, kindly share it with someone and help them too.

Post navigation

Hi! Thanks a lot for your tutorial. I ran into so problems when trying to replicate what you did. I’m using Ionic 2 and Firebase Hosting.

All goes well, but I don’t seam to record the actual transaction (backend isn’t working). Checking my Stripe account, the token is accessed ok with a 200 OK POST /v1/tokens, but without any Parsed Request Query Parameters. Can you help out what I might be doing wrong? Maybe something missing in Firebase? Thanks a lot!!!