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

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

我从前端调用一个api到后端，创建

checkoutSession

，并返回

sessionID

。我能够创建

checkoutSession

并返回

sessionID

，在api响应中，我调用

stripe.redirectToCheckout

但它不是重定向，而是作为stripe.redirectToCheckout给出错误。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>

从'@stripe/stripe js'导入{loadStripe}
const stripe=loadStripe（process.env.stripe\u PK）
购买
从“@stripe/stripe js”导入{loadStripe}
const stripe=loadStripe（process.env.stripe\u PK）
导出默认值{
方法：{
结帐（）{
设params={
付款方式类型：[“卡”]，
行项目：[
{
名称：“立即购买”，
图片：['image.jpg']，
金额：100+00，
货币：美元，
数量：1，
},
],
方式：‘付款’，
success\u url:`${process.env.url}/success`，
取消url:window.location.href，
}
axios
.post（${process.env.API_BASE_URL}/stripe/session`，参数{
“内容类型”：“应用程序/json”，
接受：'application/json'，
})
。然后（（响应）=>{
this.stripeSession=response.data.data
stripe.redirectToCheckout（{sessionId:this.stripeSession}）
})
.catch（（e）=>{
控制台日志（e）
})
}
},
}

根据文档，

加载条带

是一个异步函数，请尝试在条带分配中添加

等待

：

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

编辑： 要摆脱

模块解析失败：无法在异步函数外部使用关键字“wait”

错误，只需在函数声明之前添加异步：

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

这应该起作用：

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

export default {
  methods: {
    async 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,
      };

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

---

您应该发送

sessionId

，但您正在发送整个

stripeSession

。您是否尝试了

{sessionId:this.stripeSession.id}

？是的，从后端api我只发送session.id作为响应，而不是整个会话。@AdamOrlov

stripe.redirectToCheckout不是一个函数

这是我得到的错误。

stripe js

你使用的是哪个版本？@AdamOrlov stripe js:

^1.11.0

使用异步获取此错误

模块解析失败：C不能在异步函数外使用关键字“wait”

我在前端使用了nuxt.js我刚刚编辑了我的答案我编辑了我的问题。谢谢-这很有效。