没有智能按钮的 Vue/Laravel PayPal 集成

Question

我真的很担心 PayPal 强迫你在智能按钮上使用他们的设计，所以我想以另一种方式集成它。

我有一个 Vue/Laravel 应用程序，在 Vue 方面，它是这样的：

<div class="column">
    <button class="button is-link is-fullwidth" @click="purchaseWithPayPal">
        <span class="icon">
            <font-awesome-icon :icon="paypalIcon"/>
        </span>
        <span>{{ $t('modal.paypal') }}</span>
    </button>
</div>


 ...

purchaseWithPayPal() {
    axios.post('api/paypal/make-payment', {
        amount: 5
    })
},

在 Laravel 方面，我关注 this post 进行集成。

我所做的一切都是一样的，但问题是在成功创建所有内容后我被重定向：

return redirect()->to($redirect_url);

并且由于与 CORS 相关的错误而导致问题。我想这是因为我正在发出一个 AJAX 请求然后重定向，但我没有看到一种方法可以使它成为一个简单的点击事件。如何集成它以便使用我的设计并规避 CORS 问题？

Answer 1

不确定您是否查看过 https://www.paypal.com/buttons/smart 或手动样式文档，但几乎所有网站都有相当多的设计选项。

我想说的主要好处正是不必必须重定向，而是拥有现代的“上下文”体验，您的网站保持在后台加载。

但是，如果您真的希望从您的网站重定向，我的做法是在 ajax 调用中返回 URL，然后使用接收客户端 JS 设置 window.top.location.href。

---

您遇到的确切问题是您正在重定向 ajax 获取本身，因此它正在尝试获取 PayPal 网站 em> 通过 XHR。在您当前的尝试中，您实际上并没有重定向客户端窗口。