Why stripe doesn't correctly redirect after payment with vue-stripe

Question

I try to use stripe in a Laravel vuejs SPA.
I first installed vue-stripe with this command

npm i @vue-stripe/vue-stripe

Here is my component to trigger the payment

<template>
  <div class="text-xl sass-editor-1 text-center">
    <h1 class="text-2xl">Stripe Payment Gateway integration</h1>
    <stripe-checkout
    ref="checkoutRef"
    mode="payment"
    :pk="publishableKey"
    :line-items="lineItems"
    :sucess-url="successURL"
    :cancel-url="cancelURL"
    @loading="v =>loading = v"
    />
    <button  class="mt-4 p-2 text-white border-2 border-white rounded-lg bg-green-800" @click="submit">Pay now</button>
  </div>
</template>

<script setup>
  import {ref } from 'vue'
  import {StripeCheckout} from '@vue-stripe/vue-stripe'
  let publishableKey = "pk_test_51M6ZtzIWDjpHNQK16d1g0bq1L6wHgFxNg9KyuBiThC4fSXgAyUVjlwG6MFos0AaqaQYJOf2YC3a6oWlZqMjFtTZj00Tue51qVs"
  let loading = ref(false);
  let lineItems = ref();
  lineItems.value = [
    {
      price: 'price_1M6qubIWDjpHNQ1rITHepQD',
      quantity: 1
    }
  ];

  let successURL = ref(null);
  successURL.value = 'http://localhost:3000/success';

  let cancelURL = ref(null);
  cancelURL.value = 'https://localhost:3000/error';
  const checkoutRef = ref(null);
  function submit() {
    //stripe checkout page
    checkoutRef.value.redirectToCheckout();
  }
</script>

I also created pages for success an error that display a short message.

When I click the button, I am redirected of the stripe page to enter my credential and my card number.
After confirming the payment, I am not redirected to the success nor the error page but to the page that initiated the process, ie the page I describe here.

How comes the redirection doesn't work?

PS the original script has been converted to the "script setup" form, but even with the classic form, the trouble is the same.

Answer 1

This is mine works perfectly try to change from successURL.value to just successURL.

refer to this documentation https://docs.vuestripe.com/vue-stripe/stripe-checkout/subscriptions and look on this page exactly to the code they also use just successURL and cancelURL no value.

<template>
  <div>
    <stripe-checkout
      ref="checkoutRef"
      mode="subscription"
      :pk="publishableKey"
      :line-items="lineItems"
      :success-url="successURL"
      :cancel-url="cancelURL"
      @loading="v => loading = v"
    />
    <button @click="submit">Subscribe!</button>
  </div>
</template>

<script>
import { StripeCheckout } from '@vue-stripe/vue-stripe';
export default {
  components: {
    StripeCheckout,
  },
  data () {
    return {
        el:"checkoutRef",
        publishableKey : import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY,
        loading: false,
        lineItems: [
            {
            price: 'price_1LgqdGALkwKTK48qE1lfox5G',
            quantity: 1,
            },
        ],
        successURL: 'https://'+window.location.host+'/success',
        cancelURL: 'https://'+window.location.host+'/cancel',
    };
  },
  methods: {
    submit () {
      this.$refs.checkoutRef.redirectToCheckout();
    },
  },
};
</script>