Search

Are you looking for test card numbers?

Would you like to contact support?

Online-payment icon

Android Drop-in

Accept popular payment methods with a single client-side implementation.

Use Drop-in, our all-in-one UI solution, to accept payments on your Android app using a single client-side implementation. We recommend that you use Drop-in if you want a quick way to start accepting payments on your website, with little to no customization.

Supported payment methods

Drop-in readily supports cards, wallets, and most local payment methods. For a list of supported payment methods, refer to Supported payment methods.

Adding new payment methods usually requires no additional implementation effort, however some payment methods require additional configuration. For more information, refer to our payment method integration guides.

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

How Drop-in looks


 


How Drop-in works

The following general flow applies for each payment method supported in Drop-in:

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. Create an instance of Drop-in.
  3. From your server, submit a payment request with data you receive from Drop-in.
  4. Some payment methods require additional actions before a payment can be completed. Submit the results of the additional payment details with data you receive from Drop-in.
  5. Present the payment result to the shopper.

When you have completed the integration, proceed to test your integration.

Before you begin

If you haven't done so already, follow our Get started guide to set up your test account, get your API key, and install a server-side library.

Install the Adyen Android client-side library

Android Drop-in is available through jcenter. You only need to add the build dependency on Gradle.

Add the following to your build.gradle (Module) file. To get the latest version, check our GitHub repository.

implementation 'com.adyen.checkout:drop-in:<latest-version>'

Get your client encryption public key

For accepting card payments, you'll need a client encryption public key. To get your Client Encryption Public Key:

  1. Sign in to your Customer Area using your company-level account.
  2. Navigate to Account > Users.
  3. Click on your web service user (ws@Company.[YourCompanyAccount]) in the users list.
    This opens the Edit Web Service User page.
  4. In the Client-Side Encryption panel, copy the Client Encryption Public Key.

Step 1: Get available payment methods

