No momento, esta página não está disponível em português
Online-payment icon

3D Secure 2 Component 4.x.x integration

Add native 3D Secure 2 authentication to your integration.

Our 3D Secure 2 Component handles the 3D Secure 2 device fingerprinting and challenge flows, including the data exchange between your front end and the issuer's Access Control Server (ACS).

When adding native 3D Secure 2 authentication to your integration:

  1. Collect the cardholder name in your payment form.
  2. Provide additional parameters when making a payment request.
  3. Use the 3D Secure 2 Component to perform the authentication flow.
  4. If the payment was routed to 3D Secure 2 redirect flow, use the 3D Secure 2 Component to handle the redirect.

Use v4.9.1 or later of Android Components to trigger the native 3D Secure 2 flow and ensure best performance. We recommend you always use the latest Components version.

Before you begin

Before starting your integration, make sure that you have integrated our Card Component, or built your own UI for collecting shopper's card details.

Collect additional parameters in your payment form

For higher authentication rates, we strongly recommend that you collect the cardholder name, the shopper billing address and email address in advance in your payment form. Deliver these parameters to your backend when making a payment as they are required by the card schemes.

Configure the Card Component

If you are using our Card Component, set holderNameRequired to true when creating a CardConfiguration object:

val cardConfiguration = CardConfiguration.Builder(context, "YOUR_CLIENT_KEY")
    .setHolderNameRequired(true)
    // When you're ready to accept live payments, change the value to one of our live environments.
    .setEnvironment(Environment.TEST)
    .build()

Make a payment

From your server, make a /payments request, specifying:

Parameter name Required Description
paymentMethod -white_check_mark- If using the Card Component, pass the paymentComponentState.data.paymentMethod object from your client app. If submitting raw card data, refer to Raw card data for the fields that you need to pass.
paymentMethod.holderName Required for Visa The cardholder's name. Required for Visa.
paymentMethod.threeDS2SdkVersion -white_check_mark- Required to trigger in-app native. See how to get the SDK version.
channel -white_check_mark- Set to Android.
authenticationData.threeDSRequestData.nativeThreeDS -white_check_mark- Set to preferred. Indicates that your payment page can handle 3D Secure 2 transactions natively.
returnUrl -white_check_mark- Used to redirect the shopper back to a webpage for redirect and other payment flows. If you want to redirect the shopper to your app, configure a threeDSRequestorAppURL.
billingAddress The cardholder's billing address.
shopperEmail Required for Visa The cardholder's email address. shopperEmail or a phone number is required for Visa.
threeDS2requestData.homePhone,
threeDS2RequestData.workPhone or
threeDS2RequestData.mobilePhone
Required for Visa A phone number for the shopper. shopperEmail or a phone number is required for Visa.

Get the SDK version

Use the ThreeDS2Service.INSTANCE.getSDKVersion() function to determine your 3D Secure 2 sdkVersion. You can also get the sdkVersion from Github.

To increase the likelihood of achieving a frictionless flow and higher authorisation rates, we recommend that you send additional parameters if you have the data available. Do not send placeholder data in the live environment.

For channel Android, we recommend including these additional parameters: billingAddress, shopperEmail, and shopperIP.

Your next steps depend on whether the /payments response contains an action object, and on the action.type.

action.type Description Next steps
No action object The transaction was either exempted or out-of-scope for 3D Secure 2 authentication. Use the resultCode to present the payment result to your shopper.
threeDS2 The payment qualifies for 3D Secure 2, and will go through the authentication flow. 1. Pass the action object to your client app.
2. Use the 3D Secure 2 Component to perform the authentication flow.
redirect The payment is routed to the 3D Secure 2 redirect flow.
1. Pass the action object to your client app.
2. Use the 3D Secure 2 Component to handle the redirect.

The following example shows a /payments response with action.type: threeDS2

Use the 3D Secure 2 Component

