How to use Custom Styles for Stripe Payment Request Button?

If you’re using this WordPress Plugin: WooCommerce Stripe Payment Gateway and you need a button for the Apple Pay or Google Pay to be exactly like you want or to match your theme’s styling, then you know it is not an easy task to modify it. Even though it is told on the Stripe Documentation: Stying the Stripe Payment Request Button it is still not very clear to everyone.

I’ve done this for my client, it’s been one challenging task for me. However, after 2-3 hours of scratching my hairs, I came to this Stack Overflow answer: Custom Theme for Stripe Payment request button.

Since I see a lot of people looking for this answer and finding no answer with a much easier and WordPress-related explanation, I thought of writing this blog post.

Let’s have a look at how you can style the button. Before we begin make sure you are using these things:

• WordPress with WooCommerce
• WooCommerce Stripe Payment Gateway Plugin
• You have the Payment request button activated

Styling the Stripe Payment Request Button

Creating the HTML of New Button

First of all, what you need to do is add your new button. Go to your checkout, cart or single product page template and add there your Custom Button using HTML.

Since this button is only shown on the mobile, it is a good choice to wrap our HTML in an if condition using the wp_is_mobile() function.

You can use something like this:

<?php if ( wp_is_mobile() ) { ?>
<div style="text-align:center;">
<button id="custom-btn">BUY USING GOOGLE PAY</button>
</div>
<?php } ?>


The “custom-btn” ID for the button is what we will be using to bind the click event with our own button.

Modify the Payment Request Script in the plugin

Now, go to the wp-content/plugins/woocommerce-gateway-stripe/assets/js/stripe-payment-request.js file. This is where we need to make changes for the button to function properly.

Look for var prButton which will be right under the following line of code:

var elements = stripe.elements( { locale: wc_stripe_payment_request_params.button.locale } );

OR move to line number 337 and you’ll find it there.

Now replace the following code:

var prButton = elements.create( 'paymentRequestButton', {
paymentRequest: paymentRequest,
style: {
paymentRequestButton: {
type: wc_stripe_payment_request_params.button.type,
theme: wc_stripe_payment_request_params.button.theme,
height: wc_stripe_payment_request_params.button.height + 'px'
},
}
} );


With this one:

var prButton = document.getElementById('custom-btn');
prButton.addEventListener('click', paymentRequest.show);

After doing this, search for #wc-stripe-payment-request-button in this file and everywhere replace it with #custom-btn. That’s it!

Final Changes

For your changes to take effect, you have to also edit the following file: wp-content/plugins/woocommerce-gateway-stripe/assets/js/stripe-payment-request.min.js which is actually the same file but the minified version of it.

You can just minify your version of the code by using this online tool: Javascript-minifer and then just replace the code of the whole file with the new minified script.

Congrats! Your new custom button with be now there and will function as expected.

Use CSS to Modify

You can now just go to the Theme Customizer > Additional CSS and modify the style of the button using #custom-btn ID. Just for an example:

#custom-btn {
background-color:blue;
color:green;
font-size:20px;
}

Final Modified Files

If you’re too lazy to modify the whole files using the explanation above, you can just download the files:

Download stripe-payment-request.js
Download stripe-payment-request.min.js

Final Words

So that was my oh-so-simple way to change this button for my client. I think that works but the only problem here is: what to do when the plugin developer releases an update? Well, currently I don’t even know what to do of it but I have requested them to tell me a way I can override these scripts. As I get an answer, I’ll add it as an update here. Till then, have a great day everyone.

By the way… Check out this new blog post about How to get WordPress Plugins and themes at a lower price it would be helpful for you, and maybe for me too. 🙂