Repository: Ionic Github Repository
Software Requirements:
Visual Studio Code(Or any preferred code editor)
What you will learn:
In this tutorial you would learning about payment processing using stripe. I would be covering these major concepts
- How to integrate the
stripe.jslibrary into your ionic application - How to send get a stripe token using your publishable key
- How to use ionic's cordova plugin to get a stripe token
Difficulty: Intermediate
Tutorial
In this tutorial i would walk through simplifying the best method of monetizing your app which will be with stripe. Stripe is an awesome platform which helps you to take charges from bank accounts through debit or credit cards that they are linked to. To see more about this you can follow This.
Understanding stripe means getting through some basic concept which i would be enumerating.
Firstly, you need to understand the two processes by which payments are made
- Getting the stripe token for a card
- Billing the card on a secure 'https' server.
The first is what we will cover and can be done on you ionic application but the second needs to be done on your backend. Ionic has an inbuild cordova plugin which makes getting a token for a card way easier but this has its downsides which i would state as we get to that. The more suitable method would be to use the 'Stripe.js' library which is gives you full access to all the methods you may need.
Integrating Stripe.Js to your project
Lets create a new project and call it 'newProject'
ionic start newProject blank
After this you can navigate to your index.html document which is the entry point for our application and add the stripe.js library to it.
Add this line
<script src="https://js.stripe.com/v3/" async></script>
And the whole file should look something like this
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Ionic App</title>
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#4e8ef7">
<style rel="stylesheet" href="app/app.scss"></style>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<script src="https://js.stripe.com/v3/" async></script>
<script src="cordova.js"></script>
<link href="build/main.css" rel="stylesheet">
<link href="assets/css/font-awesome.min.css" rel="stylesheet"/>
</head>
<body>
<ion-app></ion-app>
<script src="build/polyfills.js"></script>
<script src="build/vendor.js"></script>
<script src="build/main.js"></script>
</body>
</html>
How to get a token from stripe
Since we arent using an npm package, we would need to declare a stripe variable so our compiler would know that stripe is declared elsewhere. So generate a new page using.
ionic g page stripePayment
And in the page declare a variable like this
import { NavController, NavParams } from 'ionic-angular';
declare var Stripe;//This is where we declare the stripe variable
@Component({
selector: 'page-stripe-payment',
templateUrl: 'stripe-payment.html',
})
export class StripePaymentPage {
stripe = Stripe('YOUR_API_KEY');//We also use our publishable key from stripe
card: any;//Declare this variable for later
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
If you don't have a stripe account you should probably create one. Head to the link i gave above and create an account there. When you do you can use the publishable key on your dashboard as stated in the code above.
Stripe has a set of css styling preset when you use their library so you can just easily create a nice template for you users to input details with a simple amount of code .Since were using the library simply add a form to your html content.
<ion-header>
<ion-navbar>
<ion-title>Stripe Payment</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<form action="/" method="post" id="payment-form">
<div class="form-row">
<div id="card-element">
</div>
<div id="card-errors" role="alert"></div>
</div>
<button ion-button block large>Add Card</button>
</form>
</ion-content>
This would give stripe a wrapper for the template to be created in .You can preset some styling techniques as defined in your css like this
.form-row{
padding: 10px;
}
.StripeElement {
background-color: white;
padding: 8px 12px;
border-radius: 4px;
border: 1px solid transparent;
box-shadow: 0 1px 3px 0 #e6ebf1;
-webkit-transition: box-shadow 150ms ease;
transition: box-shadow 150ms ease;
}
.StripeElement--focus {
box-shadow: 0 1px 3px 0 #cfd7df;
}
.StripeElement--invalid {
border-color: #fa755a;
}
.StripeElement--webkit-autofill {
background-color: #fefde5 !important;
}
}
and then for our final .ts for our page
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
declare var Stripe;
@Component({
selector: 'page-stripe-java-script',
templateUrl: 'stripe-java-script.html',
})
export class StripeJavaScriptPage {
stripe = Stripe('YOUR_API_KEY');
card: any;
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
this.setupStripe();
}
setupStripe(){
let elements = this.stripe.elements();
var style = {
base: {
color: '#32325d',
lineHeight: '24px',
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSmoothing: 'antialiased',
fontSize: '16px',
'::placeholder': {
color: '#aab7c4'
}
},
invalid: {
color: '#fa755a',
iconColor: '#fa755a'
}
};
this.card = elements.create('card', { style: style });
this.card.mount('#card-element');
this.card.addEventListener('change', event => {
var displayError = document.getElementById('card-errors');
if (event.error) {
displayError.textContent = event.error.message;
} else {
displayError.textContent = '';
}
});
var form = document.getElementById('payment-form');
form.addEventListener('submit', event => {
event.preventDefault();
// this.stripe.createToken(this.card)
this.stripe.createSource(this.card).then(result => {
if (result.error) {
var errorElement = document.getElementById('card-errors');
errorElement.textContent = result.error.message;
} else {
console.log(result);
}
});
});
}
}
We are done with this now and you can simply run
ionic serve
To see your project and test it out
In you console you would see the token data that stripe returns.
Stripe Native
As stated earlier cordova has its own plugin for stripe so to use it simply use the cordova plugin and npm package by installing them as stated in the documentation
ionic cordova plugin add cordova-plugin-stripe
npm install --save @ionic-native/stripe
After this you would need to add it to your app.module.ts file and it should look like this after
import { Stripe } from '@ionic-native/stripe';
@NgModule({
...
providers: [
...
Stripe,
...
]
})
export class AppModule {}
Use these commands one after the other to install the cordova plugin and when you have collected the card details as in the example above use this rather than using the stripe.js library
createCardToken(params){
///Use the card params as stated in the example for the ts file above
}
This function will return a promise which would contain the card details.
You can find the code for this tutorial in my github page
Click to go to the github repository