How change border-radius in apple-pay buttom (Safari)

Question

By default apple-pay button border-radius 5px/ I need set it 15px. How I can chage this property? When I set

border-radius: 15px;
to class .apple-pay-button, button doesnt change

There are code example:

@supports (-webkit-appearance: -apple-pay-button) { 
    .apple-pay-button {
        display: inline-block;
        -webkit-appearance: -apple-pay-button;
    }
    .apple-pay-button-black {
        -apple-pay-button-style: black;
    }
    .apple-pay-button-white {
        -apple-pay-button-style: white;
    }
    
    .apple-pay-button-white-with-line {
        -apple-pay-button-style: white-outline;
    }
}
@supports not (-webkit-appearance: -apple-pay-button) {
    .apple-pay-button {
        display: inline-block;
        background-size: 100% 60%;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        border-radius: 5px;
        padding: 0px;
        box-sizing: border-box;
        min-width: 200px;
        min-height: 32px;
        max-height: 64px;
    }
    .apple-pay-button-black {
        background-image: -webkit-named-image(apple-pay-logo-white);
        background-color: black;
    }
    .apple-pay-button-white {
        background-image: -webkit-named-image(apple-pay-logo-black);
        background-color: white;
    }
    .apple-pay-button-white-with-line {
        background-image: -webkit-named-image(apple-pay-logo-black);
        background-color: white;
        border: .5px solid black;
    } 
}

<div class="apple-pay-button apple-pay-button-white"></div>

There are code official documentation from Apple https://developer.apple.com/documentation/apple_pay_on_the_web/displaying_apple_pay_buttons

Thank you

If you tried start this code from not Mac or IOS os it doesn't will work — Yevhenii, Sep 16 '19 at 13:35
https://codepen.io/invisiblecomma/pen/YaOQyp Codepen example — Yevhenii, Sep 16 '19 at 13:38
One of the way solve this issue, it using parrent component and set it needed border-radius and size like in apple button. But I wonk to know, if there any else way to style this button — Yevhenii, Sep 16 '19 at 13:42

SimonAndGarfunkel · Answer 1 · 2020-02-14T04:38:16.443

What worked for me was adding a background color to the button's css. In my case, I was using the black button style.

Tested on iOS 13.3.1

@supports (-webkit-appearance: -apple-pay-button) { 
    button.apple-pay-button {
        display: inline-block;
        -webkit-appearance: -apple-pay-button;
        background: #000;
        border-radius: 20px;
    }
    .apple-pay-button-black {
        -apple-pay-button-style: black;
    }
}

Kind Regards,

How change border-radius in apple-pay buttom (Safari)

1 Answers1