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

Question

通常，我们使用theme提供条带，如下所示。

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

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

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

或者是否有任何变通方法或脚本黑客可以更改按钮的颜色。

Answer 1

我一直在努力做到这一点，但最底层的参考文档似乎表明答案是“不”。

在type和theme之后，您可以设置的唯一内容是height：https://stripe.com/docs/stripe-js/reference#element-options

（以下相关部分的屏幕截图，如果有变化）

Answer 2

无法自定义付款请求按钮的样式。但是，您可以使用带有自定义按钮的Stripe付款请求API。此文档仅hints。此外，这应该仍然是100％PCI兼容，因为您的应用程序仍然永远不会看到或触及任何信用卡信息。我有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);

然后，当您获得令牌时，只需在委托功能结束前调用ev.complete('success')。例如：

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

根据他们的HIG，唯一的一点点就是苹果公司规定Apple Pay按钮必须以某种方式设置样式。 “条带元素”付款请求按钮处理此开箱即用，但由于您不再使用此方法使用“元素”按钮，因此您只需手动更改自定义按钮即可。您可以通过多种方式实现这一目标。在我的示例代码中，我使用的是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中，我有一个＆＃34;默认＆＃34;包含正常按钮内容的类，另一个包含＆＃34; applepay＆＃34;最初隐藏的类，包含以下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>

Answer 3

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

Haven没有使用Stripe，我也不知道它是<button>还是更复杂的HTML标记结构，而且我也在他们的文档中的某个地方读过它们并不能保证维护他们元素的HTML结构。

无论如何，在针对这种干预时，请记住以下几点：最重要的是，逐步发展：

1. 找到一个暂时有效的解决方案。理想情况下，它应该是优雅和无声地降级/失败的东西（没有面临公众的错误）
2. 最大限度地承受Stripe标记中的微小修改的能力

此外，保留您的源文件，以便您可以轻松地使您的解决方案适应Stripe的任何标记更改，以便您可以在停止工作时提供修复。

如果你依赖CSS（推荐），你应该检查当前渲染的标记，并找出当前应用的选择器。简单地编写更强大的选择器就足够了。如果Stripe通过JavaScript应用了样式，那么您可能需要在CSS中使用!important。当然，你应该尽可能地避免使用它，或者至少要对尽可能多的设备进行彻底的测试。 根据经验，!important在CSS中非常糟糕。它是一种非常强大的锤子，大部分时间都会打破精致的东西（即：触摸设备的响应性）。

或者，如果您依赖JavaScript来进行样式设置，则可能需要使用setTimeout()并确定在调用prButton.mount()方法之后触发更改之前要等待的正确毫秒数。在多个设备上测试。我建议不要使用这种方法，因为它更容易出错并且更难以控制：您希望在构建元素之后立即对更改进行计时，但（理想情况下）在渲染之前。当然，有一些解决方法，例如在应用更改之前隐藏或淡化它。

注意：这不是一项容易的任务，没有人（除了条纹本身，通过提供适当的方法）可以保证你的防弹解决方案，所以我想了如何处理的原则它可能比短期和长期更有价值，而不是试图让Stripe在测试/开发帐户上工作，并提供一个特定的解决方案，可能会在第二天停止工作，当Stripe更改其标记时。