Search

Are you looking for test card numbers?

Would you like to contact support?

Online-payment icon

Android Components integration guide

Build your checkout form with our Android Components.

We built separate Components per payment method that you can use to render UI and collect your shopper's payment details. For more information on which payment methods have a Component, see list of Components.

If you are new to integrating with Adyen, see our Online payments page for an overview of integration options and available features.

Components is supported from v49 of the /paymentMethods, /payments, and /payments/details endpoints.

See sample code

  Check out Components on GitHub.

Whenever you want to offer a new payment method, you need to add the specific Component on your payments form. The steps for integrating each Component is similar regardless of the payment method.

On this page we talk about both server-side and client-side integration steps:

  1. From your server, submit a request to get a list of payment methods available to the shopper.
  2. Add Components to your payments form.
  3. From your server, submit a payment request with the data returned by the Component.
  4. Determine from the response if you need to perform additional actions on your client app, such as to redirect the shopper to complete the payment.
  5. From your server, submit additional payment details.
  6. Present the payment result to the shopper.

Before you begin

Before you start integrating with our online payments API and Components for Android, make sure that you have performed the following steps:

  1. Sign up for an Adyen test account.
  2. Get your API Key. Save a copy as you need it for API calls you make to the Adyen payments platform.
  3. Install one of our Libraries to connect with the Adyen APIs.
  4. If you're building for multiple merchants, provide some basic information so that we can offer you better support.
  5. Install Components for Android.

Install Android Components

Android Components are available through jcenter.

  1. Import the specific Android Component by adding it to your build.gradle file. Check the payment method page for the specific Component you are adding, or the Action Components section.

    For example, to use the Card Component and the Redirect Component, add the following to your build.gradle file:

    implementation "com.adyen.checkout:card-ui:<latest-version>"
    implementation "com.adyen.checkout:redirect:<latest-version>"

Check the latest version on GitHub. Once you install the Component, you're ready to start building your implementation.

Step 1: Get available payment methods

  1. Make a POST /paymentMethods request, providing:

    • merchantAccount: Your merchant account name.
    • countryCode: The shopper's country.
    • amount: The currency and value of the payment.
    • channel: The platform of the shopper's device. Use Android.

    We use the countryCode, amount, and channel to tailor the list of payment methods to your shopper.

    curl https://checkout-test.adyen.com/v50/paymentMethods \
    -H "x-API-key: YOUR_X-API-KEY" \
    -H "content-type: application/json" \
    -d '{
      "merchantAccount": "YOUR_MERCHANT_ACCOUNT",
      "countryCode": "NL",
      "amount": {
        "currency": "EUR",
        "value": 1000
      },
      "channel": "Android"
    }'
    # Set your X-API-KEY with the API key from the Customer Area.
    adyen = Adyen::Client.new
    adyen.api_key = "YOUR_X-API-KEY"
    
    response = adyen.checkout.payment_methods({
      :merchantAccount => 'YOUR_MERCHANT_ACCOUNT',
      :countryCode => 'NL',
      :amount => {
        :currency => 'EUR',
        :value => 1000
      },
      :channel => 'Android'
    })
    // Set your X-API-KEY with the API key from the Customer Area.
    Client client = new Client(xApiKey,Environment.TEST);
    
    Checkout checkout = new Checkout(client);
    PaymentMethodsRequest paymentMethodsRequest = new PaymentMethodsRequest();
    paymentMethodsRequest.setMerchantAccount("YOUR_MERCHANT_ACCOUNT");
    paymentMethodsRequest.setCountryCode("NL");
    Amount amount = new Amount();
    amount.setCurrency("EUR");
    amount.setValue(1000L);
    paymentMethodsRequest.setAmount(amount);
    paymentMethodsRequest.setChannel(PaymentMethodsRequest.ChannelEnum.Android);
    PaymentMethodsResponse response = checkout.paymentMethods(paymentMethodsRequest);
    // Set your X-API-KEY with the API key from the Customer Area.
    $client = new \Adyen\Client();
    $client->setXApiKey("YOUR_X-API-KEY");
    $service = new \Adyen\Service\Checkout($client);
    
    $params = array(
      "merchantAccount" => "YOUR_MERCHANT_ACCOUNT",
      "countryCode" => "NL",
      "amount" => array(
        "currency" => "EUR",
        "value" => 1000
      ),
      "channel" => "Android"
    );
    $result = $service->paymentMethods($params);
    #Set your X-API-KEY with the API key from the Customer Area.
    adyen = Adyen.Adyen()
    adyen.client.xapikey = 'YOUR_X-API-KEY'
    
    result = adyen.checkout.payment_methods({
      'merchantAccount': 'YOUR_MERCHANT_ACCOUNT',
      'countryCode': 'NL',
      'amount': {
        'value': 1000,
        'currency': 'EUR'
      },
      'channel': 'Android'
    })
    // Set your X-API-KEY with the API key from the Customer Area.
    var client = new Client ("YOUR-X-API-KEY", Environment.Test);
    var checkout = new Checkout(client);
    var amount = new Model.Checkout.Amount("EUR", 1000);
    var paymentMethodsRequest = new Model.Checkout.PaymentMethodsRequest(MerchantAccount: "YOUR_MERCHANT_ACCOUNT")
    {
       CountryCode = "NL",
       Amount = amount,
       Channel = "Android"
    };
    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 = '[API_KEY]';
    config.merchantAccount = '[YOUR_MERCHANT_ACCOUNT]';
    const client = new Client({ config });
    client.setEnvironment("TEST");
    const checkout = new CheckoutAPI(client);
    const paymentsResponse = checkout.paymentMethods({
        amount: {
            currency: "EUR",
            value: 1000,
        },
        countryCode: "NL",
        channel: "Android",
        merchantAccount: config.merchantAccount
    }).then(res => res);

    A list of available paymentMethods is returned in the response, including the required fields if there are any. If you want to know more about the properties returned in the response, see the response parameters on API Explorer.

    {
     "paymentMethods":[
      {
        "details":[...],
        "name":"Credit Card",
        "type":"scheme"
        ...
      },
      {
        "details":[...],
        "name":"SEPA Direct Debit",
        "type":"sepadirectdebit"
      },
      ...
      ]
    }
  2. Pass the response to your client app. You will use this in the next step to present which payment methods are available to the shopper.

