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:

Collect the cardholder name in your payment form.
Provide additional parameters when making a payment request.
Use the 3D Secure 2 Component to perform the authentication flow.
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		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.
paymentMethod.threeDS2SdkVersion		Required to trigger in-app native. See how to get the SDK version.
channel		Set to Android.
authenticationData.threeDSRequestData.nativeThreeDS		Set to preferred. Indicates that your payment page can handle 3D Secure 2 transactions natively.
returnUrl		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.

Import the 3D Secure 2 Component to your build.gradle file.
```
implementation "com.adyen.checkout:3ds2:<latest-version>"
```
Check the latest version on GitHub.

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()

Initialize the 3D Secure 2 Component, passing the configuration object created in the previous step:

val threedsComponent = Adyen3DS2Component.PROVIDER.get(this@YourActivity, application, adyen3DS2Configuration)

Provide the action object from the /payments response.

threedsComponent.handleAction(this@YourActivity, action)

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)
}

From your server, make a /payments/details request, specifying:
- details: The actionComponentData.details from your client app.
Use the resultCode from the /payments response to present the payment result to your shopper.

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

Import the 3D Secure 2 Component to your build.gradle file.
```
implementation "com.adyen.checkout:3ds2:<latest-version>"
```
Check the latest version on GitHub.

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()

Initialize the 3D Secure 2 Component.

val threedsComponent = Adyen3DS2Component.PROVIDER.get(this@YourActivity, application, adyen3DS2Configuration)

Provide the action object from the /payments (or /payments/details) response.
```
threedsComponent.handleAction(this@YourActivity, action)
```

The Component notifies the observer with the actionComponentData.details. Pass this to your server.

threedsComponentComponent.observe(this, Observer {
   // Send a /payments/details/ call containing the `actionComponentData.details`
})

From your server, make a /payments/details request, specifying:
- paymentData: The paymentData from the response to your last API request (to either the /payments or the /payments/details endpoint) .
- details: The actionComponentData.details from your client app.

Your next steps depend on whether the /payments/details response contains an action object:

If you receive an action object, store the action.paymentData on your server - you'll need this when making a /payments/details request later.

`action.type`	Description	Next steps
No `action` object	The 3D Secure 2 authentication process has been completed.	Use the `resultCode` from the /payments response to present the payment result to your shopper.
threeDS2Challenge	The issuer requires further shopper interaction and is initiating a challenge flow.	1. Pass the `action` object to your client app. 2. Go back to step 3 to submit the authentication results.

Handle the redirect

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

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

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

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.

The Component notifies the observer with the actionComponentData object from the data in intent.data. Pass this to your server.

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