vue.js - TypeError : stripe. redirectToCheckout 不是 nuxt.js 中的函数

Question

我正在尝试集成 strip 支付网关。我有一个用于前端的 nuxt.js 和用于后端的 adonis.js。

我从前端调用 api 到后端以创建 checkoutSession 并返回 sessionID。我能够创建 checkoutSession 并返回 sessionID 并且在 api 响应中我调用 stripe.redirectToCheckout 但它不是重定向而是给出错误，因为 stripe.redirectToCheckout 不是一个函数。如何将用户重定向到结帐页面？

我也安装了 stripe-js 文件。

import { loadStripe } from '@stripe/stripe-js'
const stripe = loadStripe(process.env.STRIPE_PK)

<button class="btn btn-primary btn-block text-center rounded" @click="checkout()">Buy</button>

import { loadStripe } from '@stripe/stripe-js'
const stripe = loadStripe(process.env.STRIPE_PK)

export default {
    methods: {
        checkout() {
            let params = {
                payment_method_types: ['card'],
                line_items: [
                  {
                    name: 'Buy Now',
                    images: ['image.jpg'],
                    amount: 100 + '00',
                    currency: 'usd',
                    quantity: 1,
                  },
                ],
                mode: 'payment',
                success_url: `${process.env.URL}/success`,
                cancel_url: window.location.href,
            }
            axios
                .post(`${process.env.API_BASE_URL}/stripe/session`, params, {
                    'Content-type': 'application/json',
                    Accept: 'application/json',
                })
                .then((response) => {
                    this.stripeSession = response.data.data
                    stripe.redirectToCheckout({sessionId: this.stripeSession})
                })
                .catch((e) => {
                    console.log(e)
                })
        }
    },
}
</script>

Answer 1

根据 tyhe doc，loadStripe 是一个异步函数，尝试在 stripe 分配中添加 await:

const stripe = await loadStripe(process.env.STRIPE_PK)

编辑: 要摆脱 Module parse failed: Cannot use keyword 'await' outside an async function 错误，您只需要在函数声明之前添加异步:

async function myAsyncFunction() {
  const test = await myPromise();
}

因为我没有你的函数的完整定义，所以我不能在你的代码中向你展示它:-(

但是一个奇怪的解决方案(混合“等待”和“然后”)是:

import { loadStripe } from '@stripe/stripe-js';

axios
  .post(`${process.env.API_BASE_URL}/stripe/session`, params, {
    'Content-type': 'application/json',
    Accept: 'application/json',
  })
  .then(async response => {
    this.stripeSession = response.data.data;
    const stripe = await loadStripe(process.env.STRIPE_PK);
    stripe.redirectToCheckout({ sessionId: this.stripeSession });
  })
  .catch(e => {
    console.log(e);
  });