为什么在使用 vue-stripe 付款后 stripe 不能正确重定向答案

【问题标题】：Why stripe doesn't correctly redirect after payment with vue-stripe为什么在使用 vue-stripe 付款后 stripe 不能正确重定向
【发布时间】：2022-11-22 17:09:47
【问题描述】：

我尝试在 Laravel vuejs SPA 中使用 stripe。
我首先使用此命令安装了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>

我还为成功创建了显示短消息的错误页面。

当我单击该按钮时，我被重定向到条带页面以输入我的凭证和我的卡号。
确认付款后，我没有被重定向到成功页面，也没有被重定向到错误页面，而是被重定向到启动该过程的页面，即我在这里描述的页面。

为什么重定向不起作用？

附言原脚本已转换为“脚本设置”形式，但即使是经典形式，麻烦也一样。

【问题讨论】：

标签： vue.js stripe-payments

【解决方案1】：

这是我的完美作品，尝试从 successURL.value 更改为 successURL。

请参阅此文档https://docs.vuestripe.com/vue-stripe/stripe-checkout/subscriptions 并在此页面上查看他们也只使用 successURL 和 cancelURL 的代码，没有任何价值。

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

【讨论】：