11

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

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

他们还提供了一些主题之类的'dark' | 'light' | 'light-outline'

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

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

4

3 回答 3

9

无法自定义付款请求按钮的样式。但是，您可以通过自定义按钮使用 Stripe 的支付请求 API。文档仅暗示了这一点。此外，这仍应 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');
});

唯一的小问题是，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 中，我有一个带有“默认”类的跨度，其中包含正常的按钮内容，另一个跨度带有一个最初隐藏并包含以下 HTML 的“applepay”类：

<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>
于 2018-04-12T03:21:53.423 回答
6

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

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

（以下相关部分的屏幕截图，以防发生变化）

在此处输入图像描述

于 2017-11-27T22:55:30.073 回答
0

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

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

无论如何，在进行此类干预时要记住以下几点：最重要的是，分步发展：

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

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

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

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

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

于 2017-12-05T04:53:46.620 回答