PayPal批准/完成交易后调用外部函数[重复]

Question

我正在为我的结帐流程集成 PayPal 智能按钮 下面是呈现按钮的代码

     LoadPaypalButton(orderid :string , link : string,token : string , applicationbaseurl:string)
  {
    this.addPaypalScript().then(()=>{paypal.Buttons({enableStandardCardFields: true,
      style: {
        shape: 'rect',
        color: 'blue',
        layout: 'vertical',
        label: 'paypal',
    },
      createOrder: function() {
        return orderid
       },
       onApprove : function(data , actions) {
        return fetch(link, {
          method: 'post',
          headers: {
            'Authorization': token,
            'content-type': 'application/json'
          },
          body: JSON.stringify({
            OrderID: data.orderID
          })
        }).then(function(res) {
          return res.json();
        }).then(function(details) {
          console.log( details);
          console.log(details);
          actions.redirect(applicationbaseurl+'OrderHistory/'+token);

        })
       }
     }
    ).render('#paypal-button-container')});


  }

一切正常，我想在事务完成后调用外部函数来处理我的 UI，而不将用户带到任何其他页面。如何在脚本中调用如下函数

callsuccess()
 {
   // Some Other work....
   console.log("Something ..!");

 }

我使用 Angular 8.0 作为我的前端。这是我迄今为止在 OnApprove 中尝试过的：

   onApprove : function(data , actions) {
    return fetch(link, {
      method: 'post',
      headers: {
        'Authorization': token,
        'content-type': 'application/json'
      },
      body: JSON.stringify({
        OrderID: data.orderID
      })
    }).then(function(res) {
      return res.json();
    }).then(function(details) {

      this.callsuccess(); //  This does not work
      actions.redirect(applicationbaseurl+'OrderHistory/'+token);

    })
   }

给我下面的错误

zone-evergreen.js:172 Uncaught TypeError: Cannot read property 'callsuccess' of undefined
at http://localhost:4200/main.js:1430:30
at ZoneDelegate.invoke (http://localhost:4200/polyfills.js:3365:26)
at Zone.run (http://localhost:4200/polyfills.js:3130:43)
at http://localhost:4200/polyfills.js:3861:36
at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:3397:31)
at Zone.runTask (http://localhost:4200/polyfills.js:3174:47)
at drainMicroTaskQueue (http://localhost:4200/polyfills.js:3565:35)

有没有人有任何建议来实现这一点..？

Answer 1

尝试使用箭头函数：

onApprove : (data , actions) => {
    return fetch(link, {
      method: 'post',
      headers: {
        'Authorization': token,
        'content-type': 'application/json'
      },
      body: JSON.stringify({
        OrderID: data.orderID
      })
    }).then((res) => {
      return res.json();
    }).then((details) => {

      this.callsuccess(details);


   actions.redirect(applicationbaseurl+'OrderHistory/'+token);

    })
   }

注意function(data , actions) { 是如何变成(data, actions) => { 的，promise 的then 函数也是如此。

这应该保留this，因为箭头函数具有this 关键字的词法范围。该函数也称为lambda functions。