Step 2: Add Components to your payment form

  1. Deserialize the /paymentMethods response with the SERIALIZER object.

    val paymentMethodsApiResponse = PaymentMethodsApiResponse.SERIALIZER.deserialize(paymentMethodsResponse)
  2. From the result, get the object containing the payment method type for the Component. For example, to initialize the Card Component, get the object containing paymentMethods.type scheme.

  3. Initialize the Component for the payment method that you'll be accepting. To initialize a Component, you will need the deserialized payment method object, and any other additional required parameters.

    The steps for adding Components are the same for each payment method, however, some may require additional configuration. For information on the required configuration, refer to the payment method integration guides.

    For example, to use the Card Component, you need to provide your Client Side Public Key.

    val cardConfiguration =
          CardConfiguration.Builder(context, "<publicKey>")
          .setEnvironment(Environment.TEST)
           // When you're ready to accept live payments, change the value to one of our live environments.
          .build()
           // Create the configuration for the payment method that you want to add.
    
    val cardComponent = CardComponent.PROVIDER.get(this@YourActivity, paymentMethod, cardConfiguration)
      // Replace CardComponent with the payment method Component that you want to add.
      // See list of Supported payment methods at https://docs.adyen.com/checkout/android/components#supported-payment-methods
  4. Add the Component view to your layout.

    <com.adyen.checkout.card.CardView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"/>
    // Replace card with the Component view that you want to add.
    // See list of Supported payment methods at https://docs.adyen.com/checkout/android/components#supported-payment-methods
  5. Attach the Component to the view to start getting your shopper's payment details.

    cardView.attach(cardComponent, this@YourActivity)
    // Replace CardComponent with the payment method Component that you want to add.
    // See list of Supported payment methods at https://docs.adyen.com/checkout/android/components#supported-payment-methods
  6. When shoppers enter their payment details, you start receiving updates. If isValid is true and the shopper proceeds to pay, pass the paymentComponentState.data.paymentMethod to your server to make the /payments request.

    cardComponent.observe(this@MainActivity, Observer {
        if (it?.isValid == true) {
            // When the shopper proceeds to pay, pass the `it.data` to your server to send a /payments request
        }
        // Replace CardComponent with the payment method Component that you want to add.
        // See list of Supported payment methods at https://docs.adyen.com/checkout/android/components#supported-payment-methods
    })

