ngx-razorpay

Angular library for integrating the Razorpay payment gateway, compatible with both Single Page Applications (SPA) and Server-Side Rendering (SSR).

Installation

You can install ngx-razorpay via npm:

npm install ngx-razorpay

You can install ngx-razorpay via yarn:

yarn add ngx-razorpay

You can install ngx-razorpay via pnpm:

pnpm add ngx-razorpay

Usage

Import the Module

Import the NgxRazorpayModule into your Angular module:

import { NgxRazorpayModule } from 'ngx-razorpay';

@NgModule({
  imports: [
    NgxRazorpayModule
  ]
})
export class AppModule { }

Use in the Component

Use the ngx-razorpay component in your Angular templates:

<ngx-razorpay
  [key]="yourRazorpayKey" 
  [amount]="paymentAmount" 
  [businessName]="businessName" 
  [orderId]="orderId"
>
</ngx-razorpay>

Inputs

Input	Type	Description
key	string (required)	Razorpay API key
amount	number (required)	Amount to be paid in paisa (e.g., 100 for ₹1)
businessName	string (required)	Name of the business
orderId	string (required)	Order ID or reference
currency	string	Currency code (default: "INR")
description	string	Description of the payment
logoUrl	string	URL of the business logo
customerName	string	Name of the customer
customerEmail	string	Email of the customer
customerMobile	string	Mobile number of the customer
method	PaymentMethod	Payment method (e.g., 'card', 'netbanking', 'wallet'...)
notes	{ [key: string]: any }	Additional notes or metadata
hideTopbar	boolean	Hide the top bar
themeColor	string	Color theme for the checkout form
backdropColor	string	Background color of the overlay
backdropClose	boolean	Close on backdrop click
escape	boolean	Close on escape key press
handleBack	boolean	Handle back button press
confirmClose	boolean	Confirm before close
onDismiss	Function	Callback function on dismiss
animation	boolean	Enable animation
subscriptionId	string	ID of the subscription
subscriptionCardChange	boolean	Allow card change for subscription
recurring	boolean	Enable recurring payments
redirect	boolean	Redirect after payment
customerId	string	ID of the customer
rememberCustomer	boolean	Remember customer details
timeout	number	Timeout for payment (in milliseconds)
isCustomerNameReadOnly	boolean	Make customer name field readonly
isCustomerEmailReadOnly	boolean	Make customer email field readonly
isCustomerMobileReadOnly	boolean	Make customer mobile field readonly
isCustomerEmailHidden	boolean	Hide customer email field
isCustomerMobileHidden	boolean	Hide customer mobile field
ngClass	string	Custom CSS classes
ngStyle	{ [key: string]: string }	Custom inline styles
payBtnText	string	Text for the pay button
payBtnTemplate	TemplateRef<any>	Template for the pay button

Outputs

Output	Description
paymentSuccessEvent	Event emitted on successful payment
paymentFailedEvent	Event emitted on failed payment

Methods

Method	Description
onPay	Method to handle the payment event.

License

This project is licensed under the MIT License - see the LICENSE file for details.