3D Secure 2 Component

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

{
  "resultCode":"IdentifyShopper",
  "action":{
    "paymentData":"Ab02b4c0!BQABAgCuZFJrQOjSsl\/zt+...",
    "paymentMethodType":"scheme",
    "token":"eyJ0aHJlZURTTWV0aG9kTm90aWZpY...",
    "type":"threeDS2Fingerprint"
  },
  "authentication":{
    "threeds2.fingerprintToken":"eyJ0aHJlZURTTWV0aG9kTm90aWZpY..."
  },
  ...
}

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

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

{
  "resultCode":"IdentifyShopper",
  "action":{
    "{hint: Store this on your server.}paymentData{/hint}":"Ab02b4c0!BQABAgCuZFJrQOjSsl\/zt+...",
    "paymentMethodType":"scheme",
    "token":"eyJ0aHJlZURTTWV0aG9kTm90aWZpY...",
    "type":"threeDS2Fingerprint"
  },
  "authentication":{
    "threeds2.fingerprintToken":"eyJ0aHJlZURTTWV0aG9kTm90aWZpY..."
  },
  ...
}

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:

   val adyen3DS2Configuration = Adyen3DS2Configuration.Builder(context, "YOUR_CLIENT_KEY")
   .setEnvironment(Environment.TEST)
   .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.
   https://docs.adyen.com/online-payments/3d-secure/native-3ds2/android-component#details-request-component-3ds

   • curl
   • Ruby
   • Java
   • PHP
   • Python
   • C#
   • NodeJS

   curl Ruby Java PHP Python C# NodeJS

   curl https://checkout-test.adyen.com/v68/payments/details \
   -H "x-API-key: YOUR_X-API-KEY" \
   -H "content-type: application/json" \
   -d '{hint:object passed from the front end or client app}STATE_DATA{/hint}'

   require 'adyen-ruby-api-library'
   
   # Set your X-API-KEY with the API key from the Customer Area.
   adyen = Adyen::Client.new
   adyen.env = :test
   adyen.api_key = "YOUR_X-API-KEY"
   
   # STATE_DATA is an object passed from the front end or client app, deserialized from JSON to a data structure.
   request = STATE_DATA 
   response = adyen.checkout.payments.details(request)  
   
   # Check if further action is needed.
   if response.body.has_key(:action)
      # Pass the action object to your frontend
      puts response.body[:action]
   else
      # No further action needed, pass the resultCode to your frontend
      puts response.body[:resultCode]
   end

   // Set your X-API-KEY with the API key from the Customer Area.
   String xApiKey = "YOUR_X-API-KEY";
   Client client = new Client(xApiKey,Environment.TEST);
   Checkout checkout = new Checkout(client);
   // STATE_DATA is an object passed from the front end or client app, deserialized from JSON to a data structure.
   PaymentsDetailsRequest paymentsDetailsRequest = STATE_DATA;
   PaymentsResponse paymentsDetailsResponse = checkout.paymentsDetails(paymentsDetailsRequest);

   // Set your X-API-KEY with the API key from the Customer Area.
   $client = new \Adyen\Client();
   $client->setEnvironment(\Adyen\Environment::TEST);
   $client->setXApiKey("YOUR_X-API-KEY");
   $service = new \Adyen\Service\Checkout($client);
   
   // STATE_DATA is an object passed from the front end or client app, deserialized from JSON to a data structure.
   $params = STATE_DATA;
   $result = $service->paymentsDetails($params);
   
   // Check if further action is needed
   if (array_key_exists("action", $result)){
      // Pass the action object to your frontend.
      // $result["action"]
   }
   else {
      // No further action needed, pass the resultCode to your front end
      // $result['resultCode']
   }

   # Set your X-API-KEY with the API key from the Customer Area.
   adyen = Adyen.Adyen()
   adyen.payment.client.platform = "test"
   adyen.client.xapikey = 'YOUR_X-API-KEY'
   
   # STATE_DATA is an object passed from the front end or client app, deserialized from JSON to a data structure.
   request = STATE_DATA
   result = adyen.checkout.payments_details(request)
   
   # Check if further action is needed.
   if 'action' in result.message:
      # Pass the action object to your front end
      # result.message['action']
   else:
      # No further action needed, pass the resultCode to your front end
      # result.message['resultCode']

   // Set your X-API-KEY with the API key from the Customer Area.
   string apiKey = "YOUR_X-API-KEY";
   var client = new Client (apiKey, Environment.Test);
   var checkout = new Checkout(client);
   // STATE_DATA is an object passed from the front end or client app, deserialized from JSON to a data structure.
   var paymentsDetailsRequest = STATE_DATA;
   var paymentsDetailsResponse = checkout.PaymentsDetails(paymentsDetailsRequest);

   const {Client, Config, CheckoutAPI} = require('@adyen/api-library');
   const config = new Config();
   // Set your X-API-KEY with the API key from the Customer Area.
   config.apiKey = '[YOUR_X-API-KEY]';
   const client = new Client({ config });
   client.setEnvironment("TEST");
   const checkout = new CheckoutAPI(client);
   // STATE_DATA is an object passed from the front end or client app, deserialized from JSON to a data structure.
   checkout.paymentsDetails(STATE_DATA).then(res => res);