When your shopper is ready to pay, get a list of the available payment methods based on their country, device, and the payment amount.

  1. From your server, make a POST /paymentMethods request, providing the following parameters. While most parameters are optional, we recommend that you include them because Adyen uses these to tailor the list of payment methods for your shopper.

    We use the optional parameters to tailor the list of available payment methods to your shopper.

    Parameter name Required Description
    merchantAccount -white_check_mark- Your merchant account name.
    amount The currency and value of the payment (in minor units). For more information, see Currency codes.
    channel The platform where the payment is taking place. Use Android. Adyen returns only the payment methods available for Android.
    countryCode The shopper's country code. Adyen returns only the payment methods available in this country.
    shopperLocale By default, the shopperlocale is set to en-US. To change the language, set this to the shopper's language and country code. You also need to set the same ShopperLocale within your Drop-in configuration.

    A request to get the available payment methods for a shopper in the Netherlands, for a payment of 10 EUR:

    curl https://checkout-test.adyen.com/v52/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",
      "shopperLocale": "nl-NL"
    }'
    # 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',
      :shopperLocale => 'nl_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");
    paymentMethodsRequest.setShopperLocale("nl-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",
      "shopperLocale" => "nl-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',
      'shopperLocale': 'nl-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",
       ShopperLocale = "nl-NL",
       Amount = amount,
       Channel = PaymentMethodsRequest.ChannelEnum.Android
    };
    
    var paymentMethodsResponse = checkout.PaymentMethods(paymentMethodsRequest);
    const config = new Config();
    // Set your X-API-KEY with the API key from the Customer Area.
    config.apiKey = '[API_KEY]';
    config.merchantAccount = '[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",
        shopperLocale: "nl-NL",
        channel: "Android",
        merchantAccount: config.merchantAccount
    }).then(res => res);

    The response includes the list of available paymentMethods:

    /paymentMethods response
    {
     "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 Drop-in to your payment form

Next, use Drop-in to show the available payment methods and to collect payment details from your shopper.

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

    val paymentMethodsApiResponse = PaymentMethodsApiResponse.SERIALIZER.deserialize(paymentMethodsResponse)
  2. Extend the DropInService class and use the makePaymentsCall and makeDetailsCall methods to pass data between your client app and your server.

    Both makePaymentsCall and makeDetailsCall are expected to return the CallResult. The CallResult contains the result of the API calls from your server. Drop-in uses the CallResult to determine if additional actions are required to complete the payment, such as redirecting the shopper to another site or to perform 3D Secure authentication.

    class YourDropInService : DropInService() {
       // Handling for submitting a payment request
       override fun makePaymentsCall(paymentComponentData: JSONObject): CallResult {
           ...
           // See step 3 - Your server should make a /payments call containing the `paymentComponentData`
           // Create the `CallResult` based on the /payments response
           return CallResult(CallResult.ResultType.ACTION, "action JSON object")
       }
       // Handling for submitting additional payment details
       override fun makeDetailsCall(actionComponentData: JSONObject): CallResult {
           ...
           // See step 4 - Your server should make a /payments/details call containing the `actionComponentData`
           // Create the `CallResult` based on the /payments/details response
           return CallResult(CallResult.ResultType.FINISHED, "Authorised")
       }
    }

    Depending on the API responses, return any of the following ResultType values in the CallResult:

    ResultType When to return this value
    ACTION If you received an action object in the API response, return resultType ACTION and the action object.
    FINISHED If you did not receive an action object in the API response, return FINISHED and the resultCode from the response.
    ERROR Return this if an error happened during the connection.

    The API requests in the sample server-side code are discussed in detail in step 3 for making a payment and step 4 for submitting additional payment details.

  3. Add the service to your manifest file.

    <service
       android:name=".YourDropInService"
       android:permission="android.permission.BIND_JOB_SERVICE"/>
  4. Configure Drop-in. Note that some payment methods require additional configuration. For example, for Cards, you need to provide your public key so that Drop-in can encrypt the shopper's card details. Check specific payment method pages to confirm if you need to configure additional required parameters.

    Name Required Description
    Environment -white_check_mark- Use TEST. When you're ready to accept live payments, change the value to one of our live environments
    Amount Show the amount a shopper has to pay on the Pay button. To do this, you include the currency and the amount (in minor units) that the shopper has to pay.
    ShopperLocale By default, Drop-in is rendered in the language set for the device. To change the language, set the shopper locale to the required language code. You also need to set the shopper locale in the [paymentMethod]Configuration object and in step 1 where you make the /paymentMethods call.
    [paymentMethod]Configuration For example, CardConfiguration. This contains required or optional configuration for specific payment methods. For more information, refer to supported payment methods.

    The following example shows a Drop-in configuration that includes the amount, shopper locale, and the required configuration for cards.

    val cardConfiguration =
      CardConfiguration.Builder(context, "<publicKey>")
      .setShopperLocale(shopperLocale)
      .build()
    
    val amount = Amount()
        // Optional. In this example, the Pay button will display 10 EUR.
        amount.currency = "EUR"
        amount.value = 1000
    
    val dropInConfiguration = DropInConfiguration.Builder(this@MainActivity, YourDropInService::class.java)
       // Optional. Use if you want to display the amount and currency on the Pay button.
       .setAmount(amount)
       // When you're ready to accept live payments, change the value to one of our live environments.
       .setEnvironment(Environment.TEST)
       // Optional. Use to set the language rendered in Drop-in, overriding the default device language setting. See list of Supported languages at https://github.com/Adyen/adyen-android/tree/master/card-ui-core/src/main/res
       // Make sure that you have set the locale in the payment method configuration object as well.
       .setShopperLocale(shopperLocale)
       .addCardConfiguration(cardConfiguration)
       .build()
  5. Initialize Drop-in. To do this, call the .startPayment() method and pass the dropinConfiguration and the deserialized PaymentMethodsApiResponse. Drop-in calls the resultIntent when the payment flow has been completed.

    DropIn.INSTANCE.startPayment(this@YourActivity, mPaymentMethodsApiResponse, dropInConfiguration, resultIntent)
  6. After Drop-in completes the payment flow, get the message from the resultIntent in intent.getStringExtra(DropIn.RESULT_KEY).

  7. When the resultIntent is pointing to an Activity responsible for showing the payment results to the shopper, check for the resultCode inside DropIn.RESULT_KEY and present the result to the shopper.

Step 3: Make a payment

After the shopper submits their payment details or chooses to pay with a payment method that requires a redirection, you need to make a payment request to Adyen. The makePaymentsCall method described in step 2 handles submitting the shopper's payment details from the app to your server, where you make an API request.

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

    Parameter name Required Description
    merchantAccount -white_check_mark- Your merchant account name.
    amount -white_check_mark- The currency and value of the payment (in minor units). For more information, see Currency codes.
    reference -white_check_mark- Your unique reference for this payment.
    paymentMethod -white_check_mark- The paymentComponentData.paymentMethod from your client app.
    returnUrl In case of a redirection, this is the URL to where your shopper should be redirected back to after they complete the payment. This URL can have a maximum of 1024 characters. Get this URL from Drop-in in the RedirectComponent.getReturnUrl(context).
    applicationInfo If you're building an Adyen solution for multiple merchants, include some basic identifying information, so that we can offer you better support. For more information, refer to Building Adyen solutions.

    Additional parameters are required for some payment methods, cards with native 3D Secure 2 authentication, and recurring payments. For more information, refer to our payment method integration guides.

    A sample request for a payment of 10 euros:

    curl https://checkout-test.adyen.com/v52/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:paymentComponentData.paymentMethod from app}paymentComponentData.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 = DROPIN_PAYMENT_COMPONENT_DATA
    # Data object passed from paymentComponentData from the 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);
    Amount amount = new Amount();
    amount.setCurrency("EUR");
    amount.setValue(15000L);
    PaymentMethodDetails paymentMethod = DROPIN_PAYMENT_COMPONENT_DATA;
    
    PaymentsRequest paymentsRequest = new PaymentsRequest();
    paymentsRequest.setAmount(amount);
    paymentsRequest.setMerchantAccount("YOUR_MERCHANT_ACCOUNT");
    paymentsRequest.setReference("Your order number");
    paymentsRequest.setPaymentMethod(paymentMethod);
    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 = DROPIN_PAYMENT_COMPONENT_DATA;
    // Data object passed from paymentComponentData from the 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 = DROPIN_PAYMENT_COMPONENT_DATA
    # Data object passed from paymentComponentData from the 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 paymentRequest = new Adyen.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: {DROPIN_PAYMENT_COMPONENT_DATA}, // Data object passed from paymentComponentData from the client app
        reference: "YOUR_ORDER_NUMBER",
        merchantAccount: config.merchantAccount,
        returnUrl: "https://your-company.com/checkout?shopperOrder=12xy.."
    }).then(res => res);

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

    Description Next steps
    No action object No additional steps are needed to complete the payment. 1. Return CallResult with ResultType FINISHED to your client app, along with the the resultCode from the response.
    2. Proceed to step 5.
    With action object The shopper needs to do additional actions to complete the payment. 1. Return CallResult with ResultType ACTION to your client app, along with the action object.
    2. Proceed to step 4.

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

    /payments response
    {
      "resultCode":"IdentifyShopper",
      "action":{
        "paymentData":"Ab02b4c0!BQABAgCuZFJrQOjSsl\/zt+...",
        "paymentMethodType":"scheme",
        "token":"eyJ0aHJlZURTTWV0aG9kTm90aWZpY...",
        "type":"threeDS2Fingerprint"
      },
      "authentication":{
        "threeds2.fingerprintToken":"eyJ0aHJlZURTTWV0aG9kTm90aWZpY..."
      },
      "details":[
        {
          "key":"threeds2.fingerprint",
          "type":"text"
        }
      ],
      ...
    }

