Install 3DS SDK

On iOS

Adding 3D Secure to iOS via React Native requires the addition of the Primer3DS Cocoapod dependency.

Open Podfile inside the ./ios directory of your React Native project. Then add the following:

123456789101112131415161718192021

target 'MyApp' do   # add the pod  pod 'Primer3DS'   # if you don't use use_frameworks! add the snippet below  post_install do |installer|    installer.pods_project.targets.each do |target|      if target.name == "primer-io-react-native" || target.name == "PrimerSDK"        target.build_configurations.each do |config|          config.build_settings['FRAMEWORK_SEARCH_PATHS'] = "$(inherited) ${PODS_CONFIGURATION_BUILD_DIR}/Primer3DS"          config.build_settings['LIBRARY_SEARCH_PATHS'] = "$(inherited) ${PODS_CONFIGURATION_BUILD_DIR}/Primer3DS"          config.build_settings['SWIFT_INCLUDE_PATHS'] = "$(inherited) ${PODS_CONFIGURATION_BUILD_DIR}/Primer3DS"          config.build_settings['OTHER_SWIFT_FLAGS'] = '$(inherited) -Xcc -fmodule-map-file="${PODS_CONFIGURATION_BUILD_DIR}/Primer3DS/Primer3DS.modulemap"'          config.build_settings['OTHER_LDFLAGS'] = '$(inherited) -weak_library -l"Primer3DS"'        end      end    end  end end

On Android

3D Secure on Android requires the addition of the io.primer:3ds-android library to your project.

1. 1

   Navigate to the ./android directory in your React Native project.

2. 2

   Add the URL to the Primer 3DS artifactory to ./gradle.properties.

   1

   PRIMER_ANDROID_ARTIFACTORY_URL=https://primer.jfrog.io/artifactory/primer-android/

   kotlin

   copy
3. 3

   Amend the repositories section of ./app/build.gradle to include the artifactory location

   1234567

   repositories {        /* Other repositories... */     maven {        url "${PRIMER_ANDROID_ARTIFACTORY_URL}"    }}

   kotlin

   copy
4. 4

   Finally, amend the dependencies section of your app's build.gradle to include the 3ds-android library. Paste this code, make sure to replace supported-3ds-sdk-version with the right value. See the table below to get the correct one:

   12345

   dependencies {  /* Other dependencies... */   implementation "io.primer:3ds-android:{supported-3ds-sdk-version}"}

   bash

   copy

Interoperability matrix

Primer SDK internally uses Primer 3DS SDK as a compile time dependency. In order for the SDKs to work properly, the versions used internally and the one imported to your code must match.

Here is a breakdown of supported interoperable versions:

Handle Out-of-Band (OOB) redirects (Optional)

Starting from 3D Secure protocol version 2.2.0, you can enhance the user experience by implementing an automatic redirect from another (authentication) application during an OOB challenge to your application once the challenge is successfully completed. This feature allows for a seamless transition and improved user flow.

To enable this feature, ensure that you include the threeDsAppRequestorUrl parameter when configuring the threeDsOptions property of your settings for each platform.

Please note that the ios.threeDsAppRequestorUrl value must be an iOS Universal Link and the android.threeDsAppRequestorUrl value must be an Android App Link in order to facilitate the redirection.

To configure the Universal Link correctly using Universal Checkout, follow these steps:

1. 1

   Pass your iOS Universal Link (e.g. https://{UNIVERSAL_LINK}) as threeDsAppRequestorUrl, and your Android App Link (e.g. https://{yourdomain.com}/3ds) in the threeDsOptions object of your settings.

   1234567891011121314

   const settings: PrimerSettings = {  // ...  paymentMethodOptions: {    threeDsOptions: {      iOS?: {        threeDsAppRequestorUrl?: string;      }      android?: {        threeDsAppRequestorUrl?: string;      }    },    // ...  }}

   tsx

   copy
2. 2

   Follow Step 2 & 3 from the iOS guide.

3. 3

   Follow Steps 1 to 3 from the Android guide.

Execute 3D Secure

Universal Checkout drop-in and headless automatically render the 3DS challenge when required by your workflow.

If this application is not installed from a trusted source (e.g. a debug version, not installed from store, or used on an emulator), try to set PrimerDebugOptions.is3DSSanityCheckEnabled to false. Otherwise 3D Secure library initialization will fail due to security checks being performed.

123456

const settings: PrimerSettings = {    // ...    debugOptions: {        is3DSSanityCheckEnabled: true,    },}