Angular library for integrating the Razorpay payment gateway, compatible with both Single Page Applications (SPA) and Server-Side Rendering (SSR).
You can install ngx-razorpay via npm:
npm install ngx-razorpayYou can install ngx-razorpay via yarn:
yarn add ngx-razorpayYou can install ngx-razorpay via pnpm:
pnpm add ngx-razorpayImport the NgxRazorpayModule into your Angular module:
import { NgxRazorpayModule } from 'ngx-razorpay';
@NgModule({
imports: [
NgxRazorpayModule
]
})
export class AppModule { }Use the ngx-razorpay component in your Angular templates:
<ngx-razorpay
[key]="yourRazorpayKey"
[amount]="paymentAmount"
[businessName]="businessName"
[orderId]="orderId"
>
</ngx-razorpay>| 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 |
| Output | Description |
|---|---|
| paymentSuccessEvent | Event emitted on successful payment |
| paymentFailedEvent | Event emitted on failed payment |
| Method | Description |
|---|---|
| onPay | Method to handle the payment event. |
This project is licensed under the MIT License - see the LICENSE file for details.