Ionic 5 Native In App Purchase Tutorial with Example Application

In this Ionic 5/4 tutorial, we’ll integrate In-App Purchase functionality in Android and iOS applications using Cordova and Ionic Native plugins.

The In-App Purchase feature allows a user to buy from a list of available products in the Application store. Use can make purchases from a list of items available make payments and also restore the purchase.

Features available

  • Simple, promise-based API
  • Support for consumable/non-consumable products and paid/free subscriptions
  • Support for restoring purchases
  • Uses well tested native libraries internally – RMStore for iOS and an adjusted for Android


Configurations Required for Platforms


No configuration is necessary.


We need to create a manifest.json file in the project’s www folder with your Android Billing Key:

{ "play_store_key": "<Base64-encoded public key from the Google Play Store>" }

This key can be fetched from the Google Play Store (under “Services & APIs”) after uploading the app.


Let’s start the integration…

Supported Platforms

  • Android
  • iOS
  • Windows


Create New Ionic App

Run the following command to create a new Ionic Angular application with a blank template

$ ionic start ionic-in-app-purchase-app blank --type=angular

Move inside the application folder

$ cd ionic-in-app-purchase-app


Install Cordova and Native Plugins

Now install the Cordova and Ionic Native plugin by running the following commands

$ ionic cordova plugin add cordova-plugin-inapppurchase
$ npm install @ionic-native/in-app-purchase


Import Plugin in AppModule

We need to import the InAppPurchase class inside the app.module.ts file

// app.module.ts


import { InAppPurchase } from '@ionic-native/in-app-purchase/ngx';


  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  bootstrap: [AppComponent]
export class AppModule { }


Adding In App Purchase Functionality

In the component class, import the InAppPurchase class and add in the class constructor function. Place following code in it

import { Component } from '@angular/core';
import { InAppPurchase } from '@ionic-native/in-app-purchase/ngx';

  selector: 'app-home',
  templateUrl: '',
  styleUrls: [''],
export class HomePage {

  productIds = ['prod1', 'prod2']; // <- Add your product Ids here
  products: any;

    private iap: InAppPurchase
  ) { }

  checkProducts() {
      .then((products) => {
        this.products = products
        //  [{ productId: 'com.yourapp.prod1', 'title': '...', description: '...', price: '...' }, ...]
      .catch((err) => {

  buyProducts(productId) {
      .then((data) => {
        alert('Purchase was successful!');
      .catch((err) => {
        alert('Something went wrong');

  restorePurchase() {
      .then((data) => {
        alert('Purchase was successful!');
      .catch((err) => {
        alert('Something went wrong');


The getProducts() method is called with productIds to fetch details of. After that user can tap on the item to purchase by calling the buy() method and complete the purchase.

User can also restore the purchase by calling restorePurchases() method available in the InAppPurchase class.

Update the file with the following template


<ion-header [translucent]="true">
      Ionic In App Purchase

<ion-content [fullscreen]="true" class="ion-padding">

  <h4>Get Products</h4>
  <ion-button expand="full" fill="outline" color="success" *ngIf="!products" (click)="loadProducts()">
    Load Products

  <ion-button *ngFor="let product of products" color="warning" (click)="buy(product.productId)">
    {{product.title}} - {{product.price}}

  <h4>Restore Purchases</h4>
  <ion-button expand="full" color="danger" fill="outline" (click)="restore()">
    Restore Purchase



Source Code

Get the source code of this application on GitHub Repository here.


That’s it we have successfully implemented the In-App Purchase functionality inside our Ionic application using Cordova and native plugins. Using this a user can get a list of available products and purchase from payment gateways available in respective App store options.



Leave a Comment

Your email address will not be published. Required fields are marked *