Payment Integration with Razorpay in Ionic 5

Introduction

In this lesson, you can learn how you can create a Payment Integration with Razorypay in Ionic apps.

Creating an Order

For creating an order we need server side app.Here, I use express node app to create an order.I have basic express setup and installed razorpay for using Razorpay.

Install Razorypay using below command.

$ npm i razorpay --save

In this sample app, I have setup 3 pricing plans (watch youtube video).

For each plan, I have called a request to create an order from Razorpay.

In the below code, I have initialized Razorpay by using API Key and Secret key.You can get these keys from Razorpay Dashboard.Goto setting -> API Keys to get these keys.

index.js

var express = require("express");
var body_parser = require('body-parser');
var cors = require("cors");
var Razorpay = require("razorpay");

var app = express();

app.use(body_parser.json());
app.use(cors());

var instance = new Razorpay({
    key_id: 'your_api_key',
    key_secret: 'your_secret_key'
});

app.listen('2000', () => {
    console.log('Works!');
});

Then I create an order for each pricing plan using orders.create() method by passing amount & currency as options

index.js

app.get("/createOrderBasic", (req, res) => {
 var options = {
        amount: 500,  // amount in the smallest currency unit
        currency: "USD",
    };
    instance.orders.create(options, function (err, order) {
        res.send(order);
    });
});

app.get("/createOrderPremium", (req, res) => {
 var options = {
        amount: 2000,  // amount in the smallest currency unit
        currency: "USD",
    };
    instance.orders.create(options, function (err, order) {
        res.send(order);
    });
});

app.get("/createOrderUltimate", (req, res) => {
 var options = {
        amount: 5000,  // amount in the smallest currency unit
        currency: "USD",
    };
    instance.orders.create(options, function (err, order) {
        res.send(order);
    });
});

Setting Up the UI

I have basic gird UI setup and each grid has a ion-card.In each card, there is a button to trigger the payment with method buy(plan) where plan is the pricing plan selected.

payment.page.html

<ion-content>

  <div class="ion-text-center">
    <h1 id="header">
      Choose best plan to host your site
    </h1>
    <ion-note id="desc">
      Our website hosting plan includes easy setup and backups
    </ion-note>
  </div>

  <ion-grid>
    <ion-row>

      <ion-col size="4">
        <ion-card mode="ios" button id="card1" class="ion-text-center">
          <ion-icon name="flame"></ion-icon>
          <ion-card-header>
            <ion-card-title>Basic</ion-card-title>
            <ion-card-subtitle><sup>$</sup>5 <sub>/mo</sub></ion-card-subtitle>
          </ion-card-header>
          <ion-card-content>
            <h2>Plan Details</h2>
            <p>
              20 GB SSD
            </p>
            <p>
              Unlimited Bandwidth
            </p>
            <p>
              Upto 3 websites
            </p>
            <ion-button (click)="buy('basic')" fill="outline" color="light" mode="md">
              Buy Now
            </ion-button>
          </ion-card-content>
        </ion-card>
      </ion-col>

      <ion-col size="4">
        <ion-card mode="ios" button id="card2" class="ion-text-center">
          <ion-icon name="star"></ion-icon>
          <ion-card-header>
            <ion-card-title>Premium</ion-card-title>
            <ion-card-subtitle><sup>$</sup>20 <sub>/mo</sub></ion-card-subtitle>
          </ion-card-header>
          <ion-card-content>
            <h2>Plan Details</h2>
            <p>
              50 GM SSD
            </p>
            <p>
              Unlimited Bandwidth
            </p>
            <p>
              Upto 5 websites
            </p>
            <ion-button (click)="buy('premium')" fill="outline" color="light" mode="md">
              Buy Now
            </ion-button>
          </ion-card-content>
        </ion-card>
      </ion-col>

      <ion-col size="4">
        <ion-card mode="ios" button id="card3" class="ion-text-center">
          <ion-icon name="heart"></ion-icon>
          <ion-card-header>
            <ion-card-title>Ultimate</ion-card-title>
            <ion-card-subtitle><sup>$</sup>50 <sub>/mo</sub></ion-card-subtitle>
          </ion-card-header>
          <ion-card-content>
            <h2>Plan Details</h2>
            <p>
              1 TB SSD
            </p>
            <p>
              Unlimited Bandwidth
            </p>
            <p>
              Upto 10 websites
            </p>
            <ion-button (click)="buy('ultimate')" fill="outline" color="light" mode="md">
              Buy Now
            </ion-button>
          </ion-card-content>
        </ion-card>
      </ion-col>

    </ion-row>
  </ion-grid>
