Border radius breaks primary button in payment sheet

[dan-avg]

Describe the bug
When customizing the payment sheet with the "appearance" property, and you add a large border radius for the "primary button", you get a really extreme border radius. If you set a really large value the whole button disappears.

It seems to me that it happens when you set a border radius larger than half the buttons height.

This is only happening on iOS, not on Android

To Reproduce
Steps to reproduce the behavior:

1. Call initPaymentSheet
2. Provide the appearance property and set primaryButton.shapes.borderRadius to something like "99"
3. See the button in the payment sheet looking broken

Expected behavior
I expect the border radius to work as all other places in React Native. Giving a huge border radius (like 99999) should apply a radius that rounds of the corners to a circle, not anything beyond that.

Screenshots

Smartphone (please complete the following information):

• Device: iPhone 15
• OS: iOS
• Version: 0.38.6

[marwa-tarek]

@dan-avg where you able to fix this?

[dan-avg]

Not in a good way... But I ended up setting an exact border radius for iOS (22 in my case).

shapes: { borderRadius: Platform.OS === 'ios' ? 22 : 9999, },

I just changed it until I ended up with something that looked okay