stripe-react-native: confirmSetupIntent not working as expected

Describe the bug

Currently when I try to call confirmSetupIntent I get the following error:

{
  "stripeErrorCode": null,
  "declineCode": null,
  "localizedMessage": "Card details not complete",
  "message": "Card details not complete",
  "type": null,
  "code": "Failed"
}

Card details are always complete

To Reproduce Steps to reproduce the behavior:

This is my current code for the component

    <StripeProvider publishableKey="my test key">
      <CardField
        postalCodeEnabled={true}
        placeholder={{
          number: '4242 4242 4242 4242',
          expiration: '10/24',
          cvc: '123',
          postalCode: 'C.P.',
        }}
        cardStyle={{
          backgroundColor: '#FFFFFF',
          textColor: '#000000',
          borderWidth: 1,
          borderColor: COLOR.gray_100,
        }}
        style={{
          width: '100%',
          height: 50,
          marginVertical: SIZES.MD,
          borderRadius: SIZES.MD,
          ...STYLE_SHADOW,
        }}
        onCardChange={inputCard => {
          setCardDetails(inputCard);
        }}
        onFocus={focusedField => {
          setInputField(
            focusedField ? INPUT_FIELD[focusedField.toString()] : '',
          );
        }}
      />
      <Text>{inputField}</Text>
      <Button
        disabled={!cardDetails?.complete}
        onPress={submit}
        style={{
          marginTop: SIZES.MD,
          borderRadius: SIZES.MD,
          ...STYLE_SHADOW,
        }}>
        Guardar
      </Button>
    </StripeProvider>

And this is the submit function

  const submit = async () => {
    setLoading(true);
    try {
      await createOrUpdateClient();
      await updateProfile({
        variables: {
          input: {
            card: {
              last_digits: cardDetails?.last4,
              expiry_date: `${cardDetails?.expiryMonth}/${cardDetails?.expiryYear}`,
            },
          },
        },
      });
      const setupIntentResponse = await createSetupIntent();
      const billingDetails: PaymentMethods.BillingDetails = {
        email,
      };
      const { setupIntent, error } = await confirmSetupIntent(
        setupIntentResponse.data?.stripeSetUpIntent?.client_secret as string,
        {
          type: 'Card',
          billingDetails,
        },
      );
      console.log('LOG: error ', JSON.stringify(error, null, 2));
      console.log('LOG: setupIntent ', JSON.stringify(setupIntent, null, 2));
      if (error) {
        throw error;
      }
      Navigation.pop(componentId);
    } catch (error) {}
    setLoading(false);
  };

client_secret is always defined, so no issue there.

Expected behavior

The card is saved for future payments.

I debugged the issue directly on android studio and xcode, so I found that the native card manager is always null when it gets to the confirmSetupIntent native method on both platforms. I’m attaching the evidence from xcode.

Screenshots

Captura de Pantalla 2021-06-24 a la(s) 20 55 41

Desktop (please complete the following information):

OS: MacOS big sur (M1)

Smartphone (please complete the following information):

Device: I used the iOS simulator, the android emulator, an iPhone 11 and a moto g5 plus
OS: iOS 14, android 11

Additional context

Please, don’t close this issue until you can help, this is becoming a huge block for our company.

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 4
Comments: 28 (3 by maintainers)

Most upvoted comments

Background

We are in the process of migrating from tipsi-stripe to official react native library now due to Google Play Store not allowing anymore the version of stripe used by tipsi.

When migrating code, we have followed these steps:

When creating a new payment method (user adds a new card), we open a modal screen to capture payment method. We have replaced tipsi payment form with our own screen, and we are using CardField component. This screen calls stripe.createToken and returns the tokenId in a callback function.
From our checkout screen (totally different from the modal we use to capture a new card), and after user has assigned some payment method card, either by adding a new card (we work here with token), or by selecting from saved cards retrieved from our API (we work with paymentMethodId in this case), we make a call to confirmSetupIntent, passing as parameters either the token or paymentMethodId (by the time we make this call there is no UI related to stripe on screen).