</ion-content>

payment.page.scss

#header {
 font-weight: bold;
 margin-top: 50px;
 color: #667;
 font-size: 30px;
}

#desc {
 font-size: small;
}

#card1 {
 background: linear-gradient(to left top, #c165dd, #5c27fe);
}

#card2 {
 background: linear-gradient(to left top, #77f08b, #068a64);
}

#card3 {
 background: linear-gradient(to left top, #ff7c6e, #f5317f);
}

ion-grid {
 padding: 50px 100px 0 100px;
}

ion-card {
 transition: 0.5s;
 margin: 50px;

 ion-card-title,
 ion-card-subtitle {
 color: #ffffff !important;
 font-size: 25px;
    }

 ion-card-content {
 h2 {
 font-weight: bold;
 color: #ffffff;
 text-decoration: underline;
        }

 p {
 color: #ffffff !important;
 margin: 20px auto;
        }
    }

 ion-icon {
 font-size: 150px;
 color: #fff;
 position: absolute;
 top: 40%;
 left: 1%;
 opacity: 0.2;
 transform: rotate(-30deg);
    }
}

Triggering the Payment

To use Razorpay in client side app, you need to include a script tag in your src/index.html file.

<script src="https://checkout.razorpay.com/v1/checkout.js"></script>

Based on the plan selected, we set name,price,theme and http paramater to fetch order id from server.

Then we made a http get request from the local node server to get Order Id.After that, we initialize the payment using the method initPay().

payment.page.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient } from "@angular/common/http";
import { ToastController } from '@ionic/angular';
import { HTTP } from "@ionic-native/http/ngx";
declare var Razorpay: any;

@Component({
  selector: 'app-payments',
  templateUrl: './payments.page.html',
  styleUrls: ['./payments.page.scss'],
})
export class PaymentsPage implements OnInit {

 constructor(public http: HttpClient, public toastCtrl: ToastController, public httpDevice: HTTP) { }

 ngOnInit() {

  }

 initPay(options) {
 var rzp1 = new Razorpay(options);
    rzp1.open();
  }

 buy(plan) {
 let name, price, theme, param;

 if (plan == "basic") {
      name = "Basic Plan";
      price = "500";
      theme = "#8F46EE";
      param = "createOrderBasic";
    }
 else if (plan == "premium") {
      name = "Premium Plan";
      price = "2000";
      theme = "#3FBD78";
      param = "createOrderPremium";
    }
 else {
      name = "Ultimate Plan";
      price = "5000";
      theme = "#FA5777";
      param = "createOrderUltimate";
    }

 let url = "http://localhost:2000/";

 this.http.get(url + param).subscribe(res => {
      console.log(res);
 var options = {
 "key": 'your_api_key',
 "name": name,
 "description": "Fire Focus Hosting Service",
 "amount": price,
 "currency": "USD",
 "image": "/assets/icon/favicon.png",
 "order_id": res["id"],
 "handler": (response) => {
          console.log(response);
 this.presentToast();
        },
 "theme": {
 "color": theme
        }
      };

 this.initPay(options);
    });
  }

 async presentToast() {
 const toast = await this.toastCtrl.create({
      message: "Payment Succesful",
      duration: 3000
    });

    toast.present();
  }
} 

I hope you understand the lesson.Please leave your feedback in comments.Cheers!