If the /payments response contains an action object with action.type: threeDS2, use the 3D Secure 2 Component to perform the required authentication flow.

  1. Import the 3D Secure 2 Component to your build.gradle file.

    implementation "com.adyen.checkout:3ds2:<latest-version>"

    Check the latest version on GitHub.

  2. Create a configuration object for the Adyen3DS2Component, passing your client key. You can add a threeDSRequestorAppURL here:

    val adyen3DS2Configuration = Adyen3DS2Configuration.Builder(context, "YOUR_CLIENT_KEY")
    .setEnvironment(Environment.TEST)
    .setThreeDSRequestorAppURL("https://{yourapp.com}/adyen3ds2") // Optional, add a universal link here when you want to send a threeDSRequestorAppURL
    .build()
  3. Initialize the 3D Secure 2 Component, passing the configuration object created in the previous step:

    val threedsComponent = Adyen3DS2Component.PROVIDER.get(this@YourActivity, application, adyen3DS2Configuration)
  4. Provide the action object from the /payments response.

    threedsComponent.handleAction(this@YourActivity, action)
  5. The Component notifies the observer with the actionComponentData.details. Pass this to your server.

    threedsComponent.observe(this) { actionComponentData ->
        // Send a /payments/details/ call containing the `actionComponentData`
        sendPaymentDetails(actionComponentData)
    }
  6. From your server, make a /payments/details request, specifying:

    • details: The actionComponentData.details from your client app.
  7. Use the resultCode from the /payments response to present the payment result to your shopper.

Handle the redirect

If the payment was routed to 3D Secure 2 redirect flow, use the 3D Secure 2 Component to handle the redirect:

  1. Add an IntentFilter to the Activity that will handle the returnUrl specified in your /payments request.

    <activity
      android:name=".YourActivity">
        <intent-filter>
           <action android:name="android.intent.action.VIEW"/>
           <category android:name="android.intent.category.DEFAULT"/>
           <category android:name="android.intent.category.BROWSABLE"/>
           <data android:host="${applicationId}" android:scheme="adyencheckout"/>
        </intent-filter>
    </activity>

    The ${applicationId} will be replaced with your.package.name at build time.

  2. Get the result of the redirect from the Activity. Pass the intent back to the Component. Depending on your activity's launchMode, you can get this intent in either onCreate or onNewIntent.

    private fun handleIntent(intent: Intent?) {
      val data = intent?.data
      if (data != null && data.toString().startsWith(RedirectUtil.REDIRECT_RESULT_SCHEME)) {
        threedsComponent.handleIntent(intent)
      }
    }
  3. The Component notifies the observer with the actionComponentData object from the data in intent.data. Pass this to your server.

    threedsComponent.observe(this) { actionComponentData ->
      // Send a /payments/details/ call containing the `actionComponentData`
      sendPaymentDetails(actionComponentData)
    }

Present the payment result

Use the  resultCode from the /payments or /payments/details response to present the payment result to your shopper. You will also receive the outcome of the payment asynchronously in a webhook.

For card payments, you can receive the following resultCode values:

resultCode Description Action to take
Authorised The payment was successful. Inform the shopper that the payment has been successful.
If you are using manual capture, you also need to capture the payment.
Cancelled The shopper cancelled the payment. Ask the shopper if they want to continue with the order, or ask them to select a different payment method.
Error There was an error when the payment was being processed. For more information, check the refusalReason field. Inform the shopper that there was an error processing their payment.
Refused The payment was refused. For more information, check the refusalReason field. Ask the shopper to try the payment again using a different payment method.

Customizing the UI for 3D Secure 2

The 3D Secure 2 Component inherits your app's theme to ensure the UI of the challenge flow fits your app's look and feel. You can override the default theme to inherit from one of AppCompat's theme variants. To do this, add the following XML snippet to your styles.xml file.

<style name="ThreeDS2Theme" parent="Theme.MaterialComponents.Light.Bridge">
    <!-- Customize the SDK theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

Test and go live

Use our test card numbers to test how your integration handles different 3D Secure authentication scenarios.

Troubleshooting

If native 3D Secure 2 is not triggered, check that:

  • Your Component version is 4.9.1 or later
  • paymentMethod.threeDS2SdkVersion is populated and sent in payment request
  • channel is set to Android
  • authenticationData.threeDSRequestData.nativeThreeDS is set to preferred if you use Checkout API v69 or later OR additionalData.allow3DS2 is set to true if you use Checkout API v68 or earlier

See also