Scoping issue variable not accessible from inside the handler: function

Question

inside the

handler': function(response: any) {
          alert(response.razorpay_payment_id);
            alert(this.paymentId);
            this.success();
        },

no variable is accessible for example I defined paymentId: Number = 11; but inside that function in the alert message it shows undefined. I also called the function success and it doesn't recognize that as function. That block excutes there is not doubt about it since it correctly shows response.razorpay_payment_id. Variables outside the handler like key and amount works but inside the function its all undefined or not recognisable even when that function runs.

import { Component, OnInit, Inject } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { AuthService } from 'src/app/services/auth.service';
import { WINDOW } from 'src/app/services/window.service';
import { environment } from '../../../environments/environment';

@Component({
  selector: 'app-invoice-detail',
  templateUrl: './invoice-detail.component.html',
  styleUrls: ['./invoice-detail.component.css']
})
export class InvoiceDetailComponent implements OnInit {
  _id: Number;
  singleInvoiceDetail: any;
  siteUrl: String;
  userDetail: any;
  totalAmount : number;
  rzp1: any;
  title = 'app';
  options : any;
  clientKey: String;
  paymentId: Number = 11;

  constructor(
    private activatedRoute: ActivatedRoute, 
    private auth: AuthService, private router: Router, 
    @Inject(WINDOW)private window: Window) {
      activatedRoute.data.subscribe((data: any)=> {
        if(data.profileDetails.status==="success") {
        this.userDetail = data.profileDetails.data;
        }
      })
     }

  ngOnInit() {
  this.activatedRoute.paramMap.subscribe(params=>{
    this._id = parseInt(params.get('id'));
   });
   this.activatedRoute.data.subscribe((res: any)=> {
    if(res.invoiceDetails.status===200) {
    this.singleInvoiceDetail = res.invoiceDetails.body.data.find((invoice: any) => invoice.id === this._id);
      this.auth.razorPayClientKey().subscribe((res: any)=>{
        this.clientKey = res.data.key;
        this.loadRazorPay();
        });
    }
  }, (err: any)=>{
    alert("Error fetiching invoice details");
  })
  }

  loadRazorPay(){
  this.options = {
    'key': this.clientKey,
    'amount': this.singleInvoiceDetail.total_amount*100,//'2000', // 2000 paise = INR 20
    'name': 'KudosHub',
    'description': 'payment',
    'image': 'theme/images/logo.svg',
    'handler': function(response: any) {
      alert(response.razorpay_payment_id);
        alert(this.paymentId);
        this.success();
    },
    'prefill': {
        'name': this.userDetail.first_name+" "+this.userDetail.last_name,
        'email': this.userDetail.email,
    },
    'notes': {
        'address': ''
    },
    'theme': {
        'color': '#F37254'
    }
  };
  }
  public initPay(): void {
    this.rzp1 = window.Razorpay(this.options);
    this.rzp1.open();
  }

  success() {
    console.log("Success");
  }

}

score 0 · Answer 1 · answered Mar 02 '19 at 07:29

You should use arrow function => to maintain the scope of this.

 this.options = {
    'key': this.clientKey,
    'amount': this.singleInvoiceDetail.total_amount*100,//'2000', // 2000 paise = INR 20
    'name': 'KudosHub',
    'description': 'payment',
    'image': 'theme/images/logo.svg',
    'handler': (response: any) => {
      alert(response.razorpay_payment_id);
        alert(this.paymentId);
        this.success();
    },
    'prefill': {
        'name': this.userDetail.first_name+" "+this.userDetail.last_name,
        'email': this.userDetail.email,
    },
    'notes': {
        'address': ''
    },
    'theme': {
        'color': '#F37254'
    }
  };

Scoping issue variable not accessible from inside the handler: function

1 Answers1