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

Posted 2023-02-16

【中文标题】没有智能按钮的 Vue/Laravel PayPal 集成

【英文标题】：Vue/Laravel PayPal integration without smart buttons

【发布时间】：2020-09-25 10:15:47

【问题描述】：

我真的很担心 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 问题？

【参考方案1】：

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

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

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

---

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

【讨论】：

手动样式的问题是存在预定义的样式选项。我使用 Bulma 作为我的 CSS 框架，如果我集成 PayPal 按钮，按钮看起来不一样。我想要你所说的上下文体验，但我不知道如何使用定制设计来做到这一点。请注意，除了 PP，我还有 Stripe 和 3rd 提供商付款选项，如果我在一个模式中有 3 种不同的设计，它看起来很糟糕

您可以只显示 PayPal 按钮并将其设置为至少 10 种不同的形状*颜色组合之一，我很惊讶没有足够贴合的东西。让它在传统的 PayPal 黄色或蓝色背景中脱颖而出并不是一件坏事，客户认识到这一点

颜色不是问题，形状才是问题。您可以看到样式与其他按钮不同。更甚者，在 PP 智能按钮旁边有一个布尔玛按钮，你可以看到它们是不同的。类似的是，但同样的不是。这不是我想要的 UI，因为我的强迫症在里面尖叫 :)

知道了，我总是建议人们，独特的 PayPal 按钮值得拥有，因为有一定（相当大的）客户知道并信任它。他们可能（还）不熟悉您的网站/业务，但他们知道 PayPal，因此他们更有可能对初次购买感到足够自信/安全。基本上它值得销售。

我最终如你所说，返回 URL，然后成功回调调用 window.open(response.data.redirect, '_parent');。谢谢