Step 4: Submit additional payment details

Some payment methods require additional action from the shopper such as: to authenticate a payment with 3D Secure, or to switch to another app to complete the payment.

To handle these additional client app actions, Drop-in checks if the CallResult.ResultType is ACTION. Next, Drop-in performs the makeDetailsCall. The makeDetailsCall method described in step 2 handles submitting additional payment details from app to your server, where you make an API request.

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

  • details: The actionComponentData from Drop-in.
  • paymentData: The value from your last API response.

The following example shows a /payments/details request containing data returned by the 3D Secure 2 Component:

curl https://checkout-test.adyen.com/v52/payments/details \
-H "x-API-key: YOUR_X-API-KEY" \
-H "content-type: application/json" \
-d '{
  "{hint:actionComponentData.details from app}details{/hint}": {
    "threeds2.challengeResult": "eyJ0aHJlZURTQ29tcEluZCI6IlkifQ=="
  },
  "{hint:Value from your last API response}paymentData{/hint}":"Ab02b4c0!BQABAgAKspbjN8+5..."
}'
# 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 = COMPONENT_DATA
# Data object passed from didProvide method from 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 challengeResult = "eyJ0aHJlZURTQ29tcEluZCI6IlkifQ==";

Client client = new Client(apiKey,Environment.TEST);
Checkout checkout = new Checkout(client);
PaymentsDetailsRequest paymentsDetailsRequest = new PaymentsDetailsRequest();
paymentDetailsRequest.setChallengeResult();
PaymentsResponse paymentsResponse = checkout.paymentsDetails(paymentsDetailsRequest);
// 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 = COMPONENT_DATA;
// Data object passed from didProvide method from the client app, parsed from JSON to an array

