Question

我目前正在将Paypal服务集成到我的Vue项目中。我已经参考了官方文档，并复制了代码https://developer.paypal.com/docs/checkout/integrate/#6-verify-the-transaction。我能够呈现“贝宝”按钮，完成交易并收到一个orderID。但是，由于以下错误，我无法将orderID发送到服务器：this。$ store未定义。 请注意，我能够在我的其他组件中引用此$。下面是我的以下代码：

更新：我尝试使用onApprove方法中的console.log（this），它返回未定义。那是问题吗？

更新我已经将OnApprove方法和capture（）方法转换为箭头功能，并收到了一条不同的错误消息this。$ store.dispatch（...）。then（...） .err不是函数

更新我设法通过将.err（）更改为.catch（）来解决上述错误。

更新，我遇到另一个问题，有时我单击“贝宝”按钮，外部贝宝窗口将立即自行关闭。我必须单击按钮几次，以防止这种奇怪的行为。我转到控制台日志，发现此消息，如以下屏幕截图所示。

    <template>
  <div>
    <div id="paypal-button-container"></div>
  </div>
</template>

<script>
import { PRODUCT_PAYPAL } from "@/store/actions/products";

export default {
  mounted() {
    paypal
      .Buttons({
        createOrder: function(data, actions) {
          return actions.order.create({
            purchase_units: [
              {
                amount: {
                  value: "0.01"
                }
              }
            ]
          });
        },
         onApprove: (data, actions) => {
          return actions.order.capture().then(details => {
            alert("Transaction completed by " + details.payer.name.given_name);
            console.log("orderID is ");
            console.log(data.orderID);

            // Call your server to save the transaction
            return this.$store
              .dispatch(PRODUCT_PAYPAL, data.orderID)
              .then(() => {
                alert("success");
              })
              .catch(() => {
                alert("error");
              });
          });
        }
      })
      .render("#paypal-button-container");
  }
};
</script>

<style>
</style>

如以下屏幕截图所示，我能够接收到orderID，这意味着交易成功。但是，this。$ store是未定义的。因此，我无法将订单ID发送到服务器

Answer 1

在回调函数上使用箭头功能，可以访问此。

onApprove: (data, actions) => ...

return actions.order.capture().then((details) => ...

Vuex this。$ store在“已安装”生命周期挂钩中未定义

1 个答案: