將反應 state 傳遞給 paypal 按鈕

Question

如何將 React 組件 State 傳遞給下面的 function：

https://developer.paypal.com/docs/business/checkout/set-up-standard-payments/#step-1-add-payment-buttons

  componentDidMount() {
window.paypal
      .Buttons({
        createOrder: function (data, actions) {
          return actions.order.create({
            purchase_units: [
              {
                amount: {
                  value: "0.01",
                },
              },
            ],
          });
        },
        onApprove: function (data, actions) {
          return actions.order.capture().then(function (details) {
                alert("Transaction completed by " + details.payer.name.given_name);
              });
            },
          })
          .render("#paypal-button-container");
}

我想這樣做：

     return actions.order.capture().then(function (details) {
        alert("Transaction completed by " + details.payer.name.given_name);
        this.callMyFunction() //<-------------------------
      });

我已經嘗試過使用.bind(this)

我試圖檢測瀏覽器何時看到警報

兩種嘗試都沒有運氣。

Answer 1

謝謝@RobinZigmond

Looks like the paypal function rewrites the "this" object So I created a local variable var that = this Now I have access to any react function I want

componentDidMount() {
var that = this
window.paypal
      .Buttons({
        createOrder: function (data, actions) {
          return actions.order.create({
            purchase_units: [
              {
                amount: {
                  value: "0.01",
                },
              },
            ],
          });
        },
        onApprove: function (data, actions) {
          return actions.order.capture().then((details)=> {
          console.log(this)
          console.log(that)
                    alert("Transaction completed by " + details.payer.name.given_name);
                  });
                },
              })
              .render("#paypal-button-container");
    }