TypeError: stripe.redirectToCheckout is not a function in nuxt.js

user_14720625 0
Viewed 1253

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

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?

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>
stripe-payments nuxt.js vue.js
2 Answers

According to tyhe doc, loadStripe is an async function, try adding await in stripe assignement:

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

Edit: To get rid of Module parse failed: Cannot use keyword 'await' outside an async function error you just need to add async before your function declaration :

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

As I do not have the full definition of your function I cannot show it to you in your code :-(

But a weird solution (mixing 'await' and 'then') would be :

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

This should work:

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