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

Question

通常,我们使用theme提供的条带,如下所示.

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

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

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

或者是否有任何变通方法或脚本黑客用于更改按钮的颜色.

Answer 1

我一直在努力做到这一点,但是最底层的参考文档似乎表明答案是"不".

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

(以下相关部分的屏幕截图,如果有变化)

Answer 2

无法自定义样式的付款请求按钮。但是，您可以将Stripe的付款请求API与自定义按钮一起使用。该文档仅在此暗示。而且，这仍应100％兼容PCI，因为您的应用程序仍然永远不会看到或接触任何信用卡信息。我有一个CodePen，可以作为示例。

本质上，只需在页面上创建任何想要的按钮即可。然后，将click事件绑定到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要求Apple Pay按钮必须以某种方式设置样式。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中，我有一个跨度，其中包含一个包含默认按钮内容的“默认”类，另一个跨度是一个具有“ 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>