类型错误:stripe.redirectToCheckout 不是 nuxt.js 中的函数 [英] TypeError: stripe.redirectToCheckout is not a function in nuxt.js

问题描述

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

I am trying to integrate stripe payment gateway. I have a nuxt.js for front-end and adonis.js for backend.

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

From front-end I am calling an api to backend to create checkoutSession and return the sessionID. I am able to create checkoutSession and return the sessionID and in api response I am calling the stripe.redirectToCheckout but it is not redirecting rather gives error as stripe.redirectToCheckout is not a function. How can I redirect users to checkout Page?

我也安装了 stripe-js 文件.

I have install the stripe-js file also.

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>

推荐答案

这应该有效:

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

这篇关于类型错误:stripe.redirectToCheckout 不是 nuxt.js 中的函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！