How to integrate Ionic Framework & Stripe single and recurring payments

Learn how to integrate Ionic Framework & Stripe in this tutorial

Ionic Framework makes integrating Stripe a quick and easy process. Stripe is one of the world’s leading payment processors and has built a reputation for being extremely developer friendly. They are available in a number of countries and you can attempt to go the Stripe Atlas route if you fall outside of the approved countries.

There are two main ways of integrating Stripe into an Ionic application

You can either go with the Ionic Native implementation, which is a wrapper around the Stripe native SDKs for iOS and Android. This is powered by cordova-plugin-stripe. This has the limitation of only facilitating the creation of tokens for once off payments. The limitation is within the plugin and could change in the future.

The alternative approach is to use Stripe.js which is Stripe’s JavaScript implementation of their functionality. This is easy to use and quick to implement as this is implemented in JavaScript and Ionic at its core is powered by web technologies. The functionality is delivered dynamically into the page and supports both single and recurring payments.

After we complete this tutorial you will be able to integrate Ionic with Stripe and create tokens that you can use to charge your users with either a once off amount or a recurring payment.

The final payment processing will need to be integrated into your backend as a separate task. This tutorial will focus primarily on the creation of the tokens necessary to charge the user.

I have added a repository with the completed tutorial code at https://github.com/Baadier-Sydow/ionic-stripe

Last updated for Ionic 3.9.2

Subscribe to receive my latest Ionic Framework content, courses and tutorials. You will also gain access to exclusive newsletter only bonus content on the site.

Close this popup

Getting Started

Let’s start by setting up your Ionic installation. Navigate to where you would like to install this project using your terminal and enter the following:

Enter an appropriate project name, for example, stripe as I’ve done, and select Y to add the Cordova native platforms to this project when the question is presented.

Navigate to the folder using:

Setup your Stripe profile and retrieve your API key

Stripe provides you with both testing and live API keys that you will need to use to complete the integration. Firstly, sign up for a Stripe account, and then retrieve your API keys by following the instructions here.

You should not have an issue signing up for a Stripe account even if you reside outside of their list of approved countries. The challenge occurs when you attempt to transact live payments. The test key will be sufficient for this tutorial.

Create the pages, add the plugins and connect them all

The first thing you will need to do is to create all the necessary pages you will need and add them to your app.module.ts.

Run the following commands to create the pages:

Now add them to your applications module file:

Open up your home.html file and change it to match the code below. We are doing this to make it easier to test the different versions of Stripe we are integrating.

Now let’s add the functions that the buttons are calling to your home.ts file. Include the code below to handle the button presses and ensure that the correct pages are being loaded.

Integrate Stripe.js into your Ionic project

Let’s start by adding the Stripe.js script file to your index.html. Make the following change to the head of your index.html:

With that step completed we can start by making the changes we need to StripeJavaScriptPage().

Open up stripe-java-script.html and make the following amendments to it.

We are using Stripe Elements to bootstrap our payment form. This will be bound together in stripe-java-script.ts and the Stripe form will be injected in when ready. The form id will be used to bind everything together.

Before we move on we are going to add some generic styles to our stripe-java-script.scss.

Now we can start working on the stripe-java-script.ts. This where all the action takes place. First, amend your code in stripe-java-script.ts to match the following and then we can walk through it together.

The first step we are doing is to declare a Stripe variable that will stop the compiler from complaining about a missing object.

Then we new up a Stripe object using your Stripe API key and create a variable to hold the Stripe Elements object.

The code that sets up the Stripe Element and the handlers for the events that comes back from the Stripe element is setup using the ionViewDidLoad() lifecycle event.

The majority of the work for this functionality takes place in the setupStripe() function.

The function does quite a bit and it would be better to separate the setup and binding code from the setup of the event handlers but this is sufficient for what we are attempting to do.

We first set up a Stripe Element, add some base styles, create a card and then mount it onto the view.

With the card created we can now listen to errors from the card and add a listener for submit events. We prevent the default from taking place on submit and then select either createToken() or createSource() to authorise the card for future charges.

Use createToken() if you need to make a once off payment or createSource() to create a card that can be billed multiple times in the future.

When the promise resolves you will receive an object back that has everything you need to make payments with this card.  This is where you would integrate an API call to your server to send through the source id, last 4 digits etc

Integrate Stripe Native SDKs ie iOS & Android into your Ionic project

To integrate the native Stripe implementation into Ionic we start with adding the Cordova plugin and then add the Ionic Native wrapper to make working with it easier.

Once this is completed we need to add the Ionic Native Stripe helper to your app.module.ts.

We now have all the setup complete and can move onto setting up our view to host our payment form.

I’ve opted to make this as simple as possible for the purpose of showing you how to do the foundational setup. I’m just binding variables to the view using ngModel instead of using a reactive form that will make firing some inline validation easier for the sake of simplicity.

The view will include some Ionic inputs and a button to submit the request to Stripe.

Amend stripe-native.html to the following.

Your stripe-native.ts will handle the legwork of validating the card details and submitting it to the Stripe servers. You will be able to communicate to your own API once you receive a successful response back from Stripe with the tokenized card object.

Amend your stripe-native.ts file to reflect the code below and we can walk through it together afterwards.

First, we import the Ionic Native Stripe helper into this component and then we create a few variables that will hold the card details that we bound to the view in the previous step.

Now we set the Stripe key on the object when the view loads. Once again, we are using the ionViewDidLoad() lifecycle hook. This step would be better suited done in your app.component.ts when the application boots up but I’ve done it here for simplicity.

Finally, we call our validateCard() function which only creates the Stripe card object and then fires off the captured card details to Stripe. When the promise resolves you would retrieve the data and then communicate with your own API to actually bill the card.

It’s important to actually validate the card details before attempting to create the token. The Ionic Native Stripe documentation includes all the available functions that you can use to validate the card number, cvv etc.

Unfortunately, the Native implementation only supports creating card tokens and bank account tokens for once-off payments. If you want to bill the card more than once in the future then you will need to use the Stripe.js integration and create a payment source.

Conclusion: Ionic Framework & Stripe

We’ve learnt how to do two different ways of integrating Stripe into an Ionic project. You can use both in the same application if you wanted to though you would have to use the JavaScript integration if you want recurring payments.

You still have a fair bit of work to do once you’ve completed the integration of the frontend of the application as you will need to bill the payment source from your server.

The full completed repo can be viewed here.

Subscribe to receive my latest Ionic Framework content, courses and tutorials. You will also gain access to exclusive newsletter only bonus content on the site.

Close this popup
Start Learning

Sign Up!

Subscribe to receive my weekly newsletter and receive my latest content when its published and exclusive newsletter only content.