Skip to content

shiv-source/ngx-razorpay

Repository files navigation

ngx-razorpay

NPM Version NPM Downloads GitHub release License GitHub Pull Requests

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.