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.

[lwptoc]

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 com.google.payments for Android

 

Configurations Required for Platforms

iOS

No configuration is necessary.

Android

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';


@NgModule({
  ...

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

 

Adding In App Purchase Functionality

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

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

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

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

  constructor(
    private iap: InAppPurchase
  ) { }

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


  buyProducts(productId) {
    this.iap
      .buy(productId)
      .then((data) => {
        console.log(data);
        alert('Purchase was successful!');
      })
      .catch((err) => {
        console.log(err);
        alert('Something went wrong');
      });
  }

  restorePurchase() {
    this.iap
      .restorePurchases()
      .then((data) => {
        console.log(data);
        alert('Purchase was successful!');
      })
      .catch((err) => {
        console.log(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 home.page.html file with the following template

.

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

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

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


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

</ion-content>

 

Source Code

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

Conclusion

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.