Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Apple Pay button styling for woocommerce

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>
Tags:

3

Answers


  1. 0

    Try adding the following CSS:

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

    Does that provide the desired appearance?

    Login or Signup to reply.
  2. 0

    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;
}
    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search