Ionic 5 App with Stripe Payment

Instructions on how to add Stripe payments to your Ionic 5 PWA and Web 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:

🚧

Important Note!

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

Note that you will need to arrange for your actual Stripe API to make it work.

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 account (will need to be activated to go live), 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:

15621562

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:

15581558

🚧

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.

Creating App from Template

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

AppClient Apperyio Database

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:
924924

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:

239239

The next step 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 Stripe_Settings library that has been imported with the backup:
11281128
  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:
11291129

Testing App

Now, when your app version is ready, you might like to test it.

You can select whether you would like to use our Appery.io Tester app or proceed with exporting your app for Android or iOS with further installing it on a device.

Using Appery.io Tester App

A great option to quickly test the app is to use our Appery.io Tester app.
Here are the details how you can use it.

701701

Sample QR Code that can be used to scan from the Appery.io Tester App

Exporting Your App

  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 projec::
633633

🚧

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):
12381238

Testing on Device

  1. Install the app on your device and run it reviewing the items on sale and adding them to Favorites:
21372137
  1. To make your first purchase, select the item, click Buy and, in the new window, use the test card number 4242424242424242 with any valid expiration date and CVV (read more here). Confirm the payment by clicking Pay:
10801080
  1. You will be notified that the payment is successful:
10801080
  1. Also, your Stripe Payments dashboard should show the new charge info:
15591559

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.

πŸ‘

Appery.io Tester App

A great option to quickly test the app on the device is to use our Appery.io Tester app.
The app is free and available for both iOS and Android.
You can check out this page to learn more about using the Appery.io Tester app.

466466

🚧

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):

975975

πŸ‘

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:

πŸ“˜

Video: Payment via Stripe for PWA and Web Application

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