Custom theme for Payment Request Button [Stripe]

Question

Usually, we use a theme which was provided stripe like the following.

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

They have also provided some theme's like 'dark' | 'light' | 'light-outline'

My question is can we create a custom theme for this button.? eg: a blue colour theme

Or is there any workaround or script hack for changing the color of the button.?

Answer 1

It is not possible to custom style the payment request button. However, you can use Stripe's payment request API with a custom button. The documentation only 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 you can refer to as an example.

Essentially, just create whatever kind of button you want on your page. Then, bind the click event to paymentRequest.show, where paymentRequest is an instance of Stripe's PaymentRequest. For example:

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

Then, when you get the token, simply call ev.complete('success') before the end of the delegate function. For example:

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

The only slight hangup is that Apple dictates that the Apple Pay button must be styled a certain way, according to their HIG. The Stripe Elements payment request button handles this out of the box, but since you're no longer using the Elements button with this approach, you simply need to change your custom button manually. There's a number of ways you can do that. In my example code, I'm using Bootstrap and Fontawesome, so in the canMakePayment delegate function:

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

In my button HTML, I have a span with a "default" class that contains the normal button content and another span with an "applepay" class that is hidden initially and contains the following 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 2

I've been trying to do this as well, but the reference docs here at the very bottom seem to indicate the answer is "no".

Looks like beyond a type, and theme the only thing you can set is a height: https://stripe.com/docs/stripe-js/reference#element-options

(Screenshot of relevant section below, in case it changes)