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:

Styling the Stripe Payment Request Button

Custom 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>
<?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');

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 {

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. 🙂


  1. Great blog post, really helpful. I wanted to know if theres a way to move the request button on the product page, below the add to cart button. I have looked up everywhere but the thing i found either break my site or give me some error stating:
    ”Something went wrong. Your change may not have been saved. Please try again. There is also a chance that you may need to manually fix and upload the file over http://FTP.”

    • Hi,

      Thank you.

      Yes, that error occurs when you are adding code using Appearance > Editor section in the WordPress Dashboard. If you add the code using FTP/cPanel then wouldn’t be an issue.

      I think to move the button below the add to cart button, you can tweak the plugin code so it gets added there. The button is added using jQuery code so you have to modify that code to make it appear after the add to cart button.

  2. Thanks for this helpfull post!
    I wondered if its possible to change the design of the G-Pay button only?
    Because Apple Pay looks great so far but the G-Pay is an ugly purple button with a not clear text “buy now”.

    • You’re welcome, Krystian.

      Using the above guide we can change the text and style of the Google Pay button using the “custom-btn” ID using CSS.

      In the tutorial, I just add some sample styles but you can modify it to whatever you like.

  3. Thanks for this post!
    I have a question, when applying these changes it also applies to the apple pay button.
    Is there a way to apply these changes only to the G-pay button?

    • You’re welcome! I think that would be custom work to check the condition which button is going to be displayed by checking which device the visitor is accessing the page from, would be a bit complex but surely possible.

  4. Hi

    I am implementing the custom button in react. Can you please help me to figure out how once can detect browser and based on that apply specific styles for GOOGLEPAY and APPLEPAY

  5. I really like your writing style, good information, thanks for posting :D. “I hate mankind, for I think myself one of the best of them, and I know how bad I am.” by Joseph Baretti.


Please enter your comment!
Please enter your name here