Checkout 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.

Requirements

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 are 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:

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.

Use the 3D Secure 2 Component

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.

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

  1. 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.
  1. 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

See also