wojtekpanek_unexpected

[rancid patrol]

👋 Welcome to your new thread!

⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question. Thank you for your patience!

⏱️ We automatically close idle threads, which makes them read-only. Make sure you stick around to chat in realtime! If this thread is closed and you have another question you'll need to start a new thread.

🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1213110942129201164

📝 Have more to share? You can add more detail below, including code, screenshots, videos, etc.

[inner horizon]

Could you please share the appearance object you are using ?

[scenic crest]

{
    "variables": {
        "fontFamily": "\"Suisse Intl\", sans-serif",
        "colorPrimary": "#F9F8FF",
        "colorBackground": "#05040F",
        "colorText": "#F9F8FF",
        "colorTextSecondary": "#F9F8FF",
        "colorTextPlaceholder": "#807f88",
        "colorDanger": "#e12020",
        "borderRadius": "16px",
        "accordionItemSpacing": "12px",
        "gridColumnSpacing": "16px",
        "gridRowSpacing": "16px"
    },
    "rules": {
        ".Label": {
            "fontSize": "0",
            "marginBottom": "0",
            "lineHeight": "0"
        },
        ".AccordionItem": {
            "fontSize": "16px",
            "fontWeight": "400",
            "lineHeight": "24px",
            "padding": "15px",
            "borderColor": "#36353f"
        },
        ".AccordionItem:hover": {
            "borderColor": "#F9F8FF"
        },
        ".AccordionItem--selected": {
            "borderColor": "#632CFF",
            "borderWidth": "2px"
        },
        ".AccordionItem--selected:hover": {
            "borderColor": "#632CFF"
        },
        ".Input": {
            "borderRadius": "16px",
            "backgroundColor": "#1d1c27",
            "borderColor": "transparent",
            "fontSize": "16px",
            "lineHeight": "24px",
            "padding": "14px 16px",
            "boxShadow": "none"
        },
        ".Input:focus": {
            "boxShadow": "none",
            "borderColor": "#807f88"
        },
        ".Input--invalid": {
            "borderWidth": "1px",
            "boxShadow": "none"
        },
        ".Input--invalid:focus": {
            "borderColor": "#e12020"
        },
        ".Error": {
            "padding": "4px 7px",
            "marginTop": "4px",
            "fontSize": "14px",
            "lineHeight": "20px",
            "color": "#fff",
            "backgroundColor": "#e12020",
            "borderRadius": "16px"
        }
    }
}

[inner horizon]

Thanks for sharing, checking...

I think the issue with Apple Pay button is that by default there is a border radius already set

For example

[scenic crest]

I'm not sure if that's true, setting borderRadius to 0 make it work on Safari as expected:

it's very weird, it start's breaking after value bigger than 15px

[inner horizon]

Yes true, for some reason the Apple Pay button's borderRadius is taking twice the value given 🤔

[scenic crest]

it may be Safari bug and implementation of -webkit-appearance: -apple-pay-button

but I'm courious if it's something you can escalate or try to fix on your end

[inner horizon]

This issue will require an in-depth investigation from our team in order to figure out the root cause. Can we ask that you write in to us via https://support.stripe.com/contact, providing as much detail and context as possible (you can also reference this thread).
Also, you can check the 'developer' box when writing in it will come straight to our team.