{"templateId":"markdown","versions":[{"version":"20240601","label":"2024-06-01 (Latest)","link":"/products/payments/enable-features/3ds-authentication/integrated-3ds/react-native","default":true,"active":true,"folderId":"15ab58d6"}],"sharedDataIds":{"sidebar":"sidebar-products/payments/sidebars.yaml","current-catalog-info":"current-catalog-info-/products/payments/openapi","oas-products/payments/@20240601/openapi.yaml":"oas-products/payments/@20240601/openapi.yaml"},"props":{"metadata":{"markdoc":{"tagList":["partial","tabs","tab","openapi-code-sample","admonition","cards","card","code-snippet"]},"custom_product":"Payments","type":"markdown"},"seo":{"title":"React Native","description":"Worldpay for Developers - docs, code examples, resources and tools. Everything you need to build your omnichannel payment solution.","siteUrl":"https://docs.worldpay.com/access","image":"/access/assets/worldpay-logo-light.21b7daf79984773a9fcd7d4fbcb07ae5289dfffd6023c4c3dca720c7058e53dc.33f780a6.svg","keywords":"documentation, api, openapi, sdks, developer, payments, json, payouts, 3ds","jsonLd":{"@context":"https://schema.org","@type":"Organization","url":"https://docs.worldpay.com/access","name":"Worldpay"},"meta":[{"name":"google-site-verification","content":"zjziIKaP3ImsqsfhYnEBnq1R85UabiSwl7HTXuwtZuo"},{"name":"doc_product","content":"Access"},{"name":"doc_category","content":"Documentation"}],"llmstxt":{"hide":false,"sections":[{"title":"Payments API","description":"Payment orchestration API combining fraud assessment, 3ds authentication, SCA exemptions, Worldpay Token creation and a card or wallet based payment.","includeFiles":["products/payments/@20240601/**/*"],"excludeFiles":[]},{"title":"Payment Queries API","description":"Querying your payments data, based on a variety of parameters.","includeFiles":["products/payment-queries/@v1/**/*"],"excludeFiles":[]},{"title":"Card BIN Data API","description":"Provides detailed information about a card.","includeFiles":["products/card-bin/@v1/**/*"],"excludeFiles":[]},{"title":"3DS Authentication API","description":"Request 3DS authentication to protect against fraud, be SCA compliant and to shift liability using this standalone API.","includeFiles":["products/3ds/@v3/**/*"],"excludeFiles":[]},{"title":"FraudSight API","description":"Request a risk assessment and receive a response with an outcome (e.g. lowRisk) using this standalone API.","includeFiles":["products/fraudsight/@v1/**/*"],"excludeFiles":[]},{"title":"Checkout SDK","description":"Integrate using our clientside SDKs for both web and native devices. Benefit from SAQ-A/PCI-SSF compliance.","includeFiles":["products/checkout/web/@v2/**/*","products/checkout/ios/@v4/**/*","products/checkout/android/@v4/**/*","products/checkout/react-native/@v3/**/*","products/checkout/flutter/@v1/**/*"],"excludeFiles":[]},{"title":"Tokens API","description":"Minimizes the exposure of sensitive card details and increases the security of your customer's card details.","includeFiles":["products/tokens/@v3/**/*"],"excludeFiles":[]},{"title":"Card Payments API","description":"Request a card payment using this standalone API, requires separate requests for 3DS, Fraud assessment etc.","includeFiles":["products/card-payments/@v7/**/*"],"excludeFiles":[]},{"title":"Card Verifications API","description":"Verify your customer's card to maximize your authentication rates.","includeFiles":["products/card-verifications/@v6/**/*"],"excludeFiles":[]},{"title":"Account Payouts API","description":"Send funds to your customer's bank accounts and search for payouts using parameters.","includeFiles":["products/account-payouts/@20250101/**/*"],"excludeFiles":[]},{"title":"APMs","description":"Pay using eWallets, bank transfers, direct debits, local card schemes, Postpay and eInvoice/ Buy Now Pay Later.","includeFiles":["products/apms/@20240701/**/*"],"excludeFiles":[]},{"title":"Balance API","description":"Request your account details for a single account or all accounts under an entity.","includeFiles":["products/balance/@20250101/**/*"],"excludeFiles":[]},{"title":"Card Payouts API","description":"Send funds to your customer's cards.","includeFiles":["products/card-payouts/@v4/**/*"],"excludeFiles":[]},{"title":"Events (Webhooks)","description":"Receive status updates from Access Worldpay by setting up a webhook.","includeFiles":["products/events/@v1/**/*"],"excludeFiles":[]},{"title":"FX API","description":"Manage Foreign Exchange (FX) on your payments.","includeFiles":["products/fx/@v1/**/*"],"excludeFiles":[]},{"title":"Hosted Payment Pages (HPP) API","description":"Our low-code option to take payments securely at the lowest PCI compliance level - SAQ A.","includeFiles":["products/hosted-payment-pages/@v1/**/*"],"excludeFiles":[]},{"title":"Money Transfers API","description":"Money Transfer OCTs (Original Credit Transaction) allow funds to be pushed to an eligible card in 30 minutes or less.","includeFiles":["products/money-transfers/@v1/**/*"],"excludeFiles":[]},{"title":"Parties API","description":"Create parties, manage your payout instruments and beneficial owners and carry out identity verification checks.","includeFiles":["products/parties/@20250101/**/*"],"excludeFiles":[]},{"title":"SCA Exemptions API","description":"Maximize a frictionless checkout experience by using issuer data insights to apply exemptions.","includeFiles":["products/sca-exemptions/@v1/**/*"],"excludeFiles":[]},{"title":"Split Payments API","description":"Divide funds from a single payment amongst yourself and your parties/sellers.","includeFiles":["products/split-payments/@20250625/**/*"],"excludeFiles":[]},{"title":"Statements API","description":"Retrieve your account statement and see individual entries for all credits and debits.","includeFiles":["products/statements/@20250101/**/*"],"excludeFiles":[]},{"title":"Transfers API","description":"Transfer funds from source account to target account.","includeFiles":["products/transfers/@20250101/**/*"],"excludeFiles":[]},{"title":"Verified Tokens API","description":"Verified Tokens ensures that your customer's payment details are valid and CIT compliant when creating a token.","includeFiles":["products/verified-tokens/@v3/**/*"],"excludeFiles":[]}],"excludeFiles":[]}},"dynamicMarkdocComponents":["openapi"],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Last updated"]},": 16 June 2026 | ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/products/payments/changelog/"},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Change log"]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"react-native","__idx":0},"children":["React Native"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"1-add-the-threeds-object","__idx":1},"children":["1. Add the threeDS object"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Adding the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["threeDS"]}," object to your payment request will enable 3DS."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If 3DS authentication is not available/applicable (e.g. subsequent recurring (MIT), Apple Pay) a validation error message will be returned."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"Recommended","disable":false},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Recommended key:values for high authentication rates"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JSON","header":{"controls":{"copy":{}}},"source":"\"instruction\": {\n  ....\n  \"threeDS\": {\n    \"type\": \"integrated\",\n    \"mode\": \"always\",\n    \"challenge\": {\n      \"returnUrl\": \"http://payment.example.com\",\n    },\n    \"deviceData\": {\n      \"acceptHeader\": \"text/html\",\n      \"userAgentHeader\": \"Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:47.0)\",\n      \"browserLanguage\": \"en-GB\",\n      \"browserScreenHeight\": 1200,\n      \"browserScreenWidth\": 900,\n      \"browserJavaEnabled\": true,\n      \"browserColorDepth\": \"32\",\n      \"timeZone\": \"300\",\n      \"browserJavascriptEnabled\": true,\n      \"channel\": \"browser\"\n    }\n  }\n}\n","lang":"JSON"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"Minimum","disable":false},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Minimum key:values to enable 3DS"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JSON","header":{"controls":{"copy":{}}},"source":"\"instruction\": {\n  ....\n  \"threeDS\": {\n    \"type\": \"integrated\",\n    \"mode\": \"always\",\n    \"challenge\": {\n      \"returnUrl\": \"http://payment.example.com\",\n    },\n    \"deviceData\": {\n      \"acceptHeader\": \"text/html\",\n      \"userAgentHeader\": \"Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:47.0)\"\n    }  \n  }\n}\n","lang":"JSON"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"Full request example","disable":false},"children":[{"$$mdtype":"Tag","name":"OpenApiCodeSample","attributes":{"descriptionFile":"oas-products/payments/@20240601/openapi.yaml","operationId":"payment","exampleKey":"Card - integrated 3DS","parameters":{},"environments":{}},"children":[]}]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/products/payments/enable-features/3ds-authentication/integrated-3ds#how-much-data-to-provide"},"children":["how much data to provide"]}," for guidance on the values to include in the request related to 3DS, and the impact this may have on authentication rates."]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/products/payments/enable-features/3ds-authentication/integrated-3ds#authentication-outage-exemptions"},"children":["how to enable authentication outage exemptions"]}," to increase the likelihood of receiving a successful authorization (without liability shift) in the event of a 3DS network failure."]}]},{"$$mdtype":"Tag","name":"Cards","attributes":{"columns":3,"cardMinWidth":180},"children":[{"$$mdtype":"Tag","name":"Card","attributes":{"title":"View the full API Request schema","imagePosition":"start","iconPosition":"auto","layout":"vertical","align":"center","variant":"outlined","to":"/products/payments/openapi/payment"},"children":[]}]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"2-device-data-collection-ddc","__idx":2},"children":["2. Device Data Collection (DDC)"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/products/payments/openapi/"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["/payments"]}]}," response will return an outcome of ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["3dsDeviceDatarequired"]},". This contains a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["JWT"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["URL"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["BIN"]},". These values will be used for the device data collection form."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JSON","header":{"controls":{"copy":{}}},"source":"{\n  \"transactionReference\": \"Memory265-13/08/1876\",\n  \"outcome\": \"3dsDeviceDataRequired\",\n  \"deviceDataCollection\": {\n    \"jwt\": \"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJPcmdVbml0SWQiOiI2NjAzMDA3YWJlMjMxZTM1ZTNmNTRjODkiLCJpc3MiOiI2NjAzMDA3YTE2ZGQ5YTdlNmEwMzM0MDciLCJleHAiOjE3MTIyNDg3MTIsImlhdCI6MTcxMjI0ODExMiwianRpIjoiZjdjZGVhZWUtMTY4MS00NjlhLTgxZmEtMzBkY2MyOTYzODA3In0.T1a6hOCPVVsQmcCKU3eczwmxlHoWK83tUqIJ_VG4fwc\",\n    \"url\": \"https://centinelapistag.cardinalcommerce.com/V1/Cruise/Collect\",\n    \"bin\": \"400000\"\n  },\n  \"_actions\": {\n    \"supply3dsDeviceData\": {\n      \"href\": \"https://try.access.worldpay.com/api/payments/eyJrIjoxLCJkIjoiR0ZSM3R2Z1d4OTI5SEdSVlVaWlk0cllQV3p4TU5raU85Y0ZwSkd2b09FWGo0SnVHYXI0MzJqZlM4RHp5UnRaaiJ9/3dsDeviceData\",\n      \"method\": \"POST\"\n    }\n  }\n}\n","lang":"JSON"},"children":[]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"device-data-collection-form","__idx":3},"children":["Device Data Collection form"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The device data process for React Native uses:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["a hidden ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://github.com/react-native-webview/react-native-webview"},"children":["WebView"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["an HTML page responsible for interfacing the HTML/JavaScript layer with the React Native layer"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["an iframe, embedded in the HTML page"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["a secondary HTML page, loaded via the iframe, and used to kickstart the Device Data Collection"]}]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Install and link the React Native ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["WebView"]}," component in your application."]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"file":"/products/3ds/@v3/examples/react-native/install-webview","language":"bash","header":{"controls":{"copy":{}}},"lang":"bash","source":"# 1. Install dependency\nnpm install react-native-webview\n\n# 2. Link dependency using your preferred method\nreact-native link react-native-webview\n\n# 3. Ee-install pods\ncd ios\npod install\n"},"children":[]},{"$$mdtype":"Tag","name":"ol","attributes":{"start":2},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Add a hidden ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["WebView"]}," in your React Native application with the source pointing to the HTML page created in the next step."," ","Also, add an event listener for the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["message"]}," event which will be used to catch messages sent from the HTML layer to the React Native layer."]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"file":"/products/3ds/@v3/examples/react-native/ddc-webview.js","language":"javascript","title":"React Native","header":{"title":"React Native","controls":{"copy":{}}},"lang":"javascript","source":"<WebView\n  source={{ uri: 'replace-this-with-the-url-of-the-html-page-that-wraps-the-iframe' }}\n  onMessage={(event) => {\n    // deserialising and extracting JSON data from the event\n    console.info(JSON.parse(event.nativeEvent.data));\n  }}\n  containerStyle={{ position: 'absolute', width: 0, height: 0 }}\n/>\n"},"children":[]},{"$$mdtype":"Tag","name":"ol","attributes":{"start":3},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Create and host the HTML page which will be used to interface the HTML/JavaScript layer with the React Native layer."]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"file":"/products/3ds/@v3/examples/react-native/ddc-wrapper-html.html","language":"html","title":"HTML","header":{"title":"HTML","controls":{"copy":{}}},"lang":"html","source":"<html lang=\"en\">\n<head></head>\n<body>\n</body>\n</html>\n"},"children":[]},{"$$mdtype":"Tag","name":"ol","attributes":{"start":4},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Add a script to the HTML page to relay messages, received by ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["postMessage()"]}," in the HTML page, to the React Native layer."]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"file":"/products/3ds/@v3/examples/react-native/ddc-post-message-javascript.js","language":"javascript","title":"JavaScript","header":{"title":"JavaScript","controls":{"copy":{}}},"lang":"javascript","source":"<script language=\"JavaScript\">\nwindow.onmessage = (event) => {\n  // for Try: https://centinelapistag.cardinalcommerce.com\n  // for Production: https://centinelapi.cardinalcommerce.com\n  const allowedOrigin = '...';\n\n  // Always verify that the message received is from the expected origin\n  if (event.origin !== allowedOrigin) {\n    return;\n  }\n\n  // the event data must be serialised into a string\n  window.ReactNativeWebView.postMessage(JSON.stringify(event.data));\n};\n</script>\n"},"children":[]},{"$$mdtype":"Tag","name":"ol","attributes":{"start":5},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Add an iframe to the HTML page and set the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["src"]}," attribute to the URL of the page that will POST the DDC form. This URL should contain the following query string parameters: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["deviceDataCollection.jwt"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["deviceDataCollection.bin"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["deviceDataCollection.url"]},". Those will be used in the DDC form."]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"file":"/products/3ds/@v3/examples/react-native/ddc-iframe.html","language":"html","title":"HTML","header":{"title":"HTML","controls":{"copy":{}}},"lang":"html","source":"<iframe src=\"replace-this-with-the-url-of-your-page-that-posts-the-ddc-form\"></iframe>\n"},"children":[]},{"$$mdtype":"Tag","name":"ol","attributes":{"start":6},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Create and host the secondary HTML page that POSTs the DDC form."]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"file":"/products/3ds/@v3/examples/react-native/ddc-post-form.html","language":"javascript","title":"HTML","header":{"title":"HTML","controls":{"copy":{}}},"lang":"javascript","source":"<html>\n<body>\n<!-- Using your preferred programming language, set the 'action' attribute with the value of the query string parameter containing the 'deviceDataCollection.url' from the device data initialization response -->\n<form id=\"collectionForm\" name=\"devicedata\" method=\"POST\" action=\"https://ddcUrl.example.com\">\n\n    <!-- Using your preferred programming language, set the 'value' attribute with the value of the query string parameter containing the 'deviceDataCollection.bin' from the device data initialization response -->\n    <input type=\"hidden\" name=\"Bin\" value=\"555555\" />\n\n    <!-- Using your preferred programming language, set the 'value' attribute with the value of the query string parameter containing the 'deviceDataCollection.jwt' from the device data initialization response -->\n    <input type=\"hidden\" name=\"JWT\" value=\"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJPcmdVbml0SWQiOiJPcmdVbml0IiwiaXNzIjoiYXBpSWQiLCJleHAiOjE1NjI5MjMzNDYsImlhdCI6MTU2MjkyMzQwNiwianRpIjoiYTAzMWVhOGEtN2E0Zi00YTQwLWI1NjMtOTUzMzYzMzVhZGNmIn0.0IK74OIXBxFsxqeOURJz1TFnz14ZTbFJTdTWo9cHUJQ\" />\n\n</form>\n\n<script>\n  window.onload = function() {\n    document.getElementById('collectionForm').submit();\n  }\n</script>\n</body>\n</html>\n"},"children":[]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/products/payments/testing"},"children":["Testing"]}," page (3DS tab) contains an example form to submit the device data values. This is useful if using tools such as Postman/Insomnia to test your integration in the early stages."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"device-data-collection-postmessage","__idx":4},"children":["Device Data Collection postMessage"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Once the DDC form is submitted and is successfully sent to the card issuer, you are notified via a ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage"},"children":["postMessage"]}," event."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For security, verify the sender's identity using the postMessage ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["origin"]}," property as detailed ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage"},"children":["here"]},"."]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Environment"},"children":["Environment"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Origin"},"children":["Origin"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Try"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["https://centinelapistag.cardinalcommerce.com"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Production"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["https://centinelapi.cardinalcommerce.com"]}]}]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["An example postMessage response:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"file":"/products/3ds/@v3/examples/forms/ddc-postmessage.json","language":"json","title":"postmessage","header":{"title":"postmessage","controls":{"copy":{}}},"lang":"json","source":"{\n    \"MessageType\": \"profile.completed\",\n    \"SessionId\": \"0_3XXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXX6b5\",\n    \"Status\": true\n}"},"children":[]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Key"},"children":["Key"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Value"},"children":["Value"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["messageType"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["profile.completed"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["SessionId"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["UUID, not present or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["undefined"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Status"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]}," - use the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["SessionId"]}," value in ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["deviceData.collectionReference"]}," as part of the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/products/payments/openapi/3ds-actions/supply3dsdevicedata#3ds-actions/supply3dsdevicedata/request"},"children":["3dsDeviceData request"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]}," -  ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["SessionId"]}," is empty. Either retry DDC or send the 3dsDeviceData request without the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["collectionReference"]},"."]}]}]}]}]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The DDC call typically takes 1-2 seconds. This depends on the latency between the customer's device, the Cardinal servers and, in part, the type of Device Data Collection performed by the different issuers. The 3DS specification has a maximum response time of 10 seconds."]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info","name":"Note"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If no postMessage is provided either retry DDC or send the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/products/payments/openapi/3ds-actions/supply3dsdevicedata#3ds-actions/supply3dsdevicedata/request"},"children":["3dsDeviceData request"]}," without the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["collectionReference"]},". We ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["highly recommend"]}," ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/products/payments/enable-features/3ds-authentication/integrated-3ds#emvco-required-values"},"children":["providing device data"]}," (e.g. browserScreenHeight) in the payment request as well. This will maximize authentication rates in the case of DDC failure."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"full-integration-example-code","__idx":5},"children":["Full integration example code"]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"Dependency","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"file":"/products/3ds/@v3/examples/react-native/install-webview","language":"bash","header":{"controls":{"copy":{}}},"lang":"bash","source":"# 1. Install dependency\nnpm install react-native-webview\n\n# 2. Link dependency using your preferred method\nreact-native link react-native-webview\n\n# 3. Ee-install pods\ncd ios\npod install\n"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"React Native","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"file":"/products/3ds/@v3/examples/react-native/ddc-webview.js","language":"javascript","header":{"controls":{"copy":{}}},"lang":"javascript","source":"<WebView\n  source={{ uri: 'replace-this-with-the-url-of-the-html-page-that-wraps-the-iframe' }}\n  onMessage={(event) => {\n    // deserialising and extracting JSON data from the event\n    console.info(JSON.parse(event.nativeEvent.data));\n  }}\n  containerStyle={{ position: 'absolute', width: 0, height: 0 }}\n/>\n"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"HTML page 1","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"file":"/products/3ds/@v3/examples/react-native/ddc-full-html-1.html","language":"javascript","header":{"controls":{"copy":{}}},"lang":"javascript","source":"<html>\n<body>\n<script language=\"JavaScript\">\n  window.onmessage = (event) => {\n    // for Try: https://centinelapistag.cardinalcommerce.com\n    // for Production: https://centinelapi.cardinalcommerce.com\n    const allowedOrigin = '...';\n\n    // Always verify that the message received is from the expected origin\n    if (event.origin !== allowedOrigin) {\n      return;\n    }\n\n    // the event data must be serialised into a string\n    window.ReactNativeWebView.postMessage(JSON.stringify(event.data));\n  };\n</script>\n\n<iframe src=\"replace-this-with-the-url-of-your-page-that-posts-the-ddc-form\"></iframe>\n</body>\n</html>\n"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"HTML page 2","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"file":"/products/3ds/@v3/examples/react-native/ddc-post-form.html","language":"javascript","header":{"controls":{"copy":{}}},"lang":"javascript","source":"<html>\n<body>\n<!-- Using your preferred programming language, set the 'action' attribute with the value of the query string parameter containing the 'deviceDataCollection.url' from the device data initialization response -->\n<form id=\"collectionForm\" name=\"devicedata\" method=\"POST\" action=\"https://ddcUrl.example.com\">\n\n    <!-- Using your preferred programming language, set the 'value' attribute with the value of the query string parameter containing the 'deviceDataCollection.bin' from the device data initialization response -->\n    <input type=\"hidden\" name=\"Bin\" value=\"555555\" />\n\n    <!-- Using your preferred programming language, set the 'value' attribute with the value of the query string parameter containing the 'deviceDataCollection.jwt' from the device data initialization response -->\n    <input type=\"hidden\" name=\"JWT\" value=\"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJPcmdVbml0SWQiOiJPcmdVbml0IiwiaXNzIjoiYXBpSWQiLCJleHAiOjE1NjI5MjMzNDYsImlhdCI6MTU2MjkyMzQwNiwianRpIjoiYTAzMWVhOGEtN2E0Zi00YTQwLWI1NjMtOTUzMzYzMzVhZGNmIn0.0IK74OIXBxFsxqeOURJz1TFnz14ZTbFJTdTWo9cHUJQ\" />\n\n</form>\n\n<script>\n  window.onload = function() {\n    document.getElementById('collectionForm').submit();\n  }\n</script>\n</body>\n</html>\n"},"children":[]}]}]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"3-continue-with-the-payment","__idx":6},"children":["3. Continue with the payment"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Once device data has been completed use the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["supply3dsDeviceData"]}," action (from the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["/payments"]}," response) to resume the payment, including the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["SessionId"]}," (Aka: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["collectionReference"]},") in the request body."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JSON","header":{"controls":{"copy":{}}},"source":"// Action to continue the payment (from /payment response)\n\"_actions\": {\n    \"supply3dsDeviceData\": {\n      \"href\": \"https://try.access.worldpay.com/api/payments/eyJrIjoxLCJkIjoiR0ZSM3R2Z1d4OTI5SEdSVlVaWlk0cllQV3p4TU5raU85Y0ZwSkd2b09FWGo0SnVHYXI0MzJqZlM4RHp5UnRaaiJ9/3dsDeviceData\",\n      \"method\": \"POST\"\n    }\n}\n","lang":"JSON"},"children":[]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JSON","header":{"controls":{"copy":{}}},"source":"// Include the sessionId (Aka: collectionReference) in the body\n{\n  \"collectionReference\": \"0_3XXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXX6b5\"\n}\n","lang":"JSON"},"children":[]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"danger"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If you do not provide a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["collectionReference"]},", you will see an increased number of ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["challenged"]}," and even ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["authenticationFailed"]}," outcomes."]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For merchants using ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["3DS premium"]}," where custom rules can be created using Cardinal, you can also get a 3DS outcome of ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bypassed"]}," that will cause the payment to proceed straight to authorization after Device Data Collection."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The issuer then performs a risk assessment using a combination of data from the Payments API request and the device data collection above. If it passes the payment will proceed to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["authorization"]},". If not the issuer may request a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["challenge"]}," to verify the identity of the customer."]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"4challenge-and-verification","__idx":7},"children":["4.Challenge and verification"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If the response outcome from the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["supply3dsDeviceData"]}," action is ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["3dsChallenged"]}," you must display a challenge screen from the issuer to check the customers identity."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JSON","header":{"controls":{"copy":{}}},"source":"{\n  \"outcome\": \"3dsChallenged\",\n  \"transactionReference\": \"Memory265-13/08/1876\",\n  \"authentication\": {\n    \"version\": \"2.1.0\"\n  },\n  \"challenge\": {\n    \"reference\": \"706hovL8DK1tIGGzQUV1\",\n    \"url\": \"https://centinelapistag.cardinalcommerce.com/V2/Cruise/StepUp\",\n    \"jwt\": \"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJPcmdVbml0SWQiOiI2NjAzMDA3YWJlMjMxZTM1ZTNmNTRjODkiLCJPYmplY3RpZnlQYXlsb2FkIjpmYWxzZSwiaXNzIjoiNjYwMzAwN2ExNmRkOWE3ZTZhMDMzNDA3IiwiUmV0dXJuVXJsIjoiaHR0cDovL3BheW1lbnQuZXhhbXBsZS5jb20iLCJQYXlsb2FkIjoie1wiUGF5bG9hZFwiOlwiZXlKdFpYTnpZV2RsVkhsd1pTSTZJa05TWlhFaUxDSnRaWE56WVdkbFZtVnljMmx2YmlJNklqSXVNUzR3SWl3aWRHaHlaV1ZFVTFObGNuWmxjbFJ5WVc1elNVUWlPaUppTkRKbE5UWmpaaTAyWkRrMkxUUXpNek10T0dJMk5DMWlNbVU0TldZMFpURTFaVGtpTENKaFkzTlVjbUZ1YzBsRUlqb2laV1ZqWldZeE1ETXRNRE13TVMwMFpUbGtMVGsxTmpFdE56ZGlNbVkzTlRFMk5HUmhJaXdpWTJoaGJHeGxibWRsVjJsdVpHOTNVMmw2WlNJNklqQTBJbjBcIixcIkFDU1VybFwiOlwiaHR0cHM6XFwvXFwvMW1lcmNoYW50YWNzc3RhZy5jYXJkaW5hbGNvbW1lcmNlLmNvbVxcL01lcmNoYW50QUNTV2ViXFwvY3JlcS5qc3BcIixcIlRyYW5zYWN0aW9uSWRcIjpcIjcwNmhvdkw4REsxdElHR3pRVVYxXCJ9IiwiZXhwIjoxNzEyMzA2MDk0LCJpYXQiOjE3MTIzMDU0OTQsImp0aSI6IjE4YTIwYzNkLTZhZmMtNDA5My04NGEwLTQ2OGEyYTY5MTE0OCJ9.YEpOuTxnqrXRiHan-givWBd6FfTDJOfNg-h2dF2yA6A\",\n    \"payload\": \"eyJtZXNzYWdlVHlwZSI6IkNSZXEiLCJtZXNzYWdlVmVyc2lvbiI6IjIuMS4wIiwidGhyZWVEU1NlcnZlclRyYW5zSUQiOiJiNDJlNTZjZi02ZDk2LTQzMzMtOGI2NC1iMmU4NWY0ZTE1ZTkiLCJhY3NUcmFuc0lEIjoiZWVjZWYxMDMtMDMwMS00ZTlkLTk1NjEtNzdiMmY3NTE2NGRhIiwiY2hhbGxlbmdlV2luZG93U2l6ZSI6IjA0In0\"\n  },\n  \"_actions\": {\n    \"complete3dsChallenge\": {\n      \"href\": \"https://try.access.worldpay.com/api/payments/eyJrIjoxLCJkIjoiZXlOaXNtU0lzQnVLTm5BQkt1WjEyMVFxeXg2bUZtb2hEcEpFeDdyYXZ3SDE3NFBpUTBsWUpwekptbW9hR3VVSyJ9/3dsChallenges\",\n      \"method\": \"POST\"\n    }\n  }\n}\n","lang":"JSON"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"optional-md-field","__idx":8},"children":["Optional MD field"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Pass data specific to your checkout session and it will be echoed back in the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["challenge.returnUrl"]}," originally provided. This could, for example, be a checkout sessionId. Any value provided must be URL encoded with a maximum of 1024 characters."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"challenge-display","__idx":9},"children":["Challenge display"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The challenge display for React Native uses:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["a ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://github.com/react-native-webview/react-native-webview"},"children":["WebView"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["a mobile-friendly HTML page"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["a fullscreen iframe, embedded in the mobile-friendly HTML page, used to display the challenge page to the end user"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["a secondary HTML page, loaded via the iframe, and used to kickstart the challenge display"]}]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Install and link the React Native ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["WebView"]}," component in your application."]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"file":"/products/3ds/@v3/examples/react-native/install-webview","language":"bash","header":{"controls":{"copy":{}}},"lang":"bash","source":"# 1. Install dependency\nnpm install react-native-webview\n\n# 2. Link dependency using your preferred method\nreact-native link react-native-webview\n\n# 3. Ee-install pods\ncd ios\npod install\n"},"children":[]},{"$$mdtype":"Tag","name":"ol","attributes":{"start":2},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Add a WebView in your React Native application with the source pointing to the HTML page created in the next step."]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"file":"/products/3ds/@v3/examples/react-native/challenge-webview.js","language":"javascript","title":"React Native","header":{"title":"React Native","controls":{"copy":{}}},"lang":"javascript","source":"<WebView source={{ uri: 'replace-this-with-the-url-of-the-mobile-friendly-page' }} />\n"},"children":[]},{"$$mdtype":"Tag","name":"ol","attributes":{"start":3},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Create and host the mobile-friendly HTML page."]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"file":"/products/3ds/@v3/examples/react-native/challenge-mobile-friendly-html.html","language":"html","title":"HTML","header":{"title":"HTML","controls":{"copy":{}}},"lang":"html","source":"<html lang=\"en\">\n<head>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n</head>\n<body style=\"margin: 0\">\n</body>\n</html>\n"},"children":[]},{"$$mdtype":"Tag","name":"ol","attributes":{"start":4},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Add a fullscreen iframe to the HTML page and set the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["src"]}," attribute to the URL of the page that will POST the challenge form."]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"file":"/products/3ds/@v3/examples/react-native/challenge-iframe.html","language":"html","title":"HTML","header":{"title":"HTML","controls":{"copy":{}}},"lang":"html","source":"<iframe src=\"replace-this-with-the-url-of-your-page-that-posts-the-challenge-form\"\n        width=\"100%\" height=\"100%\"\n        style=\"height: 100%; width: 100%; border-width: 0\">\n</iframe>\n"},"children":[]},{"$$mdtype":"Tag","name":"ol","attributes":{"start":5},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Create and host the secondary HTML page that POSTs the challenge form."]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"file":"/products/3ds/@v3/examples/react-native/challenge-post-form.html","language":"html","title":"HTML","header":{"title":"HTML","controls":{"copy":{}}},"lang":"html","source":"<html>\n<head>\n</head>\n<body>\n\n<!-- Using your preferred programming language, set the 'action' attribute with the value of the query string parameter containing the 'challenge.url' from the authentication response -->\n<form id=\"challengeForm\" method= \"POST\" action=\"https://challengeUrl.example.com\">\n\n    <!-- Using your preferred programming language, set the 'value' attribute with the value of the query string parameter containing the 'challenge.jwt' from the authentication response -->\n    <input type = \"hidden\" name= \"JWT\" value= \"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1NDQzOGIzYS1iYjUzLTEyY2QtODY0My0xNTM2YmU3M2ZmMzUiLCJpYXQiOiIzODU2NzI5NDgyIiwiaXNzIjoiNWJkOWUwZTQ0NDRkY2UxNTM0MjhjOTQwIiwiT3JnVW5pdElkIjoiNWJkOWI1NWU0NDQ0NzYxYWMwYWYxYzgwIiwiUmV0dXJuVXJsIjoiaHR0cDovL21lcmNoYW50LmV4YW1wbGUuY29tL3RocmVlZHNjaGFsbGVuZ2Vjb21wbGV0ZSIsIlBheWxvYWQiOnsiQUNTVXJsIjoiaHR0cHM6Ly9hY3MuZXhhbXBsZS5jb20vM2RzMi9jaGFsbGVuZ2U_aWQ9MTIzNDU2Nzg5IiwiUGF5bG9hZCI6IlZHaHBjeUJwY3lCaElHSmhjMlVnTmpRZ1pXNWpiMlJsWkNCbGVHRnRjR3hsSUc5bUlHRWdNMFJUSUNKd1lYbHNiMkZrSWc9PSIsIlRyYW5zYWN0aW9uSWQiOiJzUk1QV0NRb1FyRWlWeGVoVG51MCJ9LCJPYmplY3RpZnlQYXlsb2FkIjp0cnVlfQ.3Dqjr5MuEC9AG7uvsJCft94-d70NmgR94zIeru8fAYE\" />\n\n    <!-- Optional field (max 1024 characters) for you to pass url parameters in the challenge form that will be included/echoed in the response url (`challenge.returnUrl`) after the challenge is complete -->\n    <input type=\"hidden\" name=\"MD\" value=\"merchantSessionId=1234567890\" />\n\n</form>\n\n<script>\n  window.onload = function() {\n    // Auto submit form on page load\n    document.getElementById('challengeForm').submit();\n  }\n</script>\n\n</body>\n</html>\n"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In addition, after the challenge is completed, if you wish to relay a message, you have sent by ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["postMessage()"]}," to your mobile-friendly page, to the React Native layer:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Use the following JavaScript in your mobile-friendly page to relay the message to React Native."]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"file":"/products/3ds/@v3/examples/react-native/challenge-post-message-javascript.js","language":"javascript","title":"Javascript","header":{"title":"Javascript","controls":{"copy":{}}},"lang":"javascript","source":"<script language=\"JavaScript\">\nwindow.onmessage = (event) => {\n  // Always verify that the message received is from the expected origin\n  if (event.origin !== '...') {\n    return;\n  }\n\n  // the function below uses a tring, so if you wish to send JSON\n  // make sure to serialise it using JSON.stringify()\n  window.ReactNativeWebView.postMessage(event.data);\n};\n</script>\n"},"children":[]},{"$$mdtype":"Tag","name":"ol","attributes":{"start":2},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Add an event listener for the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["message"]}," event on your ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["WebView"]},"."]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"file":"/products/3ds/@v3/examples/react-native/challenge-post-message-react-native.js","language":"javascript","title":"React Native","header":{"title":"React Native","controls":{"copy":{}}},"lang":"javascript","source":"<WebView\n  source={{ uri: 'replace-this-with-the-url-of-the-mobile-friendly-page' }}\n  onMessage={(event) => {\n    // extracting data (string) from the event\n    console.info(event.nativeEvent.data);\n  }}\n/>\n"},"children":[]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/products/payments/testing"},"children":["Testing"]}," page (3DS tab) contains an example form to submit the challenge values. This is useful if using tools such as Postman/Insomnia to test your integration in the early stages."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"full-integration-example-code-1","__idx":10},"children":["Full integration example code"]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"Dependency","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"file":"/products/3ds/@v3/examples/react-native/install-webview","language":"bash","header":{"controls":{"copy":{}}},"lang":"bash","source":"# 1. Install dependency\nnpm install react-native-webview\n\n# 2. Link dependency using your preferred method\nreact-native link react-native-webview\n\n# 3. Ee-install pods\ncd ios\npod install\n"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"React Native","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"file":"/products/3ds/@v3/examples/react-native/challenge-full-react-native.js","language":"javascript","header":{"controls":{"copy":{}}},"lang":"javascript","source":"// The onMessage event handler is optional and should be added\n// only if you wish to relay to the React Native layer\n// a message you sent by postMessage() to your mobile-friendly page\n\n<WebView\n  source={{ uri: 'replace-this-with-the-url-of-the-mobile-friendly-page' }}\n  onMessage={(event) => {\n    // extracting data (string) from the event\n    console.info(event.nativeEvent.data);\n  }}\n/>\n"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"HTML page 1","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"file":"/products/3ds/@v3/examples/react-native/challenge-full-html-1.html","language":"javascript","header":{"controls":{"copy":{}}},"lang":"javascript","source":"<html lang=\"en\">\n<head>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n</head>\n<body style=\"margin: 0\">\n<iframe src=\"replace-this-with-the-url-of-your-page-that-posts-the-challenge-form\"\n        width=\"100%\" height=\"100%\"\n        style=\"height: 100%; width: 100%; border-width: 0\">\n</iframe>\n\n<script language=\"JavaScript\">\n// This script is optional and should be added\n// only if you wish to relay to the React Native layer\n// a message you sent by postMessage() to your mobile-friendly page\n\nwindow.onmessage = (event) => {\n  // Always verify that the message received is from the expected origin\n  if (event.origin !== '...') {\n    return;\n  }\n\n  // the function below uses a string, so if you wish to send JSON\n  // make sure to serialise it using JSON.stringify()\n  window.ReactNativeWebView.postMessage(event.data);\n};\n</script>\n</body>\n</html>\n"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"HTML page 2","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"file":"/products/3ds/@v3/examples/react-native/challenge-post-form.html","language":"javascript","header":{"controls":{"copy":{}}},"lang":"javascript","source":"<html>\n<head>\n</head>\n<body>\n\n<!-- Using your preferred programming language, set the 'action' attribute with the value of the query string parameter containing the 'challenge.url' from the authentication response -->\n<form id=\"challengeForm\" method= \"POST\" action=\"https://challengeUrl.example.com\">\n\n    <!-- Using your preferred programming language, set the 'value' attribute with the value of the query string parameter containing the 'challenge.jwt' from the authentication response -->\n    <input type = \"hidden\" name= \"JWT\" value= \"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1NDQzOGIzYS1iYjUzLTEyY2QtODY0My0xNTM2YmU3M2ZmMzUiLCJpYXQiOiIzODU2NzI5NDgyIiwiaXNzIjoiNWJkOWUwZTQ0NDRkY2UxNTM0MjhjOTQwIiwiT3JnVW5pdElkIjoiNWJkOWI1NWU0NDQ0NzYxYWMwYWYxYzgwIiwiUmV0dXJuVXJsIjoiaHR0cDovL21lcmNoYW50LmV4YW1wbGUuY29tL3RocmVlZHNjaGFsbGVuZ2Vjb21wbGV0ZSIsIlBheWxvYWQiOnsiQUNTVXJsIjoiaHR0cHM6Ly9hY3MuZXhhbXBsZS5jb20vM2RzMi9jaGFsbGVuZ2U_aWQ9MTIzNDU2Nzg5IiwiUGF5bG9hZCI6IlZHaHBjeUJwY3lCaElHSmhjMlVnTmpRZ1pXNWpiMlJsWkNCbGVHRnRjR3hsSUc5bUlHRWdNMFJUSUNKd1lYbHNiMkZrSWc9PSIsIlRyYW5zYWN0aW9uSWQiOiJzUk1QV0NRb1FyRWlWeGVoVG51MCJ9LCJPYmplY3RpZnlQYXlsb2FkIjp0cnVlfQ.3Dqjr5MuEC9AG7uvsJCft94-d70NmgR94zIeru8fAYE\" />\n\n    <!-- Optional field (max 1024 characters) for you to pass url parameters in the challenge form that will be included/echoed in the response url (`challenge.returnUrl`) after the challenge is complete -->\n    <input type=\"hidden\" name=\"MD\" value=\"merchantSessionId=1234567890\" />\n\n</form>\n\n<script>\n  window.onload = function() {\n    // Auto submit form on page load\n    document.getElementById('challengeForm').submit();\n  }\n</script>\n\n</body>\n</html>\n"},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"5-continue-with-the-payment","__idx":11},"children":["5. Continue with the payment"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Once the challenge form has been completed use the action from the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["3dsDeviceData"]}," response. No body is required."]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"danger"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If you do not complete the challenge display, the payment will fail when you post the action below."]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JSON","header":{"controls":{"copy":{}}},"source":"// Action to continue the payment (from /3dsDeviceData response)\n\"_actions\": {\n    \"complete3dsChallenge\": {\n      \"href\": \"https://try.access.worldpay.com/api/payments/eyJrIjoxLCJkIjoiZXlOaXNtU0lzQnVLTm5BQkt1WjEyMVFxeXg2bUZtb2hEcEpFeDdyYXZ3SDE3NFBpUTBsWUpwekptbW9hR3VVSyJ9/3dsChallenges\",\n      \"method\": \"POST\"\n    }\n  }\n","lang":"JSON"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If everything is fine, the payment will proceed. However, if authentication fails or a downstream error prevents authentication details from being returned, you may encounter different outcomes. For a comprehensive overview, please refer to the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#6-outcome-details"},"children":["Outcome details"]}," below."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"6-outcome-details","__idx":12},"children":["6. Outcome details"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A summary of the 3DS authentication is included in the final payment response."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"Authentication successful","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JSON","header":{"controls":{"copy":{}}},"source":"...\n\"threeDS\": {\n  \"outcome\": \"authenticated\",\n  \"issuerResponse\": \"frictionless\"\n}\n...\n","lang":"JSON"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"Authentication outage","disable":false},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/products/payments/enable-features/3ds-authentication/integrated-3ds#how-to-enable-authentication-outage-exemptions"},"children":["how to enable authentication outage exemptions"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JSON","header":{"controls":{"copy":{}}},"source":"...\n\"threeDS\": {\n  \"outcome\": \"authenticationOutage\"\n}\n...\n","lang":"JSON"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"Authentication failed","disable":false},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Issuer failed the authentication following the challenge."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"file":"../../../examples/extended/response/response-authentication-failed.json","language":"json","header":{"controls":{"copy":{}}},"lang":"json","source":"{\n\t\"transactionReference\": \"05651339-d94e-4fdd-82e9-a41d3df47c7d\",\n\t\"outcome\": \"3dsAuthenticationFailed\",\n\t\"authentication\": {\n\t\t\"version\": \"2.1.0\",\n\t\t\"eci\": \"07\",\n\t\t\"transactionId\": \"ec89944d-c5b1-4d4b-b39a-a2dc80dd5565\"\n\t}\n}"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"Unavailable","disable":false},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Error/Timeout whilst attempting authentication."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"file":"../../../examples/extended/response/response-unavailable.json","language":"json","header":{"controls":{"copy":{}}},"lang":"json","source":"{\n\t\"transactionReference\": \"700cb517-02c6-4dfe-a9dc-a5f77ae101bb\",\n\t\"outcome\": \"3dsUnavailable\"\n}"},"children":[]}]}]}]},"headings":[{"value":"React Native","id":"react-native","depth":1},{"value":"1. Add the threeDS object","id":"1-add-the-threeds-object","depth":2},{"value":"2. Device Data Collection (DDC)","id":"2-device-data-collection-ddc","depth":2},{"value":"Device Data Collection form","id":"device-data-collection-form","depth":3},{"value":"Device Data Collection postMessage","id":"device-data-collection-postmessage","depth":3},{"value":"Full integration example code","id":"full-integration-example-code","depth":3},{"value":"3. Continue with the payment","id":"3-continue-with-the-payment","depth":2},{"value":"4.Challenge and verification","id":"4challenge-and-verification","depth":2},{"value":"Optional MD field","id":"optional-md-field","depth":4},{"value":"Challenge display","id":"challenge-display","depth":3},{"value":"Full integration example code","id":"full-integration-example-code-1","depth":3},{"value":"5. Continue with the payment","id":"5-continue-with-the-payment","depth":2},{"value":"6. Outcome details","id":"6-outcome-details","depth":2}],"frontmatter":{"seo":{"title":"React Native"}},"lastModified":"2026-06-16T09:46:28.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/products/payments/enable-features/3ds-authentication/integrated-3ds/react-native","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}