Razorpay 自定义函数未在付款失败函数 angular 中调用

Question

在 Razorpay 中，我在支付失败函数中调用了自定义 API 函数

代码：

  goToPayment() {
     this.dialogRef.close();
     this.paymentOptions = {
     key: environment.RAZORPAY_KEY,
     amount: Math.round(this.payAmount * 100),
     name: COMPANY_DETAILS.name,
     order_id: "",
     description: COMPANY_DETAILS.description,
     image: COMPANY_DETAILS.logo,
     prefill: {
         name: this.userDetails.name,
         email: this.userDetails.email,
         contact: this.userDetails.mobile,
          },
     modal: {},
     notes: {
        transaction_id: this.responseId,
         },
     theme: {
        color: COMPANY_DETAILS.backgroundColor,
      },
 };
    this.paymentOptions["modal.ondismiss"] = this.paymentCancel.bind(this);
    this.paymentOptions["handler"] = this.paymentSuccess.bind(this);

    const razorpay = new Razorpay(this.paymentOptions);
    razorpay.open();

    razorpay.on("payment.failed", (response) => {
    console.log("payment failed called", response);
    this.testFun(response);
    });
}

testFun():

  testFun = (response) => {
      console.log("Test function called", response);
  const failureParams = {
        payment: {
        transaction_id: this.responseId,
        success: false,
        payment_key: response.metadata.payment_id,
        error_code: response.error.code,
      },
    };
  this.customerPackageService.addPaymentService(failureParams).subscribe(
   (response) => {
    console.log("sucess API response", response);
   },
   (error) => {
     this.toastrService.show("VAPT", error, {
      status: "danger",
     });
   }
 );

};

服务功能：

addPaymentService(params): Observable<any> {
   console.log('add payment called', params);

   return this.http
      .put<any>(`${this.url}v1/payments`, params, this.options)
      .pipe(catchError(this.errorHandler));
}

我面临的问题：

<块引用>

第一步：调用支付失败时
console.log("支付失败调用", response);
this.testFun(response);
日志已打印且 testFun 已执行

<块引用>

第 2 步：每当调用 testFun 函数
console.log("测试函数调用", response);
日志已打印但服务文件未执行

为什么服务文件不执行？