付款请求按钮的自定义主题 [Stripe]

Question

通常，我们使用 theme 提供的 stripe，如下所示。

style: {
  paymentRequestButton: {
    theme: "light-outline"
  }
}

他们还提供了一些主题，例如 'dark' | 'light' | 'light-outline'

我的问题是我们可以为这个按钮创建一个自定义主题吗？ 例如：蓝色主题

或者是否有更改按钮颜色的解决方法或脚本 hack。？

Answer 1

我也一直在尝试这样做，但是最底部的参考文档似乎表明答案是 "no"。

看起来超出了 type，而 theme 您唯一可以设置的是 height：https://stripe.com/docs/stripe-js/reference#element-options

（以下相关部分的屏幕截图，以防更改）

Answer 2

阅读 Step 3 支付请求按钮的实现步骤，很明显该元素具有 id：#payment-request-button。

没有使用过 Stripe，我不知道它是 <button> 还是更复杂的 HTML 标记结构，我还在他们的文档中的某处阅读过他们不保证维护HTML 其元素的结构。

无论如何，在针对此类干预措施时要牢记以下几点：最重要的是，循序渐进：

找到暂时有效的解决方案。理想情况下，它应该 degrades/fails 优雅而安静（没有 public 面临错误）
最大化承受来自 Stripe 的标记的微小修改的能力

此外，请保留您的源文件，以便您可以轻松调整您的解决方案以适应来自 Stripe 的任何标记中断更改，以便您可以在它停止工作时提供修复。

如果您依赖 CSS（推荐），您应该检查当前呈现的标记并找出当前应用的选择器。只需编写更强大的选择器就足够了。如果 Stripe 通过 JavaScript 应用样式，您可能需要在 CSS 中使用 !important。当然，你应该尽可能避免它，或者至少在尽可能多的设备上进行全面测试。
根据经验，!important 在 CSS 中相当糟糕。这是一个非常强大的锤子，大多数时候它会破坏易碎的东西（即：触摸设备的响应能力）。

或者，如果您依赖 JavaScript 进行样式设置，您可能想尝试使用 setTimeout() 并确定在 [= 之后触发更改之前等待的适当毫秒数15=] 方法被调用。在多个设备上进行测试。我建议不要使用这种方法，因为它更容易出错且更难以控制：您希望在元素构建之后但（理想情况下）在它呈现之前对更改进行计时。当然，也有变通办法，例如隐藏或淡化它直到应用您的更改。

注意：这不是一件容易的事，没有人（除了 Stripe 本身，通过提供适当的方法）可以保证你有一个防弹的解决方案，所以我想布置与尝试让 Stripe 在 test/dev 帐户上工作并提供可能在第二天 Stripe 更改其标记时停止工作的特定解决方案相比，关于如何处理它的原则在短期和长期内可能更有价值。

Answer 3

无法自定义付款请求按钮的样式。但是，您可以将 Stripe 的付款请求 API 与自定义按钮一起使用。文档只有hints at this. Also, this should still be 100% PCI-compliant, as your application still never sees or touches any credit card information. I have a CodePen你可以作为例子参考。

基本上，只需在页面上创建您想要的任何类型的按钮即可。然后，将点击事件绑定到paymentRequest.show，其中paymentRequest是Stripe的PaymentRequest的一个实例。例如：

let stripe = Stripe('pk_test_abc123');
let paymentRequest = stripe.paymentRequest({
    ...
});
let button = document.getElementById('awesome-custom-button');
button.addEventListener('click', paymentRequest.show);

然后，当你拿到token时，只需在委托函数结束前调用ev.complete('success')即可。例如：

paymentRequest.on('token', function (ev) {
    // do whatever with the token
    ev.complete('success');
});

唯一的小问题是 Apple 规定 Apple Pay 按钮必须根据他们的 HIG 以某种方式设计。 Stripe Elements 付款请求按钮开箱即用，但由于您不再通过这种方法使用 Elements 按钮，您只需手动更改自定义按钮即可。有多种方法可以做到这一点。在我的示例代码中，我使用了 Bootstrap 和 Fontawesome，因此在 canMakePayment 委托函数中：

if (result.applePay) {
    button.className = 'btn btn-dark';
    button.style.backgroundColor = '#000';
    button.querySelector('.default').style.display = 'none';
    button.querySelector('.applepay').style.display = 'inline';
}

在我的按钮 HTML 中，我有一个包含正常按钮内容的 "default" class 跨度和另一个包含 "applepay" [=39= 的跨度] 最初是隐藏的，包含以下 HTML:

<span class="fa-lg">
    <i class="fab fa-apple-pay" data-fa-transform="grow-12"></i>
</span>
<span class="sr-only">Purchase with Apple Pay</span>

付款请求按钮的自定义主题 [Stripe]

Custom theme for Payment Request Button [Stripe]

javascript

jquery

css

stripe-payments

stripe.js