Step 3: Make a payment

  1. From your server, make a POST /payments request specifying:

    • amount
    • reference: Your unique reference for this payment.
    • paymentMethod: The paymentComponentState.data.paymentMethod from the Component.
    • returnUrl: In case of a redirection, this is the URL to where the Component should redirect the shopper back to after they complete the payment. Get this URL from the Component in the RedirectComponent.getReturnUrl(context).
    • merchantAccount: Your merchant account name.

      Additional parameters are required for some payment methods, native 3D Secure 2 authentication, and recurring payments. For information on the required fields, refer to the payment method integration guides.
      curl https://checkout-test.adyen.com/v51/payments \
      -H "x-API-key: YOUR_X-API-KEY" \
      -H "content-type: application/json" \
      -d '{
        "amount":{
          "currency":"EUR",
          "value":1000
        },
        "reference":"YOUR_ORDER_NUMBER",
        "paymentMethod": {hint:paymentComponentState.data.paymentMethod from app}paymentComponentState.data.paymentMethod{/hint},
        "returnUrl":"adyencheckout://your.package.name",
        "merchantAccount":"YOUR_MERCHANT_ACCOUNT"
      }'
      # 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"
       
      paymentMethod = COMPONENT_DATA_PAYMENTMETHOD
      # Data object passed from paymentComponentState.data.paymentMethod from client app, parsed from JSON to a Hash.
      
      response = adyen.checkout.payments({
        :amount => {
          :currency => "EUR",
          :value => 1000
        },
        :reference => "YOUR_ORDER_NUMBER",
        :paymentMethod => paymentMethod,
        :returnUrl => "https://your-company.com/checkout?shopperOrder=12xy..",
        :merchantAccount => "YOUR_MERCHANT_ACCOUNT"
      })
      
      # Check if further action is needed.
      if response.body.has_key(:action)
         # Pass the action object to your front end
         # response.body[:action]
      else
         # No further action needed, pass the resultCode object to your front end
         # response.body[:resultCode]
      // Set your X-API-KEY with the API key from the Customer Area.
      Client client = new Client(xApiKey,Environment.TEST);
       
      Checkout checkout = new Checkout(client);
      PaymentsRequest paymentsRequest = new PaymentsRequest();
      paymentsRequest.setMerchantAccount("YOUR_MERCHANT_ACCOUNT");
      Amount amount = new Amount();
      amount.setCurrency("EUR");
      amount.setValue(15000L);
      paymentsRequest.setAmount(amount);
      String encryptedCardNumber = "adyenjs_0_1_18$...encryptedCardNumber";
      String encryptedExpiryMonth = "adyenjs_0_1_18$...encryptedExpiryMonth";
      String encryptedExpiryYear = "adyenjs_0_1_18$...encryptedExpiryYear";
      String encryptedSecurityCode = "adyenjs_0_1_18$...encryptedSecurityCode";
      paymentsRequest.setReference("Your order number");
      paymentsRequest.addEncryptedCardData(encryptedCardNumber,encryptedExpiryMonth, encryptedExpiryYear, encryptedSecurityCode, "John Smith");
      paymentsRequest.setReturnUrl("adyencheckout://your.package.name");
      PaymentsResponse paymentsResponse = checkout.payments(paymentsRequest);
      // Set your X-API-KEY with the API key from the Customer Area.
      $client = new \Adyen\Client();
      $client->setXApiKey("YOUR_X-API-KEY");
      $service = new \Adyen\Service\Checkout($client);
      
      $paymentMethod = COMPONENT_DATA_PAYMENTMETHOD;
      // Data object passed from paymentComponentState.data.paymentMethod from client app, parsed from JSON to an array
      
      $params = array(
        "amount" => array(
          "currency" => "EUR",
          "value" => 1000
        ),
        "reference" => "YOUR_ORDER_NUMBER",
        "paymentMethod" => $paymentMethod,
        "returnUrl" => "https://your-company.com/checkout?shopperOrder=12xy..",
        "merchantAccount" => "YOUR_MERCHANT_ACCOUNT"
      );
      
      $result = $service->payments($params);
      
      // Check if further action is needed.
      if (array_key_exists("action", $result){
         // Pass the action object to your front end
         // $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.client.xapikey = 'YOUR_X-API-KEY'
      
      paymentMethod = COMPONENT_DATA_PAYMENTMETHOD
      # Data object passed from paymentComponentState.data.paymentMethod from client app, parsed from JSON to a dictionary
      
      result = adyen.checkout.payments({
         'amount': {
            'value': 1000,
            'currency': 'EUR'
         },
         'reference': 'YOUR_ORDER_NUMBER',
         'paymentMethod': paymentMethod,
         'returnUrl': 'https://your-company.com/checkout?shopperOrder=12xy..',
         'merchantAccount': 'YOUR_MERCHANT_ACCOUNT'
      })
      
      # 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.
      var client = new Client ("YOUR_X-API-KEY", Environment.Test);
      var checkout = new Checkout(client);
      
      var amount = new Model.Checkout.Amount("EUR", 1000);
      var details = new Model.Checkout.DefaultPaymentMethodDetails{
        Type = "scheme",
        EncryptedCardNumber = "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
        EncryptedExpiryMonth = "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
        EncryptedExpiryYear = "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
        EncryptedSecurityCode = "adyenjs_0_1_18$MT6ppy0FAMVMLH..."
      };
      var paymentsRequest = new Model.Checkout.PaymentRequest
      {
        Reference = "YOUR_ORDER_NUMBER",
        Amount = amount,
        ReturnUrl = @"adyencheckout://your.package.name",
        MerchantAccount = "YOUR_MERCHANT_ACCOUNT",
        PaymentMethod = details
      };
      
      var paymentResponse = checkout.Payments(paymentsRequest);
      // Set your X-API-KEY with the API key from the Customer Area.
      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 = '[API_KEY]';
      config.merchantAccount = '[YOUR_MERCHANT_ACCOUNT]';
      const client = new Client({ config });
      client.setEnvironment("TEST");
      const checkout = new CheckoutAPI(client);
      checkout.payments({
          amount: { currency: "EUR", value: 1000 },
          paymentMethod: {COMPONENT_DATA_PAYMENTMETHOD}, // Data object passed from paymentComponentState.data.paymentMethod from client app
          reference: "YOUR_ODRER_NUMBER",
          merchantAccount: config.merchantAccount,
          shopperReference: "shopperReference",
          returnUrl: "https://your-company.com/checkout?shopperOrder=12xy.."
      }).then(res => res);

      Response

    Depending on the payment result, you receive a response containing:

    • resultCode: Provides information about the result of the request.
    • pspReference: Our unique identifier for the transaction.
    • details: This array shows the fields that you need to pass in your next request.
    • action: If you receive this object, this indicates that you need to perform an additional action on your client app to complete the payment. The type field specifies the required action. Possible values are:

      • redirect
      • threeDS2Fingerprint
      • threeDS2Challenge

  2. The next steps depend on if you received an action object in the response.

    • If you received an action object, pass this to your client app and perform step 4. Make sure that you only pass the action object and not the full response.
    • If you did not get an action object, proceed to step 6 to present the payment result to your shopper.

      {
      "pspReference": "88154795347618C",
      "resultCode": "Authorised"
      }
      {
      "resultCode": "RedirectShopper",
      "action": {
       "method": "POST",
       "paymentData": "Ab02b4c0!BQABAgCW5sxB4e/==",
       "paymentMethodType": "scheme",
       "type": "redirect",
       "url": "https://test.adyen.com/hpp/3d/validate.shtml",
       "data": {
         "PaReq": "eNpVUslygkAQ/RXjB8yCgEi1kyJSq..",
         "TermUrl": "https://your-company.com/...",
         "MD": "ejJydDdDeExyVUFrTEFaMTlITCt_..."
       }
      },
      "details": [
      {
       "key": "MD",
       "type": "text"
      },
      {
       "key": "PaRes",
       "type": "text"
      }
      ],
      "paymentData": "Ab02b4c0!BQABAgCW5sxB4e/=="
      }

Step 4: Perform additional actions on your client app

  • The next steps depend on the kind of action that you need to perform. If the action.type is:

Step 5: Submit additional payment details

  1. From your server, make a POST /payments/details request specifying:

    • details: This is the actionComponentData.details from the Component.

      curl https://checkout-test.adyen.com/v51/payments/details \
      -H "x-API-key: YOUR_X-API-KEY" \
      -H "content-type: application/json" \
      -d '{hint:actionComponentData.details from app}actionComponentData.details{/hint}'
      # 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"
      
      request = ACTION_COMPONENT_DATA_DETAILS
      # Data object passed from actionComponentData.details of the client app, parsed from JSON to a Hash.
      
      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 apiKey = "YOUR_X-API-KEY";
      
      String paymentData = "Ab02b4c0!BQABAgAKspbjN8+5...";
      String fingerPrint = "eyJ0aHJlZURTQ29tcEluZCI6IlkifQ==";
      
      Client client = new Client(apiKey,Environment.TEST);
      Checkout checkout = new Checkout(client);
      PaymentDetailsRequest paymentDetailsRequest = new PaymentDetailsRequest();
      paymentDetailsRequest.setFingerPrint();
      PaymentsResponse paymentsResponse = checkout.paymentDetails(PaymentDetailsRequest);
      // Set your X-API-KEY with the API key from the Customer Area.
      $client = new \Adyen\Client();
      $client->setXApiKey("YOUR_X-API-KEY");
      $service = new \Adyen\Service\Checkout($client);
      
      $params = ACTION_COMPONENT_DATA_DETAILS;
      // Data object passed from actionComponentData.details of the client app, parsed from JSON to an array
      
      $result = $service->paymentDetails($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.client.xapikey = 'YOUR_X-API-KEY'
      
      request = ACTION_COMPONENT_DATA_DETAILS
      # Data object passed from actionComponentData.details of the client app, parsed from JSON to a dictionary
      
      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.
      var client = new Client ("YOUR_X-API-KEY", Environment.Test);
      var checkout = new Checkout(client);
      string paymentData = "Ab02b4c0!BQABAgCuZFJrQOjSsl\/zt+...";
      string fingerPrint = "eyJ0aHJlZURTQ29tcEluZCI6IlkifQ==";
      
      var details = new Dictionary<string, string>
      {
        { "threeds2.fingerprint": fingerPrint }
      };
      var paymentsDetailsRequest = new Model.Checkout.PaymentsDetailsRequest(Details: details);
      var paymentResponse = checkout.PaymentDetails(paymentsDetailsRequest);
      // Set your X-API-KEY with the API key from the Customer Area.
      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 = '[API_KEY]';
      config.merchantAccount = '[YOUR_MERCHANT_ACCOUNT]';
      const client = new Client({ config });
      client.setEnvironment("TEST");
      const checkout = new CheckoutAPI(client);
      checkout.paymentsDetails({
          details: {ACTION_COMPONENT_DATA_DETAILS}  // Data object passed from actionComponentData.details of the client app
      }).then(res => res);

    Depending on the payment result, you receive a response containing:

    • resultCode: Provides information about the result of the request.
    • pspReference: Our unique identifier for the transaction.
    • action: If you receive this object, this indicates that you need to perform step 4 again.

  2. The next steps depend on if you received an action object in the response.

    • If you received an action object, pass the action object to your client app and perform step 4 again.
    • If you did not get an action object, proceed to the next step to present the payment result to your shopper.

      {
      "pspReference": "88154795347618C",
      "resultCode": "Authorised"
      }
      {
      "pspReference": "89783918347627F",
      "refusalReason": "Not enough balance",
      "resultCode": "Refused"
      }

Step 6: Present the payment result

After the shopper completes the payment and no more further actions are required on the client app, use the resultCode to inform the shopper of the payment status.

resultCode Description Action to take
Authorised The payment was successful. Inform the shopper that the payment was successful.
Error Inform the shopper that there was an error processing their payment. You'll receive a refusalReason in the same response, indicating the cause of the error.
Pending The shopper has completed the payment but the final result is not yet known. Inform the shopper that you've received their order, and are waiting for the payment to be completed.
You will receive the final result of the payment in an AUTHORISATION notification.
Refused The payment was refused. Inform the shopper that the payment was refused. Ask the shopper to try the payment again using a different payment method or card.
Received For some payment methods, it can take some time before the final status of the payment is known. Inform the shopper that you've received their order, and are waiting for the payment to clear.
You will receive the final result of the payment in an AUTHORISATION notification.

For other possible resultCode values and recommended messages that you can present to your shopper, see Result codes.

Action Components

Use the following Components to help you perform additional required actions as described in step 4, such as redirecting your shopper to another app or to a website to complete the payment, or handling 3D Secure 2 native authentication flows. The Components also returns the information that you need to submit in your next API request.

Using the Redirect Component

If the Action type is redirect, initialize the Redirect Component.

  1. To use the Redirect Component, first make sure that you add the following to your build.gradle file.

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

    Check the latest version on GitHub.

  2. Initialize the Redirect Component.

       val redirectComponent = RedirectComponent.PROVIDER.get(this@YourActivity)
  3. Provide the action object from the /payments response.

    redirectComponent.handleAction(this@YourActivity, action)
  4. Add an IntentFilter to the Activity that will handle the returnUrl.

    <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>
  5. Get the result of the redirect from the Activity. Pass the intent.data back to the Redirect Component.

    override fun onNewIntent(intent: Intent?) {
           super.onNewIntent(intent)
           if (data != null && data.toString().startsWith(RedirectUtil.REDIRECT_RESULT_SCHEME)) {
               redirectComponent.handleRedirectResponse(intent.data)
           }
       }
  6. The Component notifies the observer with the actionComponentData.details. Pass this to your server.

    redirectComponent.observe(this, Observer {
       // Send a /payments/details/ call containing the `actionComponentData.details`
    })
  7. From your server, make a POST /payments/details request.

    • details: This is the actionComponentData.details from your client app.
    curl https://checkout-test.adyen.com/v51/payments/details \
    -H "x-API-key: YOUR_X-API-KEY" \
    -H "content-type: application/json" \
    -d '{hint:actionComponentData.details from app}actionComponentData.details{/hint}'
    # 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"
    
    request = ACTION_COMPONENT_DATA_DETAILS
    # Data object passed from actionComponentData.details of the client app, parsed from JSON to a Hash.
    
    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 apiKey = "YOUR_X-API-KEY";
    
    String paymentData = "Ab02b4c0!BQABAgAKspbjN8+5...";
    String fingerPrint = "eyJ0aHJlZURTQ29tcEluZCI6IlkifQ==";
    
    Client client = new Client(apiKey,Environment.TEST);
    Checkout checkout = new Checkout(client);
    PaymentDetailsRequest paymentDetailsRequest = new PaymentDetailsRequest();
    paymentDetailsRequest.setFingerPrint();
    PaymentsResponse paymentsResponse = checkout.paymentDetails(PaymentDetailsRequest);
    // Set your X-API-KEY with the API key from the Customer Area.
    $client = new \Adyen\Client();
    $client->setXApiKey("YOUR_X-API-KEY");
    $service = new \Adyen\Service\Checkout($client);
    
    $params = ACTION_COMPONENT_DATA_DETAILS;
    // Data object passed from actionComponentData.details of the client app, parsed from JSON to an array
    
    $result = $service->paymentDetails($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.client.xapikey = 'YOUR_X-API-KEY'
    
    request = ACTION_COMPONENT_DATA_DETAILS
    # Data object passed from actionComponentData.details of the client app, parsed from JSON to a dictionary
    
    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.
    var client = new Client ("YOUR_X-API-KEY", Environment.Test);
    var checkout = new Checkout(client);
    string paymentData = "Ab02b4c0!BQABAgCuZFJrQOjSsl\/zt+...";
    string fingerPrint = "eyJ0aHJlZURTQ29tcEluZCI6IlkifQ==";
    
    var details = new Dictionary<string, string>
    {
      { "threeds2.fingerprint": fingerPrint }
    };
    var paymentsDetailsRequest = new Model.Checkout.PaymentsDetailsRequest(Details: details);
    var paymentResponse = checkout.PaymentDetails(paymentsDetailsRequest);
    // Set your X-API-KEY with the API key from the Customer Area.
    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 = '[API_KEY]';
    config.merchantAccount = '[YOUR_MERCHANT_ACCOUNT]';
    const client = new Client({ config });
    client.setEnvironment("TEST");
    const checkout = new CheckoutAPI(client);
    checkout.paymentsDetails({
        details: {ACTION_COMPONENT_DATA_DETAILS}  // Data object passed from actionComponentData.details of the client app
    }).then(res => res);

    The response contains:

      {
       "resultCode": "Authorised",
       "pspReference": "88154795347618C"
     }

Using the 3D Secure 2 Component

If the Action type is threeDS2Fingerprint, initialize the 3D Secure 2 Component.

  1. To use the 3D Secure 2 Component, first make sure that you add the following to your build.gradle file.

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

    Check the latest version on GitHub.

  2. Initialize the 3D Secure 2 Component.

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

    threedsComponent.handleAction(this@YourActivity, action)
  4. 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`
    })
  5. From your server, make a POST /payments/details request.

    • details: This is the actionComponentData.details from your client app.
    curl https://checkout-test.adyen.com/v51/payments/details \
    -H "x-API-key: YOUR_X-API-KEY" \
    -H "content-type: application/json" \
    -d '{hint:actionComponentData.details from app}actionComponentData.details{/hint}'
    # 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"
    
    request = ACTION_COMPONENT_DATA_DETAILS
    # Data object passed from actionComponentData.details of the client app, parsed from JSON to a Hash.
    
    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 apiKey = "YOUR_X-API-KEY";
    
    String paymentData = "Ab02b4c0!BQABAgAKspbjN8+5...";
    String fingerPrint = "eyJ0aHJlZURTQ29tcEluZCI6IlkifQ==";
    
    Client client = new Client(apiKey,Environment.TEST);
    Checkout checkout = new Checkout(client);
    PaymentDetailsRequest paymentDetailsRequest = new PaymentDetailsRequest();
    paymentDetailsRequest.setFingerPrint();
    PaymentsResponse paymentsResponse = checkout.paymentDetails(PaymentDetailsRequest);
    // Set your X-API-KEY with the API key from the Customer Area.
    $client = new \Adyen\Client();
    $client->setXApiKey("YOUR_X-API-KEY");
    $service = new \Adyen\Service\Checkout($client);
    
    $params = ACTION_COMPONENT_DATA_DETAILS;
    // Data object passed from actionComponentData.details of the client app, parsed from JSON to an array
    
    $result = $service->paymentDetails($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.client.xapikey = 'YOUR_X-API-KEY'
    
    request = ACTION_COMPONENT_DATA_DETAILS
    # Data object passed from actionComponentData.details of the client app, parsed from JSON to a dictionary
    
    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.
    var client = new Client ("YOUR_X-API-KEY", Environment.Test);
    var checkout = new Checkout(client);
    string paymentData = "Ab02b4c0!BQABAgCuZFJrQOjSsl\/zt+...";
    string fingerPrint = "eyJ0aHJlZURTQ29tcEluZCI6IlkifQ==";
    
    var details = new Dictionary<string, string>
    {
      { "threeds2.fingerprint": fingerPrint }
    };
    var paymentsDetailsRequest = new Model.Checkout.PaymentsDetailsRequest(Details: details);
    var paymentResponse = checkout.PaymentDetails(paymentsDetailsRequest);
    // Set your X-API-KEY with the API key from the Customer Area.
    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 = '[API_KEY]';
    config.merchantAccount = '[YOUR_MERCHANT_ACCOUNT]';
    const client = new Client({ config });
    client.setEnvironment("TEST");
    const checkout = new CheckoutAPI(client);
    checkout.paymentsDetails({
        details: {ACTION_COMPONENT_DATA_DETAILS}  // Data object passed from actionComponentData.details of the client app
    }).then(res => res);

    The response contains:

    • pspReference: Our unique identifier for the transaction.
    • action: If the issuer requires further shopper interaction in a challenge flow, you might still get this object with type threeDS2Challenge.
    • resultCode: If the response does not contain an action object, use this to present the result to your shopper.
    {
    ...
      "action":{
        "paymentMethodType":"scheme",
        "token":"eyJ0aH...",
        "type":"threeDS2Challenge"
      },
    ...
    }
  6. To handle the challenge flow, pass the action object from the /payments/details response.

    threedsComponent.handleAction(this@YourActivity, action)
  7. 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`
      })
  8. From your server, make a POST /payments/details request again.

    • details: This is the actionComponentData.details from your client app.
    curl https://checkout-test.adyen.com/v51/payments/details \
    -H "x-API-key: YOUR_X-API-KEY" \
    -H "content-type: application/json" \
    -d '{hint:actionComponentData.details from app}actionComponentData.details{/hint}'
    # 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"
    
    request = ACTION_COMPONENT_DATA_DETAILS
    # Data object passed from actionComponentData.details of the client app, parsed from JSON to a Hash.
    
    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 apiKey = "YOUR_X-API-KEY";
    
    String paymentData = "Ab02b4c0!BQABAgAKspbjN8+5...";
    String fingerPrint = "eyJ0aHJlZURTQ29tcEluZCI6IlkifQ==";
    
    Client client = new Client(apiKey,Environment.TEST);
    Checkout checkout = new Checkout(client);
    PaymentDetailsRequest paymentDetailsRequest = new PaymentDetailsRequest();
    paymentDetailsRequest.setFingerPrint();
    PaymentsResponse paymentsResponse = checkout.paymentDetails(PaymentDetailsRequest);
    // Set your X-API-KEY with the API key from the Customer Area.
    $client = new \Adyen\Client();
    $client->setXApiKey("YOUR_X-API-KEY");
    $service = new \Adyen\Service\Checkout($client);
    
    $params = ACTION_COMPONENT_DATA_DETAILS;
    // Data object passed from actionComponentData.details of the client app, parsed from JSON to an array
    
    $result = $service->paymentDetails($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.client.xapikey = 'YOUR_X-API-KEY'
    
    request = ACTION_COMPONENT_DATA_DETAILS
    # Data object passed from actionComponentData.details of the client app, parsed from JSON to a dictionary
    
    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.
    var client = new Client ("YOUR_X-API-KEY", Environment.Test);
    var checkout = new Checkout(client);
    string paymentData = "Ab02b4c0!BQABAgCuZFJrQOjSsl\/zt+...";
    string fingerPrint = "eyJ0aHJlZURTQ29tcEluZCI6IlkifQ==";
    
    var details = new Dictionary<string, string>
    {
      { "threeds2.fingerprint": fingerPrint }
    };
    var paymentsDetailsRequest = new Model.Checkout.PaymentsDetailsRequest(Details: details);
    var paymentResponse = checkout.PaymentDetails(paymentsDetailsRequest);
    // Set your X-API-KEY with the API key from the Customer Area.
    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 = '[API_KEY]';
    config.merchantAccount = '[YOUR_MERCHANT_ACCOUNT]';
    const client = new Client({ config });
    client.setEnvironment("TEST");
    const checkout = new CheckoutAPI(client);
    checkout.paymentsDetails({
        details: {ACTION_COMPONENT_DATA_DETAILS}  // Data object passed from actionComponentData.details of the client app
    }).then(res => res);

    The response contains:

      {
       "resultCode": "Authorised",
       "pspReference": "88154795347618C"
     }

Customizing the UI for 3D Secure 2

The 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.AppCompat.Light.DarkActionBar">
    <!-- 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

Before going live, use our list of test cards and other payment methods to test your integration. We recommend testing each payment method that you intend to offer to your shoppers.

You can check the status of a test payment in your Customer Area, under Transactions > Payments.

When you've completed testing, you need to complete some additional steps before you can accept live payments from shoppers. Refer to Getting started with Adyen for more information.

When you're ready to move to production, you have to switch from test to our live endpoints. See Live endpoints for more information.

Supported payment methods in Components

The following payment methods are supported in Components. If you have questions about payment methods not on the list below or those that do not have linked pages, contact our Support Team.

Payment method Web iOS Android
AfterPay -white_check_mark-
Apple Pay -white_check_mark- -white_check_mark-
Bancontact Mobile (Payconiq) -white_check_mark- -white_check_mark-
Boleto Bancário -white_check_mark-
Cards, including 3D Secure 1 and 3D Secure 2
authentication
-white_check_mark- -white_check_mark- -white_check_mark-
Stored card details -white_check_mark- -white_check_mark- -white_check_mark-
Dragonpay -white_check_mark-
Dotpay -white_check_mark- -white_check_mark- -white_check_mark-
Entercash -white_check_mark- -white_check_mark- -white_check_mark-
EPS -white_check_mark- -white_check_mark- -white_check_mark-
giropay -white_check_mark-
Google Pay -white_check_mark- -white_check_mark-
iDEAL -white_check_mark- -white_check_mark- -white_check_mark-
Japanese convenience stores (Konbini)/
7-Eleven Japan
-white_check_mark-
Klarna -white_check_mark- -white_check_mark- -white_check_mark-
MOLPay -white_check_mark- -white_check_mark- -white_check_mark-
Multibanco -white_check_mark-
Open banking -white_check_mark- -white_check_mark- -white_check_mark-
Online banking India -white_check_mark-
Online banking Japan -white_check_mark-
QiwiWallet -white_check_mark-
Redirect payment methods
(For example, UnionPay)
-white_check_mark- -white_check_mark- -white_check_mark-
SEPA Direct Debit -white_check_mark- -white_check_mark- -white_check_mark-
Vipps -white_check_mark-
Wallets India -white_check_mark-
WeChat Pay -white_check_mark- -white_check_mark-

We're actively adding payment methods to Components. To check the latest on Drop-in and Components, see our release notes.

See also

Next steps