Apple Pay button styling for woocommerce

Question

I would like to customise the Apple-Pay button that comes with Woocommerce/Stripe. By default the button has a 4px border-radius, which I would like to change to 0px. Additionally the button is within a wrapper and I would like to change its padding-top to 0px. I wonder if this can be amended through CSS? Below is the source HTML code (any hint as to how to progress would be greatly appreciated).

<div id="wc-stripe-payment-request-wrapper" style="clear:both;padding-top:1.5em;display:none;">
    <div id="wc-stripe-payment-request-button" " class="StripeElement">
        <!-- A Stripe Element will be inserted here. -->
    </div>
</div>

See if this helps you: https://www.webtoffee.com/customize-apple-pay-button-woocommerce-stripe/ Good luck! — David Taiaroa, Sep 29 '20 at 18:53
Hello David, I tried the below code on my cart page, and unfortunately it doesn't work for me. .woocommerce-cart button.apple-pay-button {border-radius:0px}. Thanks anyway — Manu, Sep 30 '20 at 11:35
Hi Manu, if you don't have success with other suggestions, can you post a URL where we can see the button? Then it will be easier to identify the CSS selectors you need. Thanks! — David Taiaroa, Oct 01 '20 at 14:30
Hello David, sorry for the late response. For now I had to move on to another task. But when I go back to resolving this issue I will let you know. Kind regards. — Manu, Nov 19 '20 at 12:19

Justin Michael · Answer 1 · 2020-09-30T16:53:51.570

1

Try adding the following CSS:

#wc-stripe-payment-request-button {
  background-color: black;
  border: solid black 1px;
}

Does that provide the desired appearance?

edited Sep 30 '20 at 16:53

answered Sep 29 '20 at 20:30

Justin Michael

5,634
1
29
32

Hello Justin unfortunately it doesn't. It seems that I cannot find the name of the element to which I can apply the CSS code.... Thanks – Manu Sep 30 '20 at 11:37
Oh, I realize I made an error in the CSS above. `.wc-stripe-payment-request-button` should have been `#wc-stripe-payment-request-button`. I've edited the answer; can you try the revised version and see if that works? – Justin Michael Sep 30 '20 at 16:54
Hello Justin sorry for the late reply. I did try it and I couldn't get it to work. For now I have given up, but will get back to this task when I have more time and will let you know if anything relevant comes up. Thanks a lot for your help. – Manu Nov 19 '20 at 12:17

Josh · Answer 2 · 2021-02-10T20:49:06.147

It seems like stripe for Woocommerce loads the payment request buttons through an iframe from js.stripe.com ... unfortunately it is not possible to stylize content in an iframe which comes from a different domain. I read this page on iframe style for reference. #wc-stripe-payment-request-button selector which woocommerce provides is the id to a DIV which contains the iframe (payment request buttons). Find my Pseudo element solution below:

EDIT: Here is what im using.. It has all my styles in it, so adjust them to your liking but it works great. Let me know if you have any questions.

Note: My cart background is white and my payment buttons are set to 60px height dark style in Woocommerce settings. You might possibily need to add media queries to adjust for your theme break points but its fairly responsive out of box. If you do not want the outline with "express checkout" just delete this piece of code "#wc-stripe-payment-request-button::after{CSS styles}".. Thought I would add it incase someone has an interest to "copify" Cheers. Screen shot of the final product

#wc-stripe-payment-request-button-separator {font-size:80%; margin:10px 0px 8px 0px!important;
color:#bababa;
    padding:0px!important;
}
#wc-stripe-payment-request-button{outline: 3px solid #E6E6E6;outline-offset:18px;padding:1px 5px 0px 5px;transform:scale(.8);
}
#wc-stripe-payment-request-button::before {content:'';
width:99%;
    height:66px;
    position:absolute;
    z-index:999;
    bottom:-3px;
left: calc(50% - 49.5%);
    pointer-events: none;
    border:7px solid #fff;
    outline:4px solid #fff;
background:rgb(255,255,255,.6);
}

#wc-stripe-payment-request-button::after {content:'EXPRESS CHECKOUT';position:absolute;
    background:#fff;
    font-size:87%;
    color:#aaaaaa;
    font-family: 'Oswald', sans-serif !important;letter-spacing:.12em;
    display:block;
    left: calc(50% - 82px);
    font-weight:400;
    padding:0px 4px 0px 8px;
margin:-96px 0px 0px 0px;
}

Thank you all for your help/comments and sorry for the late reply on this. @Josh, I tried your code and it works beautifully! Regards Manu — Manu, Mar 21 '21 at 09:35

score 0 · Answer 3 · answered Feb 11 '21 at 08:09

Simple and best styling for apple pay button that is totally adjustable in all layouts(iPhone/MacBook). Its currently running on my website.

Here is the CSS

#applePay {
    width: 100%;
    height: 50px;
    display: none;
    -webkit-appearance: -apple-pay-button;
    -apple-pay-button-style: black;
    -apple-pay-button-type: book;
}

Here is the HTML

 <div id="apple-pay-web">
   <div class="col-xl-12"><label>Pay With ApplePay</label></div>
   <div class="col-xl-12" style="text-align: center;padding: 0">
   <button type="button" id="applePay" lang="en"></button>
   <div id="got_notactive" class="alert alert-primary apw" role="alert"><?= Yii::t("app", 'ApplePay is possible on this browser, but not currently activated') ?></div>
  <div id="notgot" class="alert alert-danger apw" role="alert"><?= Yii::t("app", 'ApplePay is not available on this browser') ?></div>
  <div id="success" class="alert alert-success apw" role="alert"><?= Yii::t("app", 'Test transaction completed, thanks') ?></div>
   </div>
 </div>

Apple Pay button styling for woocommerce

3 Answers3