$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.client.xapikey = 'YOUR_X-API-KEY'

request = COMPONENT_DATA
# Data object passed from didProvide method from 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 challengeResult = "eyJ0aHJlZURTQ29tcEluZCI6IlkifQ==";

var details = new Dictionary<string, string>
{
  { "threeds2.challengeResult": challengeResult }
};
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 = '[MERCHANT_ACCOUNT]';
const client = new Client({ config });
client.setEnvironment("TEST");
const checkout = new CheckoutAPI(client);
checkout.paymentsDetails({
    details: {COMPONENT_DATA_DETAILS}  // Data object passed from didProvide method from the client app
    paymentData: COMPONENT_DATA_PAYMENT_DATA  // Data object passed from didProvide method from the client app
}).then(res => res);

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

Description Next steps
No action object No additional steps are needed to complete the payment. 1. Return CallResult with ResultType FINISHED to your client app, along with the the resultCode from the response.
2. Proceed to step 5.
With action object The shopper needs to do additional actions to complete the payment. 1. Return CallResult with ResultType ACTION to your client app, along with the action object.
2. Perform step 4 again.
Successful payment response
 {
     "pspReference": "88154795347618C",
     "resultCode": "Authorised"
 }
Refused response
 {
     "pspReference": "89783918347627F",
     "refusalReason": "Not enough balance",
     "resultCode": "Refused"
 }

Step 5: Present the payment result

After the shopper completes the payment and no more further actions are required on the client app, use the resultCode inside DropIn.RESULT_KEY to present a corresponding message to the shopper.

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.

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 are ready to go live, you need to:

  1. Apply for a live account.  
  2. Assess your PCI DSS compliance, and submit the Self-Assessment Questionnaire-A.
  3. Configure your live account.
  4. Switch from test to our live endpoints.
  5. Load Drop-in from one of our live environments closest to where your shoppers are. Set the environment to:

    • Europe: EUROPE
    • Australia: AUSTRALIA
    • US: UNITED_STATES

See also

Next steps