What is the best way to retrieve the instance variable of a component from a handler method in Angular, specifically using the Razorpay API

I am working on integrating Razorpay into my Angular application.

I am trying to retrieve the value of the days variable from the handler function, but I am getting an error stating that the property days does not exist.

This is a reference to the options object in the code.

days: any;

options = {
    "key": "rzp_test_1234567890",
    "amount": "",
    "currency": "INR",
    "name": "Acme Corp",
    "description": "Test Transaction",
    "image": "https://example.com/your_logo",
    "order_id": "",
    "handler": function (response:any){
      SubscriptionPlanComponent.update_payment_to_paid(response,this.days); *****HERE*****
    },
    "prefill": {
        "name": "Gaurav Kumar",
        "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d6b1b7a3a4b7a0f8bda3bbb7a496b3aeb7bba6bab3f8b5b9bb">[email protected]</a>",
        "contact": "9999999999"
    },
    "notes": {
        "address": "Razorpay Corporate Office"
    },
    "theme": {
        "color": "#3399cc"
    }
};

update_payment_to_paid(resp:any,days:any)
{
  ... ..
}

Answer №1

Consider implementing arrow functions for better efficiency.

days: any;

options = {
    "key": "rzp_test_1234567890", // Input the Key ID generated from the Dashboard
    "amount": "", // The amount is in currency subunits. Default currency is INR. Therefore, 50000 corresponds to 50000 paise
    "currency": "INR",
    "name": "Acme Corp",
    "description": "Test Transaction",
    "image": "https://example.com/your_logo",
    "order_id": "", // This is an example Order ID. Use the `id` received in response from Step 1
    "handler": (response:any) => {
      SubscriptionPlanComponent.update_payment_to_paid(response,this.days); *****HERE*****
    },
    "prefill": {
        "name": "Gaurav Kumar",
        "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="abcccaded9cadd85c0dec6cad9ebced3cac6dbc7ce85c8c4c6">[email protected]</a>",
        "contact": "9999999999"
    },
    "notes": {
        "address": "Razorpay Corporate Office"
    },
    "theme": {
        "color": "#3399cc"
    }
};

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can the base href in Angular be dynamically changed during runtime?

Within my single Angular application, I have set the base-href to /a/b/. This means that in my dist folder, there is an HTML file with <base href="/a/b/">. As a result, the browser recognizes that an image link like assets/images/logo.png can be foun ...

An issue has occurred with the NullInjector, specifically regarding the AppModule and Storage in Ionic 4

When attempting to launch my Ionic app using npm start, an error message appears stating "NullInjectorError: No provider for Storage!". I have already included Storage in the app.module.ts file as shown below: imports: \[ BrowserModule, IonicModule ...

Angular: Material Button that Adjusts According to Header Size

How can I adjust the size of a mat-icon to match the header size? Despite my efforts, the arrows remain small. <h1> <button mat-icon-button (click)="testEvent()"> <mat-icon>keyboard_arrow_up</mat-icon> < ...

How to install a library from a Github repository in Angular 2

Currently, I am in the process of learning how to develop an Angular 2 library based on a project that has been built with Angular-CLI. To aid me in this endeavor, I am referencing the examples set by Nikita Smolenskii in ng-demo-lib and ng-demo-app. With ...

Is it possible to optimize the performance of my React and TypeScript project with the help of webpack?

I am working on a massive project that takes 6 to 8 minutes to load when I run npm start. Is there a way to speed up the loading process by first displaying the sign-in page and then loading everything else? ...

Before the file upload process is finished, the progress of tracking Angular files reaches 100%

I am currently developing a service that is responsible for uploading a list of files to a backend server. createFiles(formData: any, userToken: string): Observable<any> { const headers = new HttpHeaders({'Authorization': 'Bearer ...

What's causing this issue in Angular?

In this scenario, there is a parent component and a child component communicating with each other. The parent component passes a method to the child component, which the child component then calls and sends its own instance back to the parent. However, wh ...

Using jQuery in Jest test with Angular 5: A step-by-step guide

I am facing an issue with my Angular component that utilizes a CalendarService. Upon initialization of the component, I invoke the "calendarService.init()" method. The CalendarService is responsible for configuring a semantic-ui-calendar (which relies on ...

What causes the index to display [object Object] rather than an integer in React?

It has been a long time since I last worked with React, and now I'm facing an issue. Whenever I use console.log to display the index within the map function, my console output looks like this: https://i.stack.imgur.com/VbGmE.png However, the result ...

Tips for keeping your Angular CDK up to date and improving its performance

Having just started with Angular, I'm stuck trying to figure out why the update is throwing errors. Purpose: Update the cdk and material versions, then install file-saver. Command: npm update @angular/cdk How can I update my angular cdk? Here&apos ...

Understanding the specific types of subclasses derived from an abstract generic class in Typescript

There is a Base generic class: abstract class BaseClass<T> { abstract itemArray: Array<T>; static getName(): string { throw new Error(`BaseClass - 'getName' was not overridden!`); } internalLogic() {} } and its inherito ...

What is the timing for the execution of top-level non-export code in TypeScript?

I am currently puzzled about the execution of code in files. Let's say we have a file1.ts with the following content: export interface myInterface {} export function myFunction() {} export const myConst: {} // ... and more exports // top-level non- ...

Is it possible to eliminate a parameter when the generic type 'T' is equal to 'void'?

In the code snippet below, I am attempting to specify the type of the resolve callback. Initially: Generic Approach export interface PromiseHandler<T> { resolve: (result: T) => void // <----- My query is about this line reject: (error: a ...

Refreshing the page causes the Angular/Ionic Singleton instance to be destroyed

I have a TypeScript singleton class that is responsible for storing the login credentials of a user. When I set these credentials on the login page and navigate to the next page using Angular Router.navigate (without passing any parameters), everything wor ...

You can't observe the behavior of simulated functions in a class with a manually created mock

Kindly note that I have set up a comprehensive Github repository where you can download and explore the content yourself here I am currently working on mocking a non-default exported class within a module using a manual mock placed in the folder __mocks__ ...

Updating the value of the chosen drop down option upon selection

I currently have a Material UI dropdown menu implemented in my project. My goal is to use the selected option from the drop down menu for future search functionality. How can I utilize onChange() to store the selected option effectively? At the moment, I ...

Transforming a typical JSON file into a parent-child hierarchical JSON structure similar to the one utilized in d3's flare.json file format

My JSON file has a specific structure: { "a": "b", "c": "d", "e": { "f": "g", "h": "i" } } I want to transform it into the following structure: { "name": "Root", "parent": "null", "children": [ { ...

Troubleshooting login problems with MSAL and AD B2C

Despite dedicating a significant amount of time to learning and implementing MSAL, I am still facing challenges. Multiple issues have left me unsure of how to proceed or where I might be going wrong. Here is what I have accomplished so far: 1) Downloaded ...

Azure deployment of a proprietary npm package

As a developer with git integration for my Angular web site, I have successfully checked code into Git and deployed it to Azure. Everything was running smoothly until I encountered an issue when trying to pull a private npm package. It dawned on me that I ...

How can I use Angular to dynamically open a video that corresponds to a clicked image?

I need assistance with a functionality where clicking on an image opens a corresponding video on the next page. The issue is that all images have the same ID, making it difficult to link each image to its respective video. Below is the data I am working ...