Card details not complete when using confirmPayment

Describe the bug After navigating through my app and entering the payment screen, my payments always fails with the message Card details not complete, which is exactly the same error that these other issues were reporting: #350, #371 and #502. This error was supposed to be fixed after the release of v0.2.0, but it is the same for me even after upgrading the library. The error occured to every device that I have used for tests, both Android and iOS.

To Reproduce Follow the steps: Accepting a Payment.

Expected behavior The payment should be confirmed and show up in Stripe Dashboard.

Additional context This seems to be related to how the CardField is being deallocated by the CardViewManager, since applying the #379 changes fixed the error for me, but it was rejected since it might cause unexpected behavior.

[ingowonner]

We had the same issue and found a solution which is working for us. The strange thing was in the beginning everything went like it should an no error was thrown. At some point we were getting the Card details not complete even though the CardField onCardChange event responding with complete: true. 🤯

To fix this we needed to make sure that the CardField component has rendered when Stripe is initializing (If it is rendered conditionally, e.g. after some loading has finished … it wont work). To achieve this we ditched the StripeProvider, switched to initStripe() and placed it in the same component in which CardField is used. Should look something like this:

const Payment = () => {
  // Init Stripe
  useEffect(() => {
    async function initialize() {
      await initStripe({
        publishableKey: PUBLIC_KEY,
      });
    }
    initialize().catch(console.error);
  }, []);

  return (
    <View>
      <CardField
        postalCodeEnabled={false}
        onCardChange={(cardDetails: CardFieldInput.Details) => {
          setCardDataComplete(cardDetails.complete);
        }}
     />
   </View>
  );
}

And voila it’s working again!! 🥳

Edit: Almost forgot the mention the versions we use

"expo": "^42.0.0",
"@react-navigation/native": "^5.9.4",
"@stripe/stripe-react-native": "0.1.4",

[NorthBlue333]

Hi @alexsegura Happens to me too, using Expo SDK 44 and Stripe SDK 0.2.3.