How To Integrate Razorpay Payment Gateway In Angular

In this article, we will learn how to integrate the payment gateway of razorpay in angular.

First of all, we have to create a angular application.

Add the below script

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

Now, we’ll need a secret key/id, which you can collect from RazorPay Dashboard, so we’ll need to create a new account on razorpay.com. You’ll need an email and a mobile number to register on razorpay.com, if you’ve not, otherwise you can log in to your Razorpay account.

– Follow thw below path and take the secret key/id,

Select Settings -> API Keys -> To generate the key for the specified mode, use Generate Key.

Create a service and add the below code

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root'
})
export class AuthService {
get nativeWindow():any{
return window
}
  constructor() { }
}

– Now add the below code in app.component.ts file

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../auth.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  constructor(private Auth: AuthService) { }
  public options = {
    "key": "----Your Key----",// Enter the Key ID generated from the Dashboard
    "amount": "50000", // Amount is in currency subunits. Default currency is INR. Hence, 50000 refers to 50000 paise
    "currency": "INR",
    "name": "Acme Corp",
    "description": "Test Transaction",
    "image": "https://example.com/your_logo",
    "order_id": "", //This is a sample Order ID. Pass the `id` obtained in the response of Step 1
    "prefill": {
      "name": "test",
      "email": "test@example.com",
      "contact": "1234567890"
    },
    "notes": {
      "address": "App Corporate Office"
    },
    "theme": {
      "color": "#3399cc"
    }
  };
  ngOnInit(): void {
  }
  rzp1: any;
  public pay():any {
    this.rzp1 = new this.Auth.nativeWindow.Razorpay(this.options)
    this.rzp1.open()
  }
}

– And add the below code to app.component.html file

<div class="container">
    <button (click)="pay()">Pay</button>
</div>

Output:~

Submit a Comment

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

Subscribe

Select Categories