Integrate IppoPay With Cordova SDK

Integrate the IppoPay Checkout with your Cordova App.

Integrate IppoPay Payment Gateway on your Cordova app to accept payments.

Installation

ionic cordova plugin add ippopay.ionic.cordova

In your Cordova project folder, run the below commands to install the plugin:

cd your-cordova-project-folder
ionic cordova platform add ios
ionic cordova platform add android
ionic cordova platform add browser

Android Changes

Make Sure to you have to update Compile & Target SDK versions to above or equal to 33 in applevel build.gradle

Import Kotlin plugin to Project level build.gradle like below

plugins {
    id 'org.jetbrains.kotlin.android' version '1.7.20' apply false
}

PodFile Changes for iOS

Open the PodFile using below command. Go to Cordova Project and run the below steps.

cd platforms/ios
open podfile

Update the below changes in PodFile

platform :ios, '12.0' 

Deintegrate POD and update POD using below commands

pod deintegrate
pod install
pod update

Enable UPI Intent Flow on iOS

To enable UPI Intent in iOS integration, you must do the following changes in your app's info.plist file.

<key>LSApplicationQueriesSchemes</key>
<array>
    <string>amazonToAlipay</string>
    <string>paytmmp</string>
    <string>whatsapp</string>
    <string>phonepe</string>
    <string>bhim</string>
    <string>gpay</string>
</array>

Create Order

Create order from Server side using below API and get the Order id. Click here to know how to create a order.

Usage

1. In your app's home.page.html file, add the following code. It allows your customer to open the Checkout and make the payment.

    <ion-button (click)="payWithIppopay()">
        Pay With Ippopay
    </ion-button>

2. In your app's home.page.ts file, import IppopayCheckout like below:

declare var IppopayCheckout:any;

3. Add the below code with the order_id generated in Create Order step. Add the Public key generated on the IppoPay Dashboard.

payWithIppopay() {
    var options = {
      order_id: "<ORDER_ID>",
      public_key: '<PUBLIC_KEY>',
      progress_color: "<HEX_COLOR>"
    }
    var successCallback = function (success: string) {
      alert('payment_id: ' + JSON.parse(success).transaction_id)
    }
    var cancelCallback = function (error: string) {
      alert('Error:'+JSON.parse(error).message)
    }
    IppopayCheckout.on('payment.success', successCallback)
    IppopayCheckout.on('payment.cancel', cancelCallback)
    IppopayCheckout.open(options)
}

Sample code

home.page.ts file

import { Component } from '@angular/core';
declare var IppopayCheckout: any;
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  constructor() {}
  payWithIppopay() {
    var options = {
      order_id: "<ORDER_ID>",
      public_key: '<PUBLIC_KEY>',
      progress_color: "<HEX_COLOR>"
    }
    var successCallback = function (success: string) {
      alert('payment_id: ' + JSON.parse(success).transaction_id)
    }
    var cancelCallback = function (error: string) {
      alert('Error:'+JSON.parse(error).message)

    }
    IppopayCheckout.on('payment.success', successCallback)
    IppopayCheckout.on('payment.cancel', cancelCallback)
    IppopayCheckout.open(options)
  }
}

home.page.html file

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      IppoPay
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Blank</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-button (click)="payWithIppopay()">
    Pay With Ippopay
  </ion-button>
</ion-content>