Angular does not recognize variable inside a Javascript Function, integration with Pagseguro

Question

I am consuming Pagseguro service in an Angular application version 10.2 and I am having this problem:

Inside a function in my component I call an object of type PagSeguroDirectPayment, and I can’t access any object outside to pick up the response.

hashPayment: string;

getHashPayment(){

  PagSeguroDirectPayment.onSenderHashReady(function(response){
    if(response.status == 'error') {
      return false;
    }

    //Nesse caso ele reconhece o this como um objeto do tipo PagSeguroDirectPayment
    this.hashPayment = response.senderHash;
    
  });
}

How can I pass the response.senderHash for my variable hashPayment of the component?

The pagseguro script I put in the file index.html.

<script type="text/javascript" 
 src="https://stc.sandbox.pagseguro.uol.com.br/pagseguro/api/v2/checkout/pagseguro.directpayment.js"> 
</script>

and in my component I declared it so

declare var PagSeguroDirectPayment: any;

Obs: I can even declare the variable as static, and access it within Function by placing the name of the component plus the variable static, only in that case I couldn’t use it to display in my file .html.

Answer 1

Try it this way

PagSeguroDirectPayment.onSenderHashReady((response)=>{
 if(response.status == 'error') {
  return false;
 }

//Nesse caso ele reconhece o this como um objeto do tipo PagSeguroDirectPayment
this.hashPayment = response.senderHash;

});

or so

const that=this;
PagSeguroDirectPayment.onSenderHashReady((response)=>{
  if(response.status == 'error') {
     return false;
  }

     //Nesse caso ele reconhece o this como um objeto do tipo PagSeguroDirectPayment
    that.hashPayment = response.senderHash;

  });