7. 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.

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:

   val adyen3DS2Configuration = Adyen3DS2Configuration.Builder(context, "YOUR_CLIENT_KEY")
   .setEnvironment(Environment.TEST)
   .build()

3. Initialize the 3D Secure 2 Component.

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

4. Provide the action object from the /payments (or /payments/details) response.

   threedsComponent.handleAction(this@YourActivity, action)

5. 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`
   })

6. 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.
   https://docs.adyen.com/online-payments/3d-secure/native-3ds2/android-component#details-request-component-v66

   • curl
   • Ruby
   • Java
   • PHP
   • Python
   • C#
   • NodeJS
   • Go

   curl Ruby Java PHP Python C# NodeJS Go

   curl https://checkout-test.adyen.com/v66/payments/details \
   -H "x-API-key: YOUR_X-API-KEY" \
   -H "content-type: application/json" \
   -d '{hint:object passed from the front end or client app}STATE_DATA{/hint}'

   require 'adyen-ruby-api-library'
   
   # Set your X-API-KEY with the API key from the Customer Area.
   adyen = Adyen::Client.new
   adyen.env = :test
   adyen.api_key = "YOUR_X-API-KEY"
   
   # STATE_DATA is an object passed from the front end or client app, deserialized from JSON to a data structure.
   request = STATE_DATA 
   response = adyen.checkout.payments.details(request)  
   
   # Check if further action is needed.
   if response.body.has_key(:action)
      # Pass the action object to your frontend
      puts response.body[:action]
   else
      # No further action needed, pass the resultCode to your frontend
      puts response.body[:resultCode]
   end

   // Set your X-API-KEY with the API key from the Customer Area.
   String xApiKey = "YOUR_X-API-KEY";
   Client client = new Client(xApiKey,Environment.TEST);
   Checkout checkout = new Checkout(client);
   // STATE_DATA is an object passed from the front end or client app, deserialized from JSON to a data structure.
   PaymentsDetailsRequest paymentsDetailsRequest = STATE_DATA;
   PaymentsResponse paymentsDetailsResponse = checkout.paymentsDetails(paymentsDetailsRequest);

   // Set your X-API-KEY with the API key from the Customer Area.
   $client = new \Adyen\Client();
   $client->setEnvironment(\Adyen\Environment::TEST);
   $client->setXApiKey("YOUR_X-API-KEY");
   $service = new \Adyen\Service\Checkout($client);
   
   // STATE_DATA is an object passed from the front end or client app, deserialized from JSON to a data structure.
   $params = STATE_DATA;
   $result = $service->paymentsDetails($params);
   
   // Check if further action is needed
   if (array_key_exists("action", $result)){
      // Pass the action object to your frontend.
      // $result["action"]
   }
   else {
      // No further action needed, pass the resultCode to your front end
      // $result['resultCode']
   }

   # Set your X-API-KEY with the API key from the Customer Area.
   adyen = Adyen.Adyen()
   adyen.payment.client.platform = "test"
   adyen.client.xapikey = 'YOUR_X-API-KEY'
   
   # STATE_DATA is an object passed from the front end or client app, deserialized from JSON to a data structure.
   request = STATE_DATA
   result = adyen.checkout.payments_details(request)
   
   # Check if further action is needed.
   if 'action' in result.message:
      # Pass the action object to your front end
      # result.message['action']
   else:
      # No further action needed, pass the resultCode to your front end
      # result.message['resultCode']

   // Set your X-API-KEY with the API key from the Customer Area.
   string apiKey = "YOUR_X-API-KEY";
   var client = new Client (apiKey, Environment.Test);
   var checkout = new Checkout(client);
   // STATE_DATA is an object passed from the front end or client app, deserialized from JSON to a data structure.
   var paymentsDetailsRequest = STATE_DATA;
   var paymentsDetailsResponse = checkout.PaymentsDetails(paymentsDetailsRequest);

   const {Client, Config, CheckoutAPI} = require('@adyen/api-library');
   const config = new Config();
   // Set your X-API-KEY with the API key from the Customer Area.
   config.apiKey = '[YOUR_X-API-KEY]';
   const client = new Client({ config });
   client.setEnvironment("TEST");
   const checkout = new CheckoutAPI(client);
   // STATE_DATA is an object passed from the front end or client app, deserialized from JSON to a data structure.
   checkout.paymentsDetails(STATE_DATA).then(res => res);

   import (
       "github.com/adyen/adyen-go-api-library/v5/src/checkout"
       "github.com/adyen/adyen-go-api-library/v5/src/common"
       "github.com/adyen/adyen-go-api-library/v5/src/adyen"
   )
   // Set your X-API-KEY with the API key from the Customer Area.
   client := adyen.NewClient(&common.Config{
       Environment: common.TestEnv,
       ApiKey:      "[YOUR_X-API-KEY]",
   })
   // STATE_DATA is an object passed from the front end or client app, deserialized from JSON to a data structure.
   req := STATE_DATA;
   res, httpRes, err := client.Checkout.PaymentsDetails(&req)

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