{"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","api-docs-products/payments/@20240601/openapi.yaml":"api-docs-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-bsh.securedataplatform.co.uk","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-bsh.securedataplatform.co.uk/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/**/*"]},{"title":"Payment Queries API","description":"Querying your payments data, based on a variety of parameters.","includeFiles":["products/payment-queries/@v1/**/*"]},{"title":"Card BIN Data API","description":"Provides detailed information about a card.","includeFiles":["products/card-bin/@v1/**/*"]},{"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/**/*"]},{"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/**/*"]},{"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/**/*"]},{"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/**/*"]},{"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/**/*"]},{"title":"Card Verifications API","description":"Verify your customer's card to maximize your authentication rates.","includeFiles":["products/card-verifications/@v6/**/*"]},{"title":"Account Payouts API","description":"Send funds to your customer's bank accounts and search for payouts using parameters.","includeFiles":["products/account-payouts/@20250101/**/*"]},{"title":"APMs","description":"Pay using eWallets, bank transfers, direct debits, local card schemes, Postpay and eInvoice/ Buy Now Pay Later.","includeFiles":["products/apms/@20240701/**/*"]},{"title":"Balance API","description":"Request your account details for a single account or all accounts under an entity.","includeFiles":["products/balance/@20250101/**/*"]},{"title":"Card Payouts API","description":"Send funds to your customer's cards.","includeFiles":["products/card-payouts/@v4/**/*"]},{"title":"Events (Webhooks)","description":"Receive status updates from Access Worldpay by setting up a webhook.","includeFiles":["products/events/@v1/**/*"]},{"title":"FX API","description":"Manage Foreign Exchange (FX) on your payments.","includeFiles":["products/fx/@v1/**/*"]},{"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/**/*"]},{"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/**/*"]},{"title":"Parties API","description":"Create parties, manage your payout instruments and beneficial owners and carry out identity verification checks.","includeFiles":["products/parties/@20250101/**/*"]},{"title":"SCA Exemptions API","description":"Maximize a frictionless checkout experience by using issuer data insights to apply exemptions.","includeFiles":["products/sca-exemptions/@v1/**/*"]},{"title":"Split Payments API","description":"Divide funds from a single payment amongst yourself and your parties/sellers.","includeFiles":["products/split-payments/@20250625/**/*"]},{"title":"Statements API","description":"Retrieve your account statement and see individual entries for all credits and debits.","includeFiles":["products/statements/@20250101/**/*"]},{"title":"Transfers API","description":"Transfer funds from source account to target account.","includeFiles":["products/transfers/@20250101/**/*"]},{"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/**/*"]}]}},"dynamicMarkdocComponents":["openapi"],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Last updated"]},": 01 September 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":"TabItemFragment","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":"TabItemFragment","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":"TabItemFragment","attributes":{"label":"Full request example","disable":false},"children":[{"$$mdtype":"Tag","name":"OpenApiCodeSample","attributes":{"descriptionFile":"api-docs-products/payments/@20240601/openapi.yaml","operationId":"payment","exampleKey":"Card - integrated 3DS","parameters":{},"environments":{},"codeSamplesResolved":[{"lang":"json","title":"Payload application/json","source":"{\n  \"transactionReference\": \"Memory265-13/08/1876\",\n  \"orderReference\": \"order-12345\",\n  \"merchant\": {\n    \"entity\": \"default\"\n  },\n  \"instruction\": {\n    \"method\": \"card\",\n    \"paymentInstrument\": {\n      \"type\": \"plain\",\n      \"cardHolderName\": \"Sherlock Holmes\",\n      \"cardNumber\": \"4000000000001091\",\n      \"expiryDate\": {\n        \"month\": 5,\n        \"year\": 2035\n      },\n      \"billingAddress\": {\n        \"address1\": \"221B Baker Street\",\n        \"address2\": \"Marylebone\",\n        \"address3\": \"Westminster\",\n        \"postalCode\": \"SW1 1AA\",\n        \"city\": \"London\",\n        \"state\": \"Greater London\",\n        \"countryCode\": \"GB\"\n      },\n      \"cvc\": \"123\"\n    },\n    \"threeDS\": {\n      \"type\": \"integrated\",\n      \"mode\": \"always\",\n      \"exemptionOnOutage\": true,\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        \"browserScreenWidth\": 900,\n        \"browserScreenHeight\": 1200,\n        \"browserJavaEnabled\": true,\n        \"browserColorDepth\": \"32\",\n        \"timeZone\": \"300\",\n        \"browserJavascriptEnabled\": true,\n        \"channel\": \"browser\"\n      },\n      \"challenge\": {\n        \"returnUrl\": \"http://payment.example.com\",\n        \"preference\": \"noPreference\"\n      }\n    },\n    \"customer\": {\n      \"email\": \"john.appleseed@example.com\",\n      \"phone\": \"00000000000\",\n      \"ipAddress\": \"192.168.0.1\"\n    },\n    \"narrative\": {\n      \"line1\": \"trading name\"\n    },\n    \"value\": {\n      \"currency\": \"GBP\",\n      \"amount\": 42\n    }\n  }\n}"},{"lang":"shell","title":"curl","source":"curl -i -X POST \\\n  https://try.access.worldpay-bsh.securedataplatform.co.uk/api/payments \\\n  -H 'Content-Type: application/json' \\\n  -H 'WP-Api-Version: 2024-06-01' \\\n  -d '{\n    \"transactionReference\": \"Memory265-13/08/1876\",\n    \"orderReference\": \"order-12345\",\n    \"merchant\": {\n      \"entity\": \"default\"\n    },\n    \"instruction\": {\n      \"method\": \"card\",\n      \"paymentInstrument\": {\n        \"type\": \"plain\",\n        \"cardHolderName\": \"Sherlock Holmes\",\n        \"cardNumber\": \"4000000000001091\",\n        \"expiryDate\": {\n          \"month\": 5,\n          \"year\": 2035\n        },\n        \"billingAddress\": {\n          \"address1\": \"221B Baker Street\",\n          \"address2\": \"Marylebone\",\n          \"address3\": \"Westminster\",\n          \"postalCode\": \"SW1 1AA\",\n          \"city\": \"London\",\n          \"state\": \"Greater London\",\n          \"countryCode\": \"GB\"\n        },\n        \"cvc\": \"123\"\n      },\n      \"threeDS\": {\n        \"type\": \"integrated\",\n        \"mode\": \"always\",\n        \"exemptionOnOutage\": true,\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          \"browserScreenWidth\": 900,\n          \"browserScreenHeight\": 1200,\n          \"browserJavaEnabled\": true,\n          \"browserColorDepth\": \"32\",\n          \"timeZone\": \"300\",\n          \"browserJavascriptEnabled\": true,\n          \"channel\": \"browser\"\n        },\n        \"challenge\": {\n          \"returnUrl\": \"http://payment.example.com\",\n          \"preference\": \"noPreference\"\n        }\n      },\n      \"customer\": {\n        \"email\": \"john.appleseed@example.com\",\n        \"phone\": \"00000000000\",\n        \"ipAddress\": \"192.168.0.1\"\n      },\n      \"narrative\": {\n        \"line1\": \"trading name\"\n      },\n      \"value\": {\n        \"currency\": \"GBP\",\n        \"amount\": 42\n      }\n    }\n  }'"},{"lang":"python","title":"Python","source":"import requests\n\nurl = \"https://try.access.worldpay-bsh.securedataplatform.co.uk/api/payments\"\n\npayload = {\n  \"transactionReference\": \"Memory265-13/08/1876\",\n  \"orderReference\": \"order-12345\",\n  \"merchant\": {\n    \"entity\": \"default\"\n  },\n  \"instruction\": {\n    \"method\": \"card\",\n    \"paymentInstrument\": {\n      \"type\": \"plain\",\n      \"cardHolderName\": \"Sherlock Holmes\",\n      \"cardNumber\": \"4000000000001091\",\n      \"expiryDate\": {\n        \"month\": 5,\n        \"year\": 2035\n      },\n      \"billingAddress\": {\n        \"address1\": \"221B Baker Street\",\n        \"address2\": \"Marylebone\",\n        \"address3\": \"Westminster\",\n        \"postalCode\": \"SW1 1AA\",\n        \"city\": \"London\",\n        \"state\": \"Greater London\",\n        \"countryCode\": \"GB\"\n      },\n      \"cvc\": \"123\"\n    },\n    \"threeDS\": {\n      \"type\": \"integrated\",\n      \"mode\": \"always\",\n      \"exemptionOnOutage\": True,\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        \"browserScreenWidth\": 900,\n        \"browserScreenHeight\": 1200,\n        \"browserJavaEnabled\": True,\n        \"browserColorDepth\": \"32\",\n        \"timeZone\": \"300\",\n        \"browserJavascriptEnabled\": True,\n        \"channel\": \"browser\"\n      },\n      \"challenge\": {\n        \"returnUrl\": \"http://payment.example.com\",\n        \"preference\": \"noPreference\"\n      }\n    },\n    \"customer\": {\n      \"email\": \"john.appleseed@example.com\",\n      \"phone\": \"00000000000\",\n      \"ipAddress\": \"192.168.0.1\"\n    },\n    \"narrative\": {\n      \"line1\": \"trading name\"\n    },\n    \"value\": {\n      \"currency\": \"GBP\",\n      \"amount\": 42\n    }\n  }\n}\n\nheaders = {\n  \"Content-Type\": \"application/json\",\n  \"WP-Api-Version\": \"2024-06-01\"\n}\n\nresponse = requests.post(url, json=payload, headers=headers)\n\ndata = response.json()\nprint(data)"},{"lang":"java","title":"Java","source":"import java.net.*;\nimport java.net.http.*;\nimport java.util.*;\n\npublic class App {\n  public static void main(String[] args) throws Exception {\n    var httpClient = HttpClient.newBuilder().build();\n\n    var payload = String.join(\"\\n\"\n      , \"{\"\n      , \" \\\"transactionReference\\\": \\\"Memory265-13/08/1876\\\",\"\n      , \" \\\"orderReference\\\": \\\"order-12345\\\",\"\n      , \" \\\"merchant\\\": {\"\n      , \"  \\\"entity\\\": \\\"default\\\"\"\n      , \" },\"\n      , \" \\\"instruction\\\": {\"\n      , \"  \\\"method\\\": \\\"card\\\",\"\n      , \"  \\\"paymentInstrument\\\": {\"\n      , \"   \\\"type\\\": \\\"plain\\\",\"\n      , \"   \\\"cardHolderName\\\": \\\"Sherlock Holmes\\\",\"\n      , \"   \\\"cardNumber\\\": \\\"4000000000001091\\\",\"\n      , \"   \\\"expiryDate\\\": {\"\n      , \"    \\\"month\\\": 5,\"\n      , \"    \\\"year\\\": 2035\"\n      , \"   },\"\n      , \"   \\\"billingAddress\\\": {\"\n      , \"    \\\"address1\\\": \\\"221B Baker Street\\\",\"\n      , \"    \\\"address2\\\": \\\"Marylebone\\\",\"\n      , \"    \\\"address3\\\": \\\"Westminster\\\",\"\n      , \"    \\\"postalCode\\\": \\\"SW1 1AA\\\",\"\n      , \"    \\\"city\\\": \\\"London\\\",\"\n      , \"    \\\"state\\\": \\\"Greater London\\\",\"\n      , \"    \\\"countryCode\\\": \\\"GB\\\"\"\n      , \"   },\"\n      , \"   \\\"cvc\\\": \\\"123\\\"\"\n      , \"  },\"\n      , \"  \\\"threeDS\\\": {\"\n      , \"   \\\"type\\\": \\\"integrated\\\",\"\n      , \"   \\\"mode\\\": \\\"always\\\",\"\n      , \"   \\\"exemptionOnOutage\\\": true,\"\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      , \"    \\\"browserScreenWidth\\\": 900,\"\n      , \"    \\\"browserScreenHeight\\\": 1200,\"\n      , \"    \\\"browserJavaEnabled\\\": true,\"\n      , \"    \\\"browserColorDepth\\\": \\\"32\\\",\"\n      , \"    \\\"timeZone\\\": \\\"300\\\",\"\n      , \"    \\\"browserJavascriptEnabled\\\": true,\"\n      , \"    \\\"channel\\\": \\\"browser\\\"\"\n      , \"   },\"\n      , \"   \\\"challenge\\\": {\"\n      , \"    \\\"returnUrl\\\": \\\"http://payment.example.com\\\",\"\n      , \"    \\\"preference\\\": \\\"noPreference\\\"\"\n      , \"   }\"\n      , \"  },\"\n      , \"  \\\"customer\\\": {\"\n      , \"   \\\"email\\\": \\\"john.appleseed@example.com\\\",\"\n      , \"   \\\"phone\\\": \\\"00000000000\\\",\"\n      , \"   \\\"ipAddress\\\": \\\"192.168.0.1\\\"\"\n      , \"  },\"\n      , \"  \\\"narrative\\\": {\"\n      , \"   \\\"line1\\\": \\\"trading name\\\"\"\n      , \"  },\"\n      , \"  \\\"value\\\": {\"\n      , \"   \\\"currency\\\": \\\"GBP\\\",\"\n      , \"   \\\"amount\\\": 42\"\n      , \"  }\"\n      , \" }\"\n      , \"}\"\n    );\n\n    var host = \"https://try.access.worldpay-bsh.securedataplatform.co.uk\";\n    var pathname = \"/api/payments\";\n    var request = HttpRequest.newBuilder()\n      .POST(HttpRequest.BodyPublishers.ofString(payload))\n      .uri(URI.create(host + pathname ))\n      .header(\"Content-Type\", \"application/json\")\n      .header(\"WP-Api-Version\", \"2024-06-01\")\n      .build();\n\n    var response = httpClient.send(request, HttpResponse.BodyHandlers.ofString());\n\n    System.out.println(response.body());\n  }\n}"},{"lang":"javascript","title":"Node.js","source":"import fetch from 'node-fetch';\n\nasync function run() {\n  const resp = await fetch(\n    `https://try.access.worldpay-bsh.securedataplatform.co.uk/api/payments`,\n    {\n      method: 'POST',\n      headers: {\n        'Content-Type': 'application/json',\n        'WP-Api-Version': '2024-06-01'\n      },\n      body: JSON.stringify({\n        transactionReference: 'Memory265-13/08/1876',\n        orderReference: 'order-12345',\n        merchant: {entity: 'default'},\n        instruction: {\n          method: 'card',\n          paymentInstrument: {\n            type: 'plain',\n            cardHolderName: 'Sherlock Holmes',\n            cardNumber: '4000000000001091',\n            expiryDate: {month: 5, year: 2035},\n            billingAddress: {\n              address1: '221B Baker Street',\n              address2: 'Marylebone',\n              address3: 'Westminster',\n              postalCode: 'SW1 1AA',\n              city: 'London',\n              state: 'Greater London',\n              countryCode: 'GB'\n            },\n            cvc: '123'\n          },\n          threeDS: {\n            type: 'integrated',\n            mode: 'always',\n            exemptionOnOutage: true,\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              browserScreenWidth: 900,\n              browserScreenHeight: 1200,\n              browserJavaEnabled: true,\n              browserColorDepth: '32',\n              timeZone: '300',\n              browserJavascriptEnabled: true,\n              channel: 'browser'\n            },\n            challenge: {\n              returnUrl: 'http://payment.example.com',\n              preference: 'noPreference'\n            }\n          },\n          customer: {\n            email: 'john.appleseed@example.com',\n            phone: '00000000000',\n            ipAddress: '192.168.0.1'\n          },\n          narrative: {line1: 'trading name'},\n          value: {\n            currency: 'GBP',\n            amount: 42\n          }\n        }\n      })\n    }\n  );\n\n  const data = await resp.json();\n  console.log(data);\n}\n\nrun();"},{"lang":"go","title":"Go","source":"package main\n\nimport (\n  \"fmt\"\n  \"bytes\"\n  \"net/http\"\n  \"io/ioutil\"\n)\n\nfunc main() {\n  reqUrl := \"https://try.access.worldpay-bsh.securedataplatform.co.uk/api/payments\"\n  var data = []byte(`{\n    \"transactionReference\": \"Memory265-13/08/1876\",\n    \"orderReference\": \"order-12345\",\n    \"merchant\": {\n      \"entity\": \"default\"\n    },\n    \"instruction\": {\n      \"method\": \"card\",\n      \"paymentInstrument\": {\n        \"type\": \"plain\",\n        \"cardHolderName\": \"Sherlock Holmes\",\n        \"cardNumber\": \"4000000000001091\",\n        \"expiryDate\": {\n          \"month\": 5,\n          \"year\": 2035\n        },\n        \"billingAddress\": {\n          \"address1\": \"221B Baker Street\",\n          \"address2\": \"Marylebone\",\n          \"address3\": \"Westminster\",\n          \"postalCode\": \"SW1 1AA\",\n          \"city\": \"London\",\n          \"state\": \"Greater London\",\n          \"countryCode\": \"GB\"\n        },\n        \"cvc\": \"123\"\n      },\n      \"threeDS\": {\n        \"type\": \"integrated\",\n        \"mode\": \"always\",\n        \"exemptionOnOutage\": true,\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          \"browserScreenWidth\": 900,\n          \"browserScreenHeight\": 1200,\n          \"browserJavaEnabled\": true,\n          \"browserColorDepth\": \"32\",\n          \"timeZone\": \"300\",\n          \"browserJavascriptEnabled\": true,\n          \"channel\": \"browser\"\n        },\n        \"challenge\": {\n          \"returnUrl\": \"http://payment.example.com\",\n          \"preference\": \"noPreference\"\n        }\n      },\n      \"customer\": {\n        \"email\": \"john.appleseed@example.com\",\n        \"phone\": \"00000000000\",\n        \"ipAddress\": \"192.168.0.1\"\n      },\n      \"narrative\": {\n        \"line1\": \"trading name\"\n      },\n      \"value\": {\n        \"currency\": \"GBP\",\n        \"amount\": 42\n      }\n    }\n  }`)\n  req, err := http.NewRequest(\"POST\", reqUrl, bytes.NewBuffer(data))\n  if err != nil {\n    panic(err)\n  }\n  req.Header.Add(\"Content-Type\", \"application/json\")\n  req.Header.Add(\"WP-Api-Version\", \"2024-06-01\")\n  res, err := http.DefaultClient.Do(req)\n  if err != nil {\n    panic(err)\n  }\n  defer res.Body.Close()\n  body, err := ioutil.ReadAll(res.Body)\n  if err != nil {\n    panic(err)\n  }\n\n  fmt.Println(res)\n  fmt.Println(string(body))\n}"},{"lang":"php","title":"PHP","source":"/**\n * Requires libcurl\n */\n\n$curl = curl_init();\n\n$payload = array(\n  \"transactionReference\" => \"Memory265-13/08/1876\",\n  \"orderReference\" => \"order-12345\",\n  \"merchant\" => array(\n    \"entity\" => \"default\"\n  ),\n  \"instruction\" => array(\n    \"method\" => \"card\",\n    \"paymentInstrument\" => array(\n      \"type\" => \"plain\",\n      \"cardHolderName\" => \"Sherlock Holmes\",\n      \"cardNumber\" => \"4000000000001091\",\n      \"expiryDate\" => array(\n        \"month\" => 5,\n        \"year\" => 2035\n      ),\n      \"billingAddress\" => array(\n        \"address1\" => \"221B Baker Street\",\n        \"address2\" => \"Marylebone\",\n        \"address3\" => \"Westminster\",\n        \"postalCode\" => \"SW1 1AA\",\n        \"city\" => \"London\",\n        \"state\" => \"Greater London\",\n        \"countryCode\" => \"GB\"\n      ),\n      \"cvc\" => \"123\"\n    ),\n    \"threeDS\" => array(\n      \"type\" => \"integrated\",\n      \"mode\" => \"always\",\n      \"exemptionOnOutage\" => true,\n      \"deviceData\" => array(\n        \"acceptHeader\" => \"text/html\",\n        \"userAgentHeader\" => \"Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:47.0)\",\n        \"browserLanguage\" => \"en-GB\",\n        \"browserScreenWidth\" => 900,\n        \"browserScreenHeight\" => 1200,\n        \"browserJavaEnabled\" => true,\n        \"browserColorDepth\" => \"32\",\n        \"timeZone\" => \"300\",\n        \"browserJavascriptEnabled\" => true,\n        \"channel\" => \"browser\"\n      ),\n      \"challenge\" => array(\n        \"returnUrl\" => \"http://payment.example.com\",\n        \"preference\" => \"noPreference\"\n      )\n    ),\n    \"customer\" => array(\n      \"email\" => \"john.appleseed@example.com\",\n      \"phone\" => \"00000000000\",\n      \"ipAddress\" => \"192.168.0.1\"\n    ),\n    \"narrative\" => array(\n      \"line1\" => \"trading name\"\n    ),\n    \"value\" => array(\n      \"currency\" => \"GBP\",\n      \"amount\" => 42\n    )\n  )\n);\n\ncurl_setopt_array($curl, [\n  CURLOPT_HTTPHEADER => [\n    \"Content-Type: application/json\",\n    \"WP-Api-Version: 2024-06-01\"\n  ],\n  CURLOPT_POSTFIELDS => json_encode($payload),\n  CURLOPT_URL => \"https://try.access.worldpay-bsh.securedataplatform.co.uk/api/payments\",\n  CURLOPT_RETURNTRANSFER => true,\n  CURLOPT_CUSTOMREQUEST => \"POST\",\n]);\n\n$response = curl_exec($curl);\n$error = curl_error($curl);\n\ncurl_close($curl);\n\nif ($error) {\n  echo \"cURL Error #:\" . $error;\n} else {\n  echo $response;\n}"},{"lang":"ruby","title":"Ruby","source":"require 'json'\nrequire 'uri'\nrequire 'net/http'\nrequire 'openssl'\n\nurl = URI('https://try.access.worldpay-bsh.securedataplatform.co.uk/api/payments')\n\nhttp = Net::HTTP.new(url.host, url.port)\nhttp.use_ssl = true\n\nrequest = Net::HTTP::Post.new(url)\nrequest['Content-Type'] = 'application/json'\nrequest['WP-Api-Version'] = '2024-06-01'\nrequest.body = {\n  transactionReference: 'Memory265-13/08/1876',\n  orderReference: 'order-12345',\n  merchant: {entity: 'default'},\n  instruction: {\n    method: 'card',\n    paymentInstrument: {\n      type: 'plain',\n      cardHolderName: 'Sherlock Holmes',\n      cardNumber: '4000000000001091',\n      expiryDate: {month: 5, year: 2035},\n      billingAddress: {\n        address1: '221B Baker Street',\n        address2: 'Marylebone',\n        address3: 'Westminster',\n        postalCode: 'SW1 1AA',\n        city: 'London',\n        state: 'Greater London',\n        countryCode: 'GB'\n      },\n      cvc: '123'\n    },\n    threeDS: {\n      type: 'integrated',\n      mode: 'always',\n      exemptionOnOutage: true,\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        browserScreenWidth: 900,\n        browserScreenHeight: 1200,\n        browserJavaEnabled: true,\n        browserColorDepth: '32',\n        timeZone: '300',\n        browserJavascriptEnabled: true,\n        channel: 'browser'\n      },\n      challenge: {\n        returnUrl: 'http://payment.example.com',\n        preference: 'noPreference'\n      }\n    },\n    customer: {\n      email: 'john.appleseed@example.com',\n      phone: '00000000000',\n      ipAddress: '192.168.0.1'\n    },\n    narrative: {line1: 'trading name'},\n    value: {\n      currency: 'GBP',\n      amount: 42\n    }\n  }\n}.to_json\n\nresponse = http.request(request)\nputs response.read_body\n"},{"lang":"csharp","title":"C#","source":"using System;\nusing System.Net.Http;\nusing System.Threading.Tasks;\nusing System.Text;\nusing System.Text.Json;\n\npublic class Program\n{\n  public static async Task Main()\n  {\n    System.Net.Http.HttpClient client = new()\n    {\n      DefaultRequestHeaders =\n      {\n        {\"WP-Api-Version\", \"2024-06-01\"},\n      }\n    };\n\n    string json = JsonSerializer.Serialize(new\n    {\n      transactionReference = \"Memory265-13/08/1876\",\n      orderReference = \"order-12345\",\n      merchant = new {\n        entity = \"default\"\n      },\n      instruction = new {\n        method = \"card\",\n        paymentInstrument = new {\n          type = \"plain\",\n          cardHolderName = \"Sherlock Holmes\",\n          cardNumber = \"4000000000001091\",\n          expiryDate = new {\n            month = \"5\",\n            year = \"2035\"\n          },\n          billingAddress = new {\n            address1 = \"221B Baker Street\",\n            address2 = \"Marylebone\",\n            address3 = \"Westminster\",\n            postalCode = \"SW1 1AA\",\n            city = \"London\",\n            state = \"Greater London\",\n            countryCode = \"GB\"\n          },\n          cvc = \"123\"\n        },\n        threeDS = new {\n          type = \"integrated\",\n          mode = \"always\",\n          exemptionOnOutage = \"true\",\n          deviceData = new {\n            acceptHeader = \"text/html\",\n            userAgentHeader = \"Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:47.0)\",\n            browserLanguage = \"en-GB\",\n            browserScreenWidth = \"900\",\n            browserScreenHeight = \"1200\",\n            browserJavaEnabled = \"true\",\n            browserColorDepth = \"32\",\n            timeZone = \"300\",\n            browserJavascriptEnabled = \"true\",\n            channel = \"browser\"\n          },\n          challenge = new {\n            returnUrl = \"http://payment.example.com\",\n            preference = \"noPreference\"\n          }\n        },\n        customer = new {\n          email = \"john.appleseed@example.com\",\n          phone = \"00000000000\",\n          ipAddress = \"192.168.0.1\"\n        },\n        narrative = new {\n          line1 = \"trading name\"\n        },\n        value = new {\n          currency = \"GBP\",\n          amount = \"42\"\n        }\n      }\n    });\n\n    using StringContent postData = new(json, Encoding.UTF8, \"application/json\");\n    using HttpResponseMessage request = await client.PostAsync(\"https://try.access.worldpay-bsh.securedataplatform.co.uk/api/payments\", postData);\n    string response = await request.Content.ReadAsStringAsync();\n\n    Console.WriteLine(response);\n  }\n}"}]},"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-bsh.securedataplatform.co.uk/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":"TabItemFragment","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":"TabItemFragment","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":"TabItemFragment","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":"TabItemFragment","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-bsh.securedataplatform.co.uk/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-bsh.securedataplatform.co.uk/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":"TabItemFragment","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":"TabItemFragment","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":"TabItemFragment","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":"TabItemFragment","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-bsh.securedataplatform.co.uk/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":"TabItemFragment","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":"TabItemFragment","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":"TabItemFragment","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":"TabItemFragment","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-18T14:45:51.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/products/payments/enable-features/3ds-authentication/integrated-3ds/react-native","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}