我试着在Laravel vuejs SPA中使用条纹。
我首先使用以下命令安装了vue-stripe

npm i @vue-stripe/vue-stripe

这是我用来触发付款的组件

<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>

我还创建了成功页面和显示短消息的错误页面。
当我单击按钮时，我被重定向到条纹页面，输入我的凭证和卡号。
在确认付款后，我没有被重定向到成功或错误页面，而是启动该过程的页面，即我在这里描述的页面。
为什么重定向不起作用？
P.S.原始脚本已转换为“脚本设置”形式，但即使是经典形式，麻烦也是一样的。