3D Secure is a card industry authentication protocol for online payments, providing an extra layer of security for merchants selling online. Customers are sent through the card issuing bank's verification service when making a payment, before proceeding with the authorization request.

Prerequisites

Ensure you follow the steps below to enable your Universal Checkout integration to leverage 3DS:

📞
Contact your Primer representative to configure 3DS on your Primer account.
🔨
Setup a workflow with 3DS on your Dashboard.

Integration

This guide shows how to prepare the React Native SDK to perform 3DS challenges.

iOS

Adding 3DS to iOS 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
ruby
copy

Android

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

To add this, first navigate to the ./android directory in your React Native project.

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

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

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

Finally, amend the dependencies section of the same build.gradle file to include the 3ds-android library.

12345
dependencies {    /* Other dependencies... */     implementation "io.primer:3ds-android:1.1.0"}
kotlin
copy

React Native

Before testing 3DS, ensure that you’re passing the following options when initializing the SDK:

123456789101112131415
const settings: PrimerSettings = {    // ...     paymentMethodOptions: {        // ...         cardPaymentOptions: {            // Add this if you want to perform 3DS on vaulting            is3DSOnVaultingEnabled: false,        },    },    debugOptions: {        is3DSSanityCheckEnabled: true,    },}
typescript
copy
Remember to revert `is3DSDevelopmentModeEnabled` to false once moving your integration to a production environment.

Test in sandbox

Use the following card number to trigger a 3DS challenge on the SDK with the workflow:
9120 0000 0000 0006

Click to copy

Please see our guidelines for iOS and Android.