GuidesAPI ReferenceLatest UpdatesBlogVideosStart Building Apps
API Reference

Ionic 4 PWA and Web Apps with Stripe Payment

Instructions on how to add Stripe payment to your Ionic 4 PWA and Web apps.

Introduction

Stripe Payments 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: https://dashboard.stripe.com/register 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:

1911

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:

1870

🚧

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 4 Stripe Payments 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.
  4. Click Create:
1543

Now, when you open your app, you will see that all needed pages and services have been imported automatically and you are ready to go with the app:

255

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

Setting up StripeSessionCheckoutService

  1. In the Project view, unfold the Services folder and select StripeSessionCheckoutService.
  2. Go to its Request tab, and insert the Publishable key that can be found in the Developers > API key panel of the Stripe dashboard:
1591

Setting up StripeKeys library:

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

Testing the App

You are all set now and can test the app!

Click Test and use the test card number 4242424242424242 with any valid expiration date and CVV (read more here). Confirm the payment by clicking Pay:

1020

You will be notified that the payment is successful and your Stripe Payments dashboard should show new charge info:

1898

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