WebToffee Logo
  • Home
  • Plugins
  • Blog
  • Documentation
  • Support
Login
0

  • Getting Started
    • Plugin set up
  • Stripe via Credit Card
    • Credit/Debit Card Payment
  • Apple Pay
    • Set up Apple Pay
    • Customize Apple Pay button
    • Pay via Apple Pay from UK and Canada
    • Apple pay on devices
  • Google Pay
    • Payment Request Button
  • Stripe Checkout
    • Set up Stripe Checkout
  • Local Gateways
    • EPS pay
    • Przelewy24 pay
    • Set up AliPay
    • Bancontact pay
    • Set up Klarna
    • WeChat pay
    • iDEAL Pay
    • Sofort
    • Afterpay or Clearpay
    • SEPA Payment
  • Stripe Overview
    • Stripe dashboard within WordPress
  • Troubleshoot
    • Steps for troubleshoot
  • SCA Ready
    • Get SCA Ready
  • Compatibility with Subscription
    • Integration with WooCommerce Subscription
  • Third-Party Compatibility
    • Plugins
  • Video Tutorial
    • Plugin Setup Tutorial
  • Changelog
    • Version 3.4.5

Documentation/Stripe Payment Gateway for WooCommerce/Customize Apple Pay Button using Stripe Payment Gateway Plugin for WooCommerce

Customize Apple Pay Button using Stripe Payment Gateway Plugin for WooCommerce

Last updated on June 10, 2021

With the Stripe Payment Gateway Plugin for WooCommerce, you can customize the appearance of the Apple Pay button.

In this article, we’ll show you how to change the size as well as the color of the Apple Pay button, which will be visible on your WooCommerce cart, checkout, and product 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 the cart page (shown in the earlier section of this article).

width: 50% !important;
Stripe WooCommerce Customize ApplePay Custom Button

The custom Apple Pay button appears on the cart page as shown in the screenshot below.

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 border color of the 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.

  • For understanding each feature of the plugin, visit the product setting up article.
  • Or check out the documentation section for more related articles.

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

  • Was this article helpful?
  • Yes, thanks!Not really
Get the plugin

On this page

  • Customizing the size of the Apple Pay button
  • Inverting Apple Pay button color and adding border

This article posted in Apple Pay, Code Snippet, Documentation, Stripe Payment Gateway for WooCommerce and tagged apple pay, apple pay button, payment gateway, stripe

Written by

WebToffee Team

WebToffee Team is a group of WordPress and WooCommerce enthusiasts consisting of expert developers, testing engineers, technical support engineers, and SMEs.

Got any query? Please leave a comment or reach out to our support

Cancel reply

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

We develop awesome WordPress plugins & WooCommerce extensions to help build successful online businesses.

© 2022 WebToffee. All rights reserved.

Our plugins

  • GDPR Cookie Consent
  • PDF Invoices & Packings Slips
  • Product Import Export Plugin
  • User & Customer Import Export
  • Import Export Suite
  • Sequential Order Numbers
  • Smart Coupons for WooCommerce
  • URL Coupons for WooCommerce
  • PayPal Express Checkout
  • Stripe Payment Gateway
  • Subscriptions for Woocommerce
  • Product Catalog Sync for Facebook
  • PrintNode for PDF Invoices
  • Order, coupon, subscriptions for WooCommerce
  • WordPress Backup and Migration
View more +

Get Started

  • Plugins
  • Testimonials
  • Affiliates
  • We're hiring

Help & Support

  • Documentation
  • Documentation (Basic)
  • FAQ
  • Support

Company

  • Terms & Conditions
  • Privacy Policy
  • Refund policy
  • Support policy
  • License Activation

© 2022 WebToffee. All rights reserved.

We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies. However you may visit Cookie Settings to provide a controlled consent.
Cookie settingsACCEPT
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of the basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website, to store user preferences and provide you with content and advertisements that are relevant. Such cookies will be stored on your browser but only upon procuring consent.

You will also have the option to opt-out of these cookies should you want to. But opting out of some of these cookies may have an effect on your browsing experience as per the descriptions elucidated against the respective categories below.

