类型错误：stripe.redirectToCheckout 不是 nuxt.js 中的函数

Question

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

我从前端调用 api 到后端来创建checkoutSession并返回sessionID. 我能够创建checkoutSession并返回sessionIDapi 响应，我正在调用， 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 文档，loadStripe是一个异步函数，尝试添加await条带赋值：

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

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

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