Note: ConfirmSetupIntent.Param spec doesn’t consider any card parameter except for type.

Issues found

After calling confirmSetupintent, we are getting these errors:

On iOS, we get error Card details not complete when passing paymentMethodId instead of token.
On Android, app is crashing in both scenarios.

iOS investigation

When inspecting what happens under the hood when calling confirmSetupIntent on iOS, we can see that StripeSdk.swift#confirmSetupIntent is not handling paymentMethodId parameter, so because by the time this is called there is no cardFieldView and no token param is passed, error PaymentMethodError.cardPaymentMissingParams is resolved.

Android investigation

When inspecting what happens under the hood when calling confirmSetupIntent on Android, we can see that StripeSdkModule#confirmSetupIntent is not handling token or paymentMethodId parameters, so because by the time this is called there is no instance, and this causes cardParams to be null, app is throwing an exception when trying to create card params, and trying to use card!!

Conclusion

When using tipsi-stripe, they are under the hood calling stripe API V1 manually, and they handle passing paymentMethodId to POST v1/setup_intents/:id/confirm, but when replacing it with this library, paymentMethodId is ignored and not passed correctly. On top of that, Android is not handling correctly passing a token parameter.

idcuesta on Jul 5, 2021

@thorsten-stripe @arekkubaczkowski any chance you are looking into this issue? It seems a lot of people is facing the same problem, and I already give you guys steps to reproduce the error.

My company is close to launching our apps and we heavily depend on this, so this is becoming a major blocking for us.

We can get into a call and I can give you details if that helps.

We really need this to get fixed 😢

fdelacruzsoto on Jul 8, 2021

We think that this issue is related with other reported issue but we are still trying to find a solution, you can track the progress here: https://github.com/stripe/stripe-react-native/issues/391

arekkubaczkowski on Jul 20, 2021

@fdelacruzsoto can you please try https://github.com/stripe/stripe-react-native/issues/371#issuecomment-877764806

@jheslop25

From our reading of the docs it seems like confirming the payment intent server side is not going to work with 3Dsecure.

When you already have a payment method ID you should create the PaymentIntent with said method and confirm:true and only call confirmPayment on the client if needed. That way you minimize the amount of API calls needed. See the docs: https://stripe.com/docs/payments/save-and-reuse?platform=react-native#react-native-create-payment-intent-off-session

thorsten-stripe on Jul 12, 2021

@prox2 I have just created a PR with the fixes we did to get our flows working.

idcuesta on Jul 6, 2021

so how to over come this issue? @idcuesta

prox2 on Jul 5, 2021

OKAY, so finally worked for me and what i did was the following: I have changed the page extension to type script (tsx) instead of javascript(js) i have specified the type of billing billingDetails same as stated in example which to be something like:

 const billingDetails: PaymentMethodCreateParams.BillingDetails = {
            email: email,
        };

and after success result or fail must re-render to call initiate stripe again or will throw an error in case for example first attempt for adding the card failed, which i think is an issue related to stripe provider.

this may consider as temporary workaround the issue

prox2 on Jul 5, 2021

@arekkubaczkowski the current configuration for the project is a bit complex but I can give you some steps of what I did to get to the screen with the card component.

Install wix react native navigation.
Set up the bottom tabs navigation pattern with at least two screens.
In one of those screens, use the push screen method to open a screen that will display the card component.
Create the client if it doesn’t exist.
Get the client secret.
Hit button to confirmSetup.

As soon as the user hits the button the screen for some reason calls the ondestroy method that removes the reference to the card view and all the details are lost, which prompts the missing details error on the confirm setup call. The card component with all the data is still there and I can continue changing its data, so I’m 100% the screen was not destroyed.

The PR you rejected did actually fix the issue in both platforms.

fdelacruzsoto on Jul 2, 2021