Complete Stripe 3D secure 2 authentication workflow in Mobile APP

Question

I am working on a credit card payment workflow using Stripe and have some issues in the 3ds2. I am trying to let Backend handle most of the tasks (manage PaymentMethod, create and confirm PaymentIntent...), and provide APIs for Mobile APP to use.

In the current design, Mobile APP side will generate PaymentMethod based on the card detail input by a user, and call some APIs to send the pm_id to the Backend to attach it to customer (so users don't need to enter their card info every time they make payments). When user want to make a payment they can simply click a button in Mobile APP and Backend will create a PaymentIntent to charge the customer.

In the ideal case, the creation and confirmation of PaymentIntent will be handled by Backend. But now Backend also need to support the 3D authentication, which need the integration from Mobile APP side.

For 3DS1 I think it's quite easy, when the web hook receives the payment_intent.requires_action , Backend can simply send the three_d_secure_redirect link in the API response and direct users to the web page. The PaymentIntent should include this part:

"next_action": {
    "type": "use_stripe_sdk",
    "use_stripe_sdk": {
      "source": "...",
      "stripe_js": "https://hooks.stripe.com/redirect/authenticate/...",
      "type": "three_d_secure_redirect"
    }
  },

But for 3DS2 I am a little bit confused, since I can't really find a clear documentation about how APP side should handle the info in PaymentIntent object, which looks like this:

{
  "next_action": {
    "type": "use_stripe_sdk",
    "use_stripe_sdk": {
      "directory_server_encryption": {
        "algorithm": "RSA",
        "certificate": "...",
        "directory_server_id": "A000000003",
        "root_certificate_authorities": [
          "..."
        ]
      },
      "directory_server_name": "visa",
      "merchant": "...",
      "one_click_authn": null,
      "server_transaction_id": "...",
      "three_d_secure_2_source": "...",
      "three_ds_method_url": "",
      "three_ds_optimizations": "kf",
      "type": "stripe_3ds2_fingerprint"
    }
  }
}

My question is, is there a way that Mobile APP (both Android and IOS) can generate the 3DS2 view from the above info? And what documentation should I refer to. Thanks.

I found some resources (https://www.youtube.com/watch?v=NOceh42ZNEY&t=1s) but most of them are about how let APP side handle most of Payment Process, like creating PaymentIntent. But I want to let the Backend handle most of process, so the APP side doesn't need directly integrate with Stripe, only need to call APIs to process payment.

UPDATED: After researching on https://stripe.com/docs/payments/payment-intents/three-d-secure-import and https://stripe.com/docs/api/payment_intents/object. I think the off-session payment I am using now does not support authentication. And need to switch to on-session payment (https://support.stripe.com/questions/apply-off-session-strong-customer-authentication-(sca)-exemptions-over-time)

Answer 1

The recommended integration path is to let our front-end SDKs, like Stripe.js, handle the 3DS challenge flow for you. However if you wish to manually handle the redirect yourself, you should pass the return_url parameter on Payment Intent creation or confirmation. The response then should include a URL you can redirect to in a payload similar to:

next_action: {
    type: 'redirect_to_url',
    redirect_to_url: {
      url: 'https://hooks.stripe.com/...',
      return_url: 'https://yoursite.com'
    }
}

Answer 2

I believe if you use built in PaymentSheet most of the heavy lifting is done for you by the SDK.

iOS: https://stripe.com/docs/payments/accept-a-payment?platform=ios&ui=payment-sheet Android: https://stripe.com/docs/payments/accept-a-payment?platform=android&ui=payment-sheet

However, you will still have to setup your backend and have web hooks to listen to status of the transaction for post processing.