Necessary
Always Enabled
The cookies defined under this category are absolutely essential for the website to function. Hence they are loaded by default irrespective if user consent.
CookieDescription
__cfruidCloudflare sets this cookie to identify trusted web traffic.
__stripe_midStripe sets this cookie cookie to process payments.
__stripe_sidStripe sets this cookie cookie to process payments.
cookielawinfo-checkbox-advertisementSet by the GDPR Cookie Consent plugin, this cookie is used to record the user consent for the cookies in the "Advertisement" category .
cookielawinfo-checkbox-analyticsSet by the GDPR Cookie Consent plugin, this cookie is used to record the user consent for the cookies in the "Analytics" category .
cookielawinfo-checkbox-necessarySet by the GDPR Cookie Consent plugin, this cookie is used to record the user consent for the cookies in the "Necessary" category .
cookielawinfo-checkbox-preferencesThis cookie is set by the GDPR Cookie Consent plugin to check if the user has given consent to use cookies under the "Preferences" category.
CookieLawInfoConsentRecords the default button state of the corresponding category & the status of CCPA. It works only in coordination with the primary cookie.
PHPSESSIDThis cookie is native to PHP applications. The cookie is used to store and identify a users' unique session ID for the purpose of managing user sessions on the website. The cookie is a session cookie and is deleted when all the browser windows are closed.
viewed_cookie_policyThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not a user has consented to the use of cookies. It does not store any personal data.
Analytics
Analytics cookies help us understand how our visitors interact with the website. It helps us understand the number of visitors, where the visitors are coming from, and the pages they navigate. The cookies collect this data and are reported anonymously.
CookieDescription
_gaThis cookie is installed by Google Analytics. The cookie is used to calculate visitor, session, campaign data and keep track of site usage for the site's analytics report. The cookies store information anonymously and assigns a randomly generated number to identify unique visitors.
_ga_BQH8MSKD4MThis cookie is installed by Google Analytics.
_gat_gtagIdentification code of website for tracking visits.
_gidThis cookie is installed by Google Analytics. The cookie is used to store information on how visitors use a website and helps in creating an analytics report of how the website is doing. The data collected including the number visitors, the source where they have come from, and the pages visited in an anonymous form.
_hjAbsoluteSessionInProgressHotjar sets this cookie to detect the first pageview session of a user. This is a True/False flag set by the cookie.
_hjFirstSeenHotjar sets this cookie to identify a new user’s first session. It stores a true/false value, indicating whether it was the first time Hotjar saw this user.
_hjidHotjar cookie. This cookie is set when the customer first lands on a page with the Hotjar script. It is used to persist the random user ID, unique to that site on the browser. This ensures that behavior in subsequent visits to the same site will be attributed to the same user ID.
_hjIncludedInPageviewSampleHotjar sets this cookie to know whether a user is included in the data sampling defined by the site's pageview limit.
_hjIncludedInSampleThis cookie is set to let Hotjar know whether that visitor is included in the sample which is used to generate heatmaps, funnels, recordings, etc.
_hjIncludedInSessionSampleHotjar sets this cookie to know whether a user is included in the data sampling defined by the site's daily session limit.
_hjTLDTestTo determine the most generic cookie path that has to be used instead of the page hostname, Hotjar sets the _hjTLDTest cookie to store different URL substring alternatives until it fails.
CONSENTYouTube sets this cookie via embedded youtube-videos and registers anonymous statistical data.
has_recent_activityThis cookie is used to signal to the code repository website if the user has browsed other website resources during the current session.
tk_aiGathers information for our own first-party analytics tool about how our services are used. A collection of internal metrics for user activity and is used to improve user experience.
tk_lrThis cookie is set by the JetPack plugin on sites using WooCommerce. This is a referral cookie used for analyzing referrer behavior for Jetpack.
tk_orThis cookie is set by the JetPack plugin on sites using WooCommerce. This is a referral cookie used for analyzing referrer behavior for Jetpack.
tk_qsGathers information for our own first-party analytics tool about how our services are used. A collection of internal metrics for user activity and is used to improve user experience.
tk_r3dThe cookie is installed by JetPack. Used for the internal metrics for user activities to improve user experience.
Advertisement
Advertisement cookies help us provide our visitors with relevant ads and marketing campaigns.
CookieDescription
_fbpThis cookie is set by Facebook to deliver advertisements when they are on Facebook or on a digital platform powered by Facebook advertising after visiting this website.
frThe cookie is set by Facebook to show relevant advertisements to the users and measure and improve the advertisements. The cookie also tracks the behavior of the user across the web on sites that have Facebook Pixel or Facebook social plugin.
VISITOR_INFO1_LIVEA cookie set by YouTube to measure bandwidth that determines whether the user gets the new or old player interface.
YSCYSC cookie is set by Youtube and is used to track the views of embedded videos on Youtube pages.
yt-remote-connected-devicesYouTube sets this cookie to store the video preferences of the user using embedded YouTube video.
yt-remote-device-idYouTube sets this cookie to store the video preferences of the user using embedded YouTube video.
Preferences
Preference cookies are used to store user preferences to provide them with content that is customized accordingly. This includes the language of the website or the location of the visitor.
CookieDescription
_gh_sessThis cookie is used to preserve users' states across page requests.
Others
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
CookieDurationDescription
_hjSession_137657130 minutesNo description
_hjSessionUser_13765711 yearNo description
_octo1 yearNo description available.
_zendesk_authenticatedpastNo description
_zendesk_sessionsessionNo description available.
_zendesk_shared_sessionsessionNo description available.
edd_wp_session12 hoursNo description available.
logged_in1 yearNo description available.
m2 yearsNo description available.
Save & Accept