无法将 Stripe 结帐集成到 Vue JS 应用程序中答案

【问题标题】：Unable to integrate Stripe checkout into Vue JS app无法将 Stripe 结帐集成到 Vue JS 应用程序中
【发布时间】：2021-02-03 23:31:22
【问题描述】：

我正在尝试使用调用 payStripe 函数的点击事件重定向到条带结帐

<button @click="payStripe" class="btn btn-primary" type="button">Place Order</button>

我已经像这样将条带导入到我的 Vue 组件中；

import { loadStripe } from "@stripe/stripe-js";
const stripe = loadStripe('MY-KEY');

我正在使用 Firebase 云函数和 axois 来获取会话并将其存储到数据属性中，这很好。

但是，当调用 payStripe 方法时，会出现以下错误；

Error in v-on handler: "TypeError: stripe.redirectToCheckout is not a function"

这是我正在使用的函数，从所有帐户来看，它都类似于 Stripe API 文档；

  data() {
    return {
      sessionId: null,
    }
  },
  methods: {
    //This function sends us to the stripe checkout
     payStripe() {
        stripe.redirectToCheckout({
          sessionId: this.sessionId
        })
        .then(function(result) {
          console.log(result);
        }).catch(function(error) {
          console.log(error);
        });
     }
  },

我在使用 babel-core 时遇到了原始问题，所以我更新到 @babel/core 以在编译代码时摆脱 rest 运算符问题，但遇到了这个新问题。任何建议都会很棒。谢谢

【问题讨论】：

感谢@Phil 在将 await 添加到 loadStripe 时，我的 vue 应用程序给出了错误“关键字 await 已保留”

标签： javascript node.js vue.js stripe-payments

【解决方案1】：

根据the documentation here，loadStripe 返回一个您必须等待解决的承诺。

试试类似的东西

import { loadStripe } from "@stripe/stripe-js"
const stripeInit = loadStripe('MY-KEY') // returns a promise

当你想使用条纹时

methods: {
  //This function sends us to the stripe checkout
  payStripe() {
    // wait for the promise to resolve first
    stripeInit.then(stripe => {
      stripe.redirectToCheckout({
        sessionId: this.sessionId
      }).then(function(result) {
        console.log(result);
      }).catch(function(error) {
        console.error(error);
      });
    })
  }
}

【讨论】：