Tipsi-stripe: createSourceWithParams - threeDSecure Android Source not fires

[fabicsp]

Before I have submitted the issue

[x] I have read an installation guide
[x] I know that for an iOS I need to install pods because I've read the installation guide
[x] I have read a linking guide and checked that everything is OK like in manual linking guide
[x] I know that before using tipsi-stripe I need to set options for my app as described in usage guide

The problem

I would like to use createSourceWithParams with "threeDSecure" type, and on iOS works fine, but on android when I am returning to the app from browser, there is no promise fires, and have no Source object.

Environment

• tipsi-stripe version: 7.4.0
• iOS or Android: Android
• React-Native version: 0.56.0

For Android, please provide the following sections from android/app/build.gradle:

• android.compileSdkVersion: 26
• android.buildToolsVersion: 26.0.3
• android.defaultConfig.minSdkVersion: 16
• android.defaultConfig.targetSdkVersion: 26

Code To Reproduce Issue (Good To Have)

pay = async (mutation, deal) => {
    let paymentRequest;
    try {
      paymentRequest = await stripe.paymentRequestWithCardForm({
        ...options,
        createCardSource: true
      });
      const threeDSecure = Platform.OS === "android"
        ? paymentRequest.card.three_d_secure
        : paymentRequest.details.three_d_secure;
      if (threeDSecure === "recommended" || threeDSecure === "required") {
        let prefix = Platform.OS === "android"
          ? `my-app://my-app/stripe-redirect`
          : `my-app://stripe-redirect`;
        let secure3dSourceResponse = null;
        try {
          const { dealFeeUSD } = this.state;
          secure3dSourceResponse = await stripe.createSourceWithParams({
            type: "threeDSecure",
            amount: dealFeeUSD || 3000,
            currency: "USD",
            flow: "redirect",
            returnURL: prefix,
            card: paymentRequest.sourceId
          });
         //  iOS works fine at this point
          // When returning from stripe page, the promise should fires here!!!
          console.log('secure3dSourceResponse', secure3dSourceResponse)
        } catch (error) {
          console.log('secure3dSourceResponse', secure3dSourceResponse);
        }
      } else {
        if (paymentRequest && paymentRequest.tokenId) {
          this.handlePayDeal(mutation, deal, paymentRequest.tokenId);
        }
      }
    } catch (error) {
      console.log(`Error is: ${error}`);
    }
  };

[lukebrandonfarrell]

@fabicsp did you solve this issue?

[fabicsp]

Im just showing a toast when the user try to use 3d secure with android: The payment not supports android.
Was investing 1-2 days to find the event listener fault in the lib, but im not a java expert. PR fix wellcome :)

[lukebrandonfarrell]

@fabicsp solved it this morning. You need to use a second scheme on Android if you are already using custom schemes (e.g. deeplinks), for example my.custom.scheme.tipsi, and use the full class name on the activity com.gettipsi.stripe.RedirectUriReceiver. Here is our working code:

<activity android:name="com.gettipsi.stripe.RedirectUriReceiver">
        <intent-filter>
          <action android:name="android.intent.action.VIEW" />
          <category android:name="android.intent.category.DEFAULT" />
          <category android:name="android.intent.category.BROWSABLE" />
          <data android:scheme="my.custom.scheme.tipsi" tools:replace="android:scheme" />
        </intent-filter>
  </activity>

Then in JS we are using com.redu.ashleigh.tipsi://stripe-redirect as the return URL.

[fabicsp]

Thanx a lot

[scaralfred]

Hello @lukebrandonfarrell. May I ask you a couple of questions?
1) When you say " there is no promise fires, and have no Source object." you mean that the process does not even redirect to the app?
2) What did you use as "tipsiStripeRedirectScheme" in your app/build.gradle file?

Cause I'm having a similar issue with Alipay integration. What's happening in my case is that after the alipay payment (made trhough Alipay app) is successful, the process hangs on the browser url "hooks.stripe.com"... forcing the user to rpess the back button to go back to the app... and consequently losing the "source".

[lukebrandonfarrell]

@scaralfred This was a while ago, and I don't have the code in the project to dig up anymore, sorry :/

We've actually just went and build our own Stripe implementation: https://github.com/aspect-apps/react-native-stripe-payments (this library is great, but seems like lots of issues have been pending for ages now)

[scaralfred]

@lukebrandonfarrell Thanks for you answers. Your library is great, it does not support third party payement though (like Alipay in my case).
I understand you no longer have access to the cose, but if you remember (in terms of UX) the answer at question number 1, that would be super useful... but if you dont remember it I would understand too.
Thanks for your help anyway 👍