Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug] [Android] CardField onCardChange not triggering in React Native Stripe #1812

Open
RohanRajGautam opened this issue Jan 20, 2025 · 4 comments · May be fixed by #1820
Open

[Bug] [Android] CardField onCardChange not triggering in React Native Stripe #1812

RohanRajGautam opened this issue Jan 20, 2025 · 4 comments · May be fixed by #1820

Comments

@RohanRajGautam
Copy link

RohanRajGautam commented Jan 20, 2025

Describe the bug
The CardField component's onCardChange callback is not triggering when entering card details. No values are being received in the callback function, making it impossible to capture and validate card information.

To Reproduce
Steps to reproduce the behavior:

  1. Initialize Stripe in your React Native app
  2. Implement CardField component with onCardChange handler
  3. Run the app and navigate to the credit card input screen
  4. Try entering card details in the field
  5. Check console logs - no output is shown
  6. Check card state - remains null

Code example:

<CardField
postalCodeEnabled={false}
placeholders={{
number: '1234 1234 1234 1234',
}}
cardStyle={{
backgroundColor: '#FFFFFF',
textColor: '#000000',
}}
style={{
height: 50,
width: '100%',
}}
onCardChange={(cardDetails) => {
console.log('Card Details:', cardDetails);
setCard(cardDetails.complete ? cardDetails : null);
}}
/>

Screenshot

Image

Expected behavior

  • onCardChange callback should fire whenever user enters or modifies card details
  • Callback should receive CardFieldInput.Details object containing card information
  • Console should show logged card details
  • Card state should update when details are complete

Smartphone (please complete the following information):

  • Device: Android
  • React Native Version: 0.76.1
  • @stripe/stripe-react-native Version: [^0.39.0]

Additional context

  • Component renders correctly and is visible
  • No error messages in console
  • Other Stripe components working as expected
  • Stripe initialization is successful
  • Issue occurs on Android only

Possible Workarounds Needed
Looking for either:

  1. Correct implementation of CardField with working onCardChange
  2. Alternative method to capture card details
  3. Any known workarounds for this issue
@glopez-askit
Copy link

Same issue, the new architecture is being a huge problem for this library.

@kaushil111
Copy link

Same!

@Noesersi
Copy link

Same, is anyone trying to implement payment element instead?

@kaushil111
Copy link

Here is a patch that works with fabric enabled app on Android:

@stripe-stripe-react-native-npm-0.41.0-7a76d4dacd.patch

It also includes the patch for #1732 with slight modifications. Here is the reference:
#1732 (comment)

kaushil111 pushed a commit to kaushil111/stripe-react-native that referenced this issue Jan 27, 2025
…t Native Stripe

- Updated CardChangedEvent and CardFocusEvent to conform to the Fabric protocol
- Updates the dispatcher in CardFieldView to Fabric compatible code
- Checks the id of the view before dispatching the events in a case where the event is fired before the render is complete, thereby causing the id to be -1. This also leads to the following error
> Maximum call stack size exceeded (native stack depth) No stack
kaushil111 added a commit to kaushil111/stripe-react-native that referenced this issue Jan 31, 2025
…ct Native Stripe

- Updated CardChangedEvent and CardFocusEvent to conform to the Fabric protocol
- Updates the dispatcher in CardFieldView to Fabric compatible code
- Checks the id of the view before dispatching the events in a case where the event is fired before the render is complete, thereby causing the id to be -1. This also leads to the following error
>  Maximum call stack size exceeded (native stack depth) No stack
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
4 participants