expo-payments-stripe - 3D Secure payment

[burdgezilla]

Please provide the following:

1. SDK Version: “expo”: “~38.0.9”, “expo-payments-stripe”: “^8.3.0”,
2. Platforms(Android/iOS/web/all): Android & IOS

Does “expo-payments-stripe” handle 3D secure payments?
I’m not 100% clued up on how to handle stripe payments yet but I know that I want to be able to handle 3D secure payments e.g. when a bank requires the user to confirm payment before it gets processed.

Would this be achieved via ‘createSourceWithParamsAsync’?

[burdgezilla]

After some experimenting with createSourceWithParamsAsync I was able to get to a create a card and have the bank “authorize” it after which it links back to the app e.g. myapp://
however the createSourceWithParamsAsync never fires and I am unable to get the result data.

      type: 'threeDSecure',
      amount: 500,
      currency: 'usd',
      returnURL: 'furiousgana://stripe-redirect',
      card:token.card.cardId
    };

    const source = await Stripe.createSourceWithParamsAsync(source_params); <-- Authorizes card

    console.log(source) <-- Never fires :(

[burdgezilla]

Working solution for reference.

AndroidManifist.xml

<activity
        android:exported="true"
        android:launchMode="singleTask"
        android:name="expo.modules.payments.stripe.RedirectUriReceiver"
        android:theme="@android:style/Theme.Translucent.NoTitleBar.Fullscreen">
      <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="myapp" />
      </intent-filter>
    </activity>

app.js

componentDidMount() {
    Stripe.setOptionsAsync({
      publishableKey: 'pk_______________________', // Your key
      androidPayMode: 'test', // [optional] used to set wallet environment (AndroidPay)
      merchantId: 'your_merchant_id', // [optional] used for payments with ApplePay
    });
  }

pay_with_stripe = async () => {
    const card_params = {
      // mandatory
      number: '4000002760003184',
      expMonth: 11,
      expYear: 22,
      cvc: '223',
      // optional
      name: 'Test User',
      currency: 'usd',
      addressLine1: '123 Test Street',
      addressLine2: 'Apt. 5',
      addressCity: 'Test City',
      addressState: 'Test State',
      addressCountry: 'Test Country',
      addressZip: '55555',
    };

    const token:any = await Stripe.createTokenWithCardAsync(card_params);

    console.log(token.card.cardId)

    const source_params:any = {
      type: 'threeDSecure',
      amount: 500,
      currency: 'usd',
      returnURL: 'myapp://stripe-redirect',
      card:token.card.cardId
    };

    const source = await Stripe.createSourceWithParamsAsync(source_params);

    console.log(source)

    console.log('Fired! :) ')

  }

[adamjnav]

Thanks for sharing your debugging journey and solution with the community, @burdgezilla. We always appreciate it when community members help spread their knowledge and experiences.