无法将Stripe Checkout集成到Vue JS应用中

问题描述

我正尝试使用调用payStripe函数的click事件重定向到条纹签出

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

我已经像这样将Stripe导入了我的Vue组件；

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

我正在使用Firebase云功能和axois来获取会话并将其存储到data属性，这很好。

但是，当调用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，以消除编译代码时出现的其他运算符问题，但遇到了这个新问题。任何建议都很好。谢谢

解决方法

根据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);
      });
    })
  }
}