How to Customize Apple Pay Button in Stripe Payment Gateway Plugin for WooCommerce?

So you have set up Apple Pay payment method with Stripe Payment Gateway Plugin for WooCommerce, and now want to explore options to customize the Apple Pay button.

In this article, we’ll show you how to change size as well as the color of Apple Pay button, which will be visible on your WooCommerce cart and checkout page.

Here’s how you should get started.

First, add all the styling attributes under the following tags for cart page and checkout page respectively:

.woocommerce-cart button.apple-pay-button
{
/* Add your cart page styling attributes here */
}
.woocommerce-checkout button.apple-pay-button
{
/* Add your checkout page styling attributes here*/
}

The entire code should then be pasted into your theme style.css

Customizing the Size of the Apple Pay button:

Following is a screenshot of the default Apple pay button on cart page.Stripe WooCommerce Customize ApplePay Default Button

Let’s say we want to reduce the button width to 50%. Add the following CSS code to your theme’s style.css file, under the tag for cart page (shown in the earlier section of this article).

width: 50% !important;

The custom Apple Pay button appears on the cart page as shown in the screenshot below.Stripe WooCommerce Customize ApplePay Custom Button

Likewise, to customize the Apple Pay button on the Checkout page, add the same code under the checkout page’s tag of the same file.

Following is a screenshot of the default Apple pay button on the checkout page.Stripe WooCommerce Customize ApplePay Default Button CO

 

The customized Apple Pay button on the checkout page will be as shown in the screenshot below.Stripe WooCommerce Customize ApplePay Custom Button CO

 

Inverting Apple Pay button color and adding border:

You can invert color and a border color to Apple Pay button. To do this, add the following code to your theme’s style.css file, under the cart page’s tag.

-webkit-appearance: none !important;
background-color: white !Important;
background-image: -webkit-named-image(apple-pay-logo-black);
border: 2px solid #3D9CD2 !important;

Stripe WooCommerce Customize Cart ApplePay Color

In the same way, to customize color on the Checkout page, add the same code under the Checkout page’s tag of the same file.

Following is a screenshot of the customized Apple pay button on the checkout page.Stripe WooCommerce Customize Checkout ApplePay Color

 

To know how to set up Apple Pay using Stripe Payment Gateway Plugin for WooCommerce, check this article.

To know more about the product, check out Stripe Payment Gateway Plugin for WooCommerce.

For understanding each feature of the plugin, visit the product setting up article.

Or check out the documentation section for more related articles.

Leave a Reply

Your email address will not be published. Required fields are marked *