Ionic 5 App with Stripe Payment

Instructions on how to add Stripe payment to your Ionic 5 apps.

Introduction

Our Ionic 5 Stripe Payment app will allow you to securely charge money from a user’s credit card to your Stripe account using the Stripe API.

Our Stripe Payment Template contains ready to use services and the UI that makes it easy to use.

You will just need to add your actual Stripe API to make it work!

📘

Video: Payment via Stripe for PWA and Web application

You can also check our Appery.io Community video that shows how to organize the payment process in PWA and Web applications built with Ionic 4:

Getting Stripe Account

Before you can use the Stripe API you will need to sign up for an account and then fill out the section Public business information on the Account Settings page. It is easy - just follow the instructions on the Register page.

Adding Products

Once you are logged into your activated account, you can start with adding the products you are going to sell.
Select the Products tab and click + Add product to create your first product. In the new window, provide the needed product information, and once ready, confirm by clicking the Save product button. As many products as needed can be added one by one.
This is how the products list with three added items looks like:

Stripe API Developer Keys

Also, you can check the Developers > API key panel for your Stripe API keys.
Note, that the Publishable and Secret keys will be needed for your application later:

🚧

Note!

Please make sure that the account or business name in Stripe is successfully set up and you have added at least one product to operate with.

Create an App from the Template

Now, let's get the Ionic 5 Stripe Payment app.

This is going to be extremely simple as all you need to do is to download the template by clicking this link and then recreate the template backup under your Appery.io account:

  1. Click Create new app.
  2. Click From backup and select the project backup file on your drive.
  3. Type in the app name, for example, Ionic 5 Stripe Payment App.
  4. Click Create:

In a few moments, the app is created.
Now, when you open your app, you will see that all needed pages and services have been automatically imported and you are ready to go with the app:

The next setup is to connect the app backed with Stripe API.

Setting up Stripe_Settings library:

  1. Now, go to the Server Code tab and select the Ionic_5_Stripe_Settings library that has been imported with the backup:
  1. In the library code that opens in a new window, you will now need to provide the Stripe API Publishable key and Secret key. To find it, go back to the Developers > API key panel of the Stripe dashboard and copy the keys that need to be provided for the code.
  2. Click Save:

Testing the App

Now, when your app version is ready, you might like to proceed with exporting your app for
Android or iOS with further installing it on a device.

  1. Build an application using EXPORT > Binary selecting the format you prefer (you are also free to build both if you need): .apk / .aab or .ipa to start building your project::

🚧

Managing Build Error The provisioning file is not set

If this is your first app created with Appery you will most likely get the error signifying about missing certificates that will prevent you from successfully finishing the build process.
The error reads similar for both binary types and indicates that you should set the corresponding certificate before starting a new build.
If this notification is what you see after starting your build, please check out the this document about the certificate management that explains how to add the needed certificate to your project:

  1. Once your project is generated, you will see the QR-Code that you can use to upload the application to your device (or save the .apk / .aab or .ipa file for further use):
  1. Install the app on your device and run it using the test card number 4242424242424242 with any valid expiration date and CVV (read more here). Confirm the payment by clicking Pay:
  1. You will be notified that the payment is successful and your Stripe Payments dashboard should show new charge info:

Note, that you can try using the following test cards to check different payment scenarios:

  • 4242424242424242 Succeeds and immediately processes the payment.
  • 4000000000003220 3D Secure 2 authentication must be completed for a successful payment.
  • 4000000000009995 Always fails with a decline code of insufficient_funds.

🚧

Important Note!

After the app has been tested, activate the account and don’t forget to switch from test mode to Live in your Stripe dashboard before going live (the test mode switch should be set to off).

Note as well that before you can proceed with exporting your production app, you will need to go to Project view > Project > App settings > Android binary/iOS binary to select the Release build type (Debug is the default type for both and can be used for testing purposes only):

👍

Another Important Note!

Please, note that before you can export the app, the app certificates must be imported or automatically generated (in the case of Android).
You can check this document in case you need help with exporting your application for iOS.
Here, you will find information on generating certificates for Android.
Note as well that starting from August 2021, new apps are required to publish with the Android App Bundle (.aab) on Google Play.
Please read more here.
You can also check this Appery.io Community video that shows how to create Android and iOS certificates: