Customise applepay button

  • Resolved cookney

    (@cookney)


    6 years, 3 months ago

    how can we make the Apple Pay and google pay buttons have rounded corners like our other payment buttons on the website – they stand out and look weird

    in Apple Pay docs says you can have rounded corners, but CSS overrides don’t do anything..

    need them to have 50% radius so is like a “pill” button.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Clayton R

    (@mrclayton)

    6 years, 3 months ago

    @cookney,

    The following CSS will work for the GPay button:

    ul.wc-braintree-product-gateways li.wc-braintree-product-gateway button{
	border-radius: 20px;
}

ul.wc_braintree_cart_gateways li.wc_braintree_cart_gateway button{
	border-radius: 20px;
}

    Add the following CSS for the Apple Pay button. This is assuming you are using the black button style:

    @supports (-webkit-appearance: -apple-pay-button) { 
    button.apple-pay-button {
        display: inline-block;
	-webkit-appearance: -apple-pay-button;
	background: #000;
    }
}

    Kind Regards,

    • This reply was modified 6 years, 3 months ago by Clayton R.
    Plugin Author Clayton R

    (@mrclayton)

    6 years, 3 months ago

    @cookney,

    Forgot to include css for checkout page. This will also work for product pages and cart page:

    .gpay-button{
	border-radius: 20px !important;
}
Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Customise applepay button’ is closed to new replies.