**Last updated**: 22 April 2025 | [**Change log**](/products/3ds/changelog/) # Challenge display and verification Use the following parameters from the authentication response: - `challenge.reference` - `challenge.url` - `challenge.jwt` The content within the iframe is from the issuing bank. The bank performs an identity check on your customer. #### Optional MD field Pass data specific to your checkout session and it will be echoed back in the `challenge.returnUrl` originally provided in the [authentication request](/products/3ds/react-native/authentication). This could, for example, be a checkout sessionId. Any value provided must be URL encoded with a maximum of 1024 characters. ## Challenge display The challenge display for React Native uses: - a [WebView](https://github.com/react-native-webview/react-native-webview) - a mobile-friendly HTML page - a fullscreen iframe, embedded in the mobile-friendly HTML page, used to display the challenge page to the end user - a secondary HTML page, loaded via the iframe, and used to kickstart the challenge display 1. Install and link the React Native `WebView` component in your application. # 1. Install dependency npm install react-native-webview # 2. Link dependency using your preferred method react-native link react-native-webview # 3. Ee-install pods cd ios pod install 1. Add a WebView in your React Native application with the source pointing to the HTML page created in the next step. React Native 1. Create and host the mobile-friendly HTML page. HTML 1. Add a full screen iframe to the HTML page and set the `src` attribute to the URL of the page that will POST the challenge form. HTML 1. Create and host the secondary HTML page that POSTs the challenge form. HTML In addition, after the challenge is completed, if you wish to relay a message, you have sent by `postMessage()` to your mobile-friendly page, to the React Native layer: 1. Use the following JavaScript in your mobile-friendly page to relay the message to React Native. Javascript 1. Add an event listener for the `message` event on your `WebView`. React Native { // extracting data (string) from the event console.info(event.nativeEvent.data); }} /> ### Test challenge form The form below allows you to submit the 3DS challenge details provided in the API response and display the [issuer challenge](/products/3ds/react-native/challenge-verification). This is useful if using tools such as postman/insomnia to test your integration. Access 3ds - Device Data Collection form ### Full integration example code Dependency # 1. Install dependency npm install react-native-webview # 2. Link dependency using your preferred method react-native link react-native-webview # 3. Ee-install pods cd ios pod install React Native // The onMessage event handler is optional and should be added // only if you wish to relay to the React Native layer // a message you sent by postMessage() to your mobile-friendly page { // extracting data (string) from the event console.info(event.nativeEvent.data); }} /> HTML page 1 HTML page 2 # Verification Once the challenge form has been completed, you must make a verification request to verify the result of the challenge form. POST your verification request to our `3ds:verify` action link received in your authentication response if your outcome is `challenged`. ## Verification example request POST `https://try.access.worldpay-bsh.securedataplatform.com/verifications/customers/3ds/verification` Verification request body: ## Verification responses Best practice Access Worldpay returns a `WP-CorrelationId` in the headers of service responses. We highly recommend you log this. The `WP-CorrelationId` is used by us to examine individual service requests. Here are examples of the verification responses you would receive. To understand what these outcomes mean and how to reproduce them for testing purposes see [3DS testing](/products/3ds/testing). Authenticated Successful authentication following a challenge authenticated { "outcome": "authenticated", "transactionReference": "Memory265-13/08/1876", "acsTransactionId": "fe007a6e-315f-4cdf-98ca-28a9e40e3581", "status": "Y", "enrolled": "Y", "authentication": { "version": "2.1.0", "authenticationValue": "MAAAAAAAAAAAAAAAAAAAAAAAAAA=", "eci": "05", "transactionId": "c5b808e7-1de1-4069" } } authenticated - Cartes Bancaires "transactionReference": "Memory265-13/08/1876", "acsTransactionId": "fe007a6e-315f-4cdf-98ca-28a9e40e3581", "status": "Y", "enrolled": "Y", "authentication": { "version": "2.1.0", "authenticationValue": "AAIBBYNoEwAAACcKhAJkdQAAAAA=", "eci": "05", "transactionId": "1be85590-d6f9-4a0b-93c9-3a7188d9a463", "cryptogramAlgorithm": "1", "challengePreference": "challengeMandated", "authenticationFlow": "challenge", "brand": "cartesBancaires" } } Authentication Failed Issuer failed the authentication following the challenge authenticationFailed { "outcome": "authenticationFailed", "transactionReference": "Memory265-13/08/1876", "acsTransactionId": "fe007a6e-315f-4cdf-98ca-28a9e40e3581", "status": "N", "enrolled": "Y", "authentication": { "version": "2.2.0", "eci": "00", "transactionId": "N+en2I5+ZK/kQqk69wXdI8XIPg8=" }, "_links": { "3ds:authenticate": { "href": "https://try.access.worldpay-bsh.securedataplatform.com/verifications/customers/3ds/authentication" }, "curies": [ { "href": "https://try.access.worldpay-bsh.securedataplatform.com/rels/verifications/customers/3ds/{rel}", "templated": true, "name": "3ds" } ] } } authenticationFailed - Cartes Bancaires "transactionReference": "Memory265-13/08/1876", "acsTransactionId": "fe007a6e-315f-4cdf-98ca-28a9e40e3581", "status": "N", "enrolled": "Y", "authentication": { "version": "2.1.0", "eci": "07", "transactionId": "424c464d-3b04-4101-950a-8a71cd1f9dc6", "cryptogramAlgorithm": "1", "challengePreference": "challengeMandated", "authenticationFlow": "frictionless", "statusReason": "01", "brand": "cartesBancaires" }, "_links": { "3ds:authenticate": { "href": "https://try.access.worldpay-bsh.securedataplatform.com/verifications/customers/3ds/authentication" }, "curies": [ { "href": "https://try.access.worldpay-bsh.securedataplatform.com/rels/verifications/customers/3ds/{rel}", "name": "3ds", "templated": true } ] } } Signature Failed signatureFailed { "outcome": "signatureFailed", "transactionReference": "Memory265-13/08/1876", "authentication": { "version": "1.0.2", "eci": "02" }, "_links": { "3ds:authenticate": { "href": "https://try.access.worldpay-bsh.securedataplatform.com/verifications/customers/3ds/authentication" }, "curies": [ { "href": "https://try.access.worldpay-bsh.securedataplatform.com/rels/verifications/customers/3ds/{rel}", "templated": true, "name": "3ds" } ] } } Unavailable Error/Timeout whilst attempting authentication. unavailable { "outcome": "unavailable", "transactionReference": "Memory265-13/08/1876", "_links": { "3ds:authenticate": { "href": "https://try.access.worldpay-bsh.securedataplatform.com/verifications/customers/3ds/authentication" }, "3ds:verify": { "href": "https://try.access.worldpay-bsh.securedataplatform.com/verifications/customers/3ds/verification" }, "curies": [ { "href": "https://try.access.worldpay-bsh.securedataplatform.com/rels/verifications/customers/3ds/{rel}", "templated": true, "name": "3ds" } ] } } Apply the details (such as `eci`, `version`, `authenticationValue`, `transactionId`) required by [Card Payments](/products/card-payments/) in the [authorization request](/products/card-payments/authorize-a-payment#3ds). See [Testing](/products/3ds/testing) for details. **Next steps** [Take a payment](/products/card-payments/authorize-a-payment#3ds) [Testing](/products/3ds/testing)