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

通常，我们使用

主题

，该主题由条带提供，如下所示

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

他们还提供了一些主题，如

“暗”|“光”|“光轮廓”

我的问题是我们能为这个按钮创建一个自定义主题吗。？蓝色的主题

---

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

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

看起来好像超出了

类型

，而

主题

唯一可以设置的是

高度

：

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

阅读付款请求按钮的实现步骤，很明显元素具有id:

#付款请求按钮

没有使用过Stripe，我不知道它是

还是更复杂的HTML标记结构，我也在他们的文档中读到过，他们不保证维护他们元素的HTML结构

无论如何，在进行此类干预时，有几件事需要记住：最重要的是，分步骤进行：

找到一个暂时有效的解决方案。理想情况下，它应该是优雅而安静地降级/失败（没有面向公众的错误）

最大限度地提高承受来自条带的标记的微小修改的能力

另外，保留源文件，这样您就可以轻松地使解决方案适应来自Stripe的任何破坏标记的更改，这样您就可以在解决方案停止工作时提供修复

如果依赖CSS（推荐），则应检查当前呈现的标记，并找出当前应用的选择器。简单地编写更强的选择器就足够了。如果样式是通过JavaScript按条带应用的，那么您可能需要使用

！重要信息

在CSS中。当然，您应该尽可能避免使用它，或者至少在尽可能多的设备上进行彻底测试。
根据经验，

！重要提示

在CSS中非常糟糕。这是一个非常强大的锤子，大多数时候它会打破微妙的东西（例如：触摸设备的响应能力）

或者，如果您依赖JavaScript来进行样式设置，您可能希望在调用

prButton.mount（）

方法后，使用

setTimeout（）

并确定触发更改之前需要等待的毫秒数。在多个设备上进行测试。我建议不要使用这种方法，因为它更容易出错，也更难控制：您希望在构建元素之后，但（理想情况下）在渲染之前对更改计时。当然，还有一些变通方法，例如在应用更改之前隐藏或淡入淡出

---

---

注意：这不是一项容易的任务，没有人（通过提供适当的方法，除去条带本身）我可以向您保证一个防弹的解决方案，因此我认为制定如何实现它的原则可能比尝试让Stripe在测试/开发帐户上工作并提供可能第二天停止工作的特定解决方案更有价值，更改其标记时。

无法自定义付款请求按钮的样式。但是，您可以通过自定义按钮使用Stripe的付款请求API。文档仅限于此。此外，这应该仍然是100%PCI兼容的，因为您的应用程序仍然不会看到或接触任何信用卡信息。我有一个例子，你可以参考

本质上，只需在页面上创建任何类型的按钮。然后，将单击事件绑定到

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);

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

然后，当您获得令牌时，只需在委托函数结束之前调用

ev.complete（'success'）

。例如：

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

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

唯一的一个小问题是，苹果公司规定，苹果支付按钮的样式必须根据用户的喜好而定。Stripe Elements payment request按钮可直接处理此问题，但由于您不再使用此方法中的Elements按钮，因此只需手动更改自定义按钮即可。有很多方法可以做到这一点。在我的示例代码中，我使用了Bootstrap和fontsawesome，因此在

canMakePayment

delegate函数中：

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中，我有一个包含“默认”类的span，该类包含普通按钮内容，另一个span包含一个“applepay”类，该类最初隐藏，并包含以下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>

使用Apple Pay购买

感谢您的回复。我确实注意到了这个内容文档，我真的想知道是否有任何解决方法或脚本破解来改变它。？你有关于这个的任何信息吗？你可以很容易地放弃Stripe的一体式支付小部件，设计你自己的表单，让它成为你想要的任何东西。如果这是一个可接受的替代方案，我会在几小时后回家时给你举个例子。@BrianGottier如果我们设计了自己的表单，我们如何在表单中附加付款请求按钮？我希望你所说的“定制”指的是包含卡详细信息的设计……对不起，即使我的浏览器是最新的，我也看不到什么是付款请求按钮，因为Stripe说它不适用于我的浏览器。在实现所有人都不能使用的东西之前，您可能需要考虑一下这一点。@BrianGottier实际上，如果您使用活动条带密钥，它可以正常工作，而且它只是表单中的第二个选项，对我们来说也是如此。但我的客户已经看到了，他认为这是一个整洁的功能，他反对删除它（我想你知道他们是怎么笑的）。顺便说一句，请发布定制设计，我会看一看。按钮是在

Iframe

中生成的，因此您知道

CSS

样式在