I am building a frontend using Angular (v12.1.5) where I want to use Razorpay API to fetch the payments made. I installed the Razorpay library for this purpose.

npm -i razorpay

Now, I used the sample code, as under:

var instance = new Razorpay({ key_id: 'YOUR_KEY_ID', key_secret: 'YOUR_SECRET' })

The compiler is not able to find Razorpay and fails at:

Cannot find name 'Razorpay'

I even tried to add library reference in tsconfig.json but that didn't help either.

 "paths": {
      "exceljs": ["node_modules/exceljs/dist/exceljs.min"]
      "Razorpay": ["node_modules/razorpay/dist/razorpay.js"]

Any suggestions please ?

CodePudding user response：

You can use it like this:

import { Component } from '@angular/core';

import Razorpay from 'razorpay';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  constructor() {
    const instance = new Razorpay({
      key_id: 'YOUR_KEY_ID',
      key_secret: 'YOUR_KEY_SECRET',
    });
  }
}

but this is a library for nodejs you will need many polyfills to make it work on the front end

CodePudding user response：

Have you add this before your @Component decoration?:

declare var Razorpay: any;
 
@Component({
....

I copy this steps to use it in angular, from HERE:

1. Declare a variable called Razorpay as any type.
2. Declare a variable called options with all the parameters required for the Razorpay checkout. Some of the parameters are captured in the form Razorpay order id is being returned in the response of the REST API Since it is a demo application, the rest of the parameters are hardcoded. But in a live application, most of these values will be captured dynamically from the user.
3. Defines a handler function to create a payment.success event. So that when event is occured, the payment response can be captured and processed.
4. Binds the form data to OrderService.createOrder() method that returns an Observable object. If the order is created successfully, then,
5. It populates the order id from the response and form parameters into the options variable. Creates an instance of Razorpay with the options and calls Razorpay.open() method to initiate the payment process. Defines a handler function for the payment.failed event in order to log the error details and show failure reason in the page in case of payment failure. Make sure to store the payment failure details in the Order table in the database. So that the customer can retry the payment. Defines a function called onPaymentSuccess and binds the payment.success event with this function using the @HostListener decorator as we already explained in the previous article. Whenever a payment.success event is triggered, this function will be invoked to process the payment response. This function invokes OrderService.updateOrder() function that returns an Observable object. On successful response, it will set the paymentId from the response. So that, a payment success message will be displayed along with the paymentId.