🚀 Razorpay Angular Integration Service

This Angular service provides a structured, chainable, and reusable approach to integrate Razorpay Checkout in your Angular applications.

📦 Features

• ✅ Type-safe configuration with IRazorpayOptions
• ✅ Fluent chainable API (setKey(), setAmount(), etc.)
• ✅ Dynamic Razorpay script loading with cache check
• ✅ Success & error callback support
• ✅ Optional theme and modal configuration
• ✅ Script cleanup after transaction

📁 Installation

1. Include Razorpay Script

The service dynamically loads the Razorpay checkout script:

https://checkout.razorpay.com/v1/checkout.js

No need to add it manually in index.html.

2. Provide the Service

Register it globally or use providedIn: 'root'.

@NgModule({
  ...
  providers: [RazorpayService],
})
export class AppModule {}

🔧 Usage

Step 1: Inject the Service

constructor(private razorpayService: RazorpayService) {}

Step 2: Configure and Open Payment Modal

this.razorpayService
    .setKey('YOUR_KEY_ID')
    .setAmount(50000) // in paise: 50000 = ₹500.00
    .setCurrency('INR')
    .setOrderId('order_ABC123xyz')
    .setPrefill({
        name: 'John Doe',
        email: '[email protected]',
        contact: '+919999999999',
    })
    .onPaymentSuccess((res) => {
        console.log('✅ Payment Success:', res);
    })
    .onPaymentError((err) => {
        console.error('❌ Payment Failed:', err);
    })
    .openPaymentGateway();

🧠 API Reference

Chainable Methods

| Method | Description | | ------------------------------ | ---------------------------------- | | setOptions(options) | Set full IRazorpayOptions object | | setKey(key) | Set Razorpay Key | | setAmount(amount) | Set amount in paise | | setCurrency(currency) | Set currency (e.g., INR) | | setOrderId(orderId) | Razorpay order ID | | setName(name) | Merchant name | | setDescription(description) | Description shown in modal | | setImage(imageUrl) | Logo image URL | | setPrefill(info) | Customer name/email/contact | | setNotes(notes) | Metadata for internal tracking | | setThemeColor(color) | Theme color (hex) | | setThemeBackdropColor(color) | Modal backdrop color | | onPaymentSuccess(cb) | Callback on successful payment | | onPaymentError(cb) | Callback on error/cancellation | | openPaymentGateway() | Launch Razorpay modal |

🎯 Default Configuration

name: 'Eduvitech India Pvt. Ltd.',
description: 'Payment for your subscription or purchase',
image: 'https://www.eduvitech.com/assets/img/logo_vert.png',
prefill: {
  name: 'Eduvitech India Pvt. Ltd.',
  email: '[email protected]',
  contact: '+91 98550 05553'
}

These can be overridden using individual setters or setOptions().

❌ Error Handling

Error types handled:

• Script load failure (script.load.failed)
• Razorpay modal dismissal (modal.dismissed)
• Payment failed events from Razorpay

Example:

.onPaymentError((err) => {
  if (err.code === 'modal.dismissed') {
    alert('User cancelled the payment.');
  } else {
    console.error('Unhandled error:', err);
  }
});

🧼 Script Cleanup

Razorpay script is automatically removed after every transaction (success or failure) using:

REMOVE_RAZORPAY_SCRIPT();

You don't need to handle script cleanup manually.

📄 Types Overview

• IRazorpayOptions: Razorpay configuration object
• IRazorpayPaymentResponse: Payment success response
• IRazorpayErrorResponse: Error or cancellation details

📚 License

MIT — Developed and maintained by Eduvitech India Private Limited.