stripe-react-native icon indicating copy to clipboard operation
stripe-react-native copied to clipboard

Published 20 hours ago • verified publisher icon stripe

Border radius breaks primary button in payment sheet

Open dan-avg opened this issue 1 year ago • 2 comments
trafficstars

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 SCR-20240918-nuh

Smartphone (please complete the following information):

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

dan-avg avatar Sep 18 '24 15:09 dan-avg