stripe-react-native
stripe-react-native copied to clipboard
In a customFlow payment flow, the selected payment option image is always blank or a placeholder
Describe the bug
On iOS and Android, starting from 0.36.0, in a payment flow with customFlow: true, the return payload of presentPaymentSheet().paymentOption.image is either a placeholder or a blank image instead of being the corresponding card's brand's icon.
To Reproduce
- To make it easier to identify the issue I have created a repository from my reproducible example : https://github.com/mgouault/expo-test-stripe, it just needs a publishableKey and a paymentIntentClientSecret to work.
- Otherwise, steps to reproduce the behavior:
- Start from a boilerplate of "create-expo-app" in bare workflow with "@stripe/[email protected]"
- Build and run on iOS
- Setup a two-step payment flow (aka customFlow) using
<StripeProvider>,useStripe(),initPaymentSheet(), andpresentPaymentSheet(). - Call
initPaymentSheetwithcustomFlow: truethen usepresentPaymentSheet() - The payment sheet opens, add a simple Visa test card (4242 4242 4242 4242 03/99 999), then tap "Continue"
- The return of presentPaymentSheet() contains "paymentOption" but "paymentOption.image" is a placeholder instead of being the Visa icon
- On Android the image is not a placeholder but a blank rectangle (instead of being the Visa icon).
Expected behavior The return payload of presentPaymentSheet() "paymentOption.image" should be a base64 image of the corresponding card brand icon.
Screenshots
| screenshot 1 | screenshot 2 |
|---|---|
Desktop :
- OS: macOS Sonoma 14.4.1
Smartphone :
- Device: iPhone 15 Pro
- OS: iOS 17.0.1
Additional context The bug was not present on the version 0.35.0 but present in the version 0.36.0 and 0.37.3. It happens on all Stripe test cards no matter the brand.