**Last updated**: 22 April 2025 | [**Change log**](/products/3ds/changelog/)

# React Native integration

Verify your customer's identity simply and seamlessly to minimize fraud. Use our strong customer authentication to benefit from liability shift.

1. [Get started](/products/3ds/react-native/get-started) with our 3DS API by setting your headers and querying the 3DS root resource.
2. Collect [device data](/products/3ds/react-native/device-data) to be sent to the issuer for risk assessment.
3. Submit order and risk data for [authentication](/products/3ds/react-native/authentication). The 3DS flow ends here if no challenge is required (frictionless).
4. Show the issuer [challenge display](/products/3ds/react-native/challenge-verification) and retrieve the authentication details to form part of the payment authorization request.
5. [Test](/products/3ds/testing) the integration on our Try environment using specific values.


## Flows

React Native - Card - 3DS challenge
The issuer requires the customer to prove their identity due to its fraud assessment outcome. Providing more data related to the order/customer reduces challenges.


```mermaid

sequenceDiagram
    participant React Native App
    participant HTML and iframe
    participant Merchant Backend
    participant 3DS API
    participant Issuers
    React Native App-->>Merchant Backend: Pay 
    Merchant Backend->>3DS API: deviceDataInitialization request
    3DS API-->>Merchant Backend: deviceDataInitialization response
    Merchant Backend-->>React Native App: DeviceData - BIN/JWT/URL
    React Native App-->>HTML and iframe: 3DS device data form
    HTML and iframe-->>Issuers: Form POST
    Issuers-->>HTML and iframe: PostMessage: dfReferenceId
    HTML and iframe-->>React Native App: (RNWV)PostMessage: dfReferenceId
    React Native App-->>Merchant Backend: 3DS authentication
    Merchant Backend->>3DS API: Authentication request
    Note right of Merchant Backend: If no `dfReferenceId` (collectionReference) is<br> provided or the issuer doesn't support 3DS2, the<br> flow uses 3DS1 from here (always challenge)
    3DS API-->>Merchant Backend: Authentication response
    Merchant Backend-->>React Native App: Challenge JWT/URL
    React Native App-->>HTML and iframe: 3DS challenge form
    HTML and iframe-->>Issuers: Form POST
    Issuers-->>Merchant Backend: `returnUrl` specified in authentication request
    Note right of Merchant Backend: Once the challenge has been completed you<br> can submit the `challenge.reference` from the<br> authentication response to the verification request
    Merchant Backend->>3DS API: Verification request
    3DS API-->>Merchant Backend: Verification response
    Merchant Backend-->>HTML and iframe: Verification result
    HTML and iframe-->>React Native App: (RNWV)PostMessage: Verification result
    Note right of React Native App: Apply authentication details in payment<br> E.g. eci, authenticationValue etc
```

React Native - 3DS frictionless
The order is considered low risk by the issuer. A challenge is not required.


```mermaid

sequenceDiagram
    participant React Native App
    participant HTML and iframe
    participant Merchant Backend
    participant 3DS API
    participant Issuers
    React Native App-->>Merchant Backend: Pay 
    Merchant Backend->>3DS API: deviceDataInitialization request
    3DS API-->>Merchant Backend: deviceDataInitialization response
    Merchant Backend-->>React Native App: DeviceData - BIN/JWT/URL
    React Native App-->>HTML and iframe: 3DS device data form
    HTML and iframe-->>Issuers: Form POST
    Issuers-->>HTML and iframe: PostMessage: dfReferenceId
    HTML and iframe-->>React Native App: (RNWV)PostMessage: dfReferenceId
    React Native App-->>Merchant Backend: 3DS authentication
    Merchant Backend->>3DS API: Authentication request
    Note right of Merchant Backend: If no `dfReferenceId` (collectionReference) is<br> provided or the issuer doesn't support 3DS2, the<br> flow uses 3DS1 from here (always challenge)
    3DS API-->>Merchant Backend: Authentication response
    Merchant Backend-->>HTML and iframe: Verification result
    HTML and iframe-->>React Native App: (RNWV)PostMessage: Verification result
    Note right of React Native App: Apply authentication details in payment<br> E.g. eci, authenticationValue etc
```

**Next steps**

[Get started](/products/3ds/react-native/get-started)