Are you looking for test card numbers?

Would you like to contact support?

Default icon

React Native Drop-in integration guide

Accept popular payment methods on your website or in your app with a single client-side implementation.

Drop-in is our pre-built UI solution for accepting payments on your app. Drop-in shows all payment methods as a list, in the same block.

How it works

Try it out!

From an implementation perspective, a Drop-in integration contains:

  • Server-side: API requests to get payment methods, submit a payment, and submit additional data about the payment. We recommend using Checkout API v67 or later.
  • Client-side: Drop-in, to show payment methods, make a payment request, and handle any other actions like redirects or 3D Secure authentication.
  • Webhook server: receives webhook notifications which tell you what is the outcome of each payment.

The payment flow is the same for all payments:

  1. The shopper goes to the checkout page.
  2. Your server uses the shopper's country and currency information from your client to get available payment methods.
  3. Drop-in shows the available payment methods, collects the shopper's payment details, handles additional actions, and shows the payment result to the shopper.
  4. Your webhook server receives the notification containing the payment outcome.

Before you begin

Before you begin to integrate, make sure you have followed the Get started with Adyen guide to:

  • Get an overview of the steps needed to accept live payments.
  • Create your test account.

After you have created your test account:

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.

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 of the payment and its value in minor units.
channel The platform where the payment is taking place. For example, when you set this to iOS, Adyen returns only the payment methods available for iOS.
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. The front end also uses this locale.

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

curl https://checkout-test.adyen.com/v69/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": "iOS",
  "shopperLocale": "nl-NL"
}'
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"

response = adyen.checkout.payment_methods({
    :countryCode => 'NL',
    :shopperLocale => 'nl-NL',
    :amount => {
        :currency => 'EUR',
        :value => 1000
    },
    :channel => 'iOS',
    :merchantAccount => 'YOUR_MERCHANT_ACCOUNT'
})
// 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);
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.iOS);
PaymentMethodsResponse paymentMethodsResponse = checkout.paymentMethods(paymentMethodsRequest);
// Pass the response to your front end
// 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);

$params = array(
    "countryCode" => "NL",
    "shopperLocale" => "nl-NL",
    "amount" => array(
        "currency" => "EUR",
        "value" => 1000
    ),
    "channel" => "iOS",
    "merchantAccount" => "YOUR_MERCHANT_ACCOUNT"
);
$result = $service->paymentMethods($params);
# 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'

request = {
    'countryCode': 'NL',
    'shopperLocale': 'nl-NL',
    'amount': {
        'value': 1000,
        'currency': 'EUR'
    },
    'channel': 'iOS',
    'merchantAccount': 'YOUR_MERCHANT_ACCOUNT'
}
result = adyen.checkout.payment_methods(request)
// 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);
var amount = new Adyen.Model.Checkout.Amount("EUR", 1000);
var paymentMethodsRequest = new Adyen.Model.Checkout.PaymentMethodsRequest(merchantAccount: "YOUR_MERCHANT_ACCOUNT")
{ 
    CountryCode = "NL",
    ShopperLocale = "nl-NL",
    Amount = amount,
    Channel = Adyen.Model.Checkout.PaymentMethodsRequest.ChannelEnum.iOS,
};
var paymentMethodsResponse = checkout.PaymentMethods(paymentMethodsRequest);
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]';
config.merchantAccount = '[YOUR_MERCHANT_ACCOUNT]';
const client = new Client({ config });
client.setEnvironment("TEST");
const checkout = new CheckoutAPI(client);
const paymentsResponse = checkout.paymentMethods({
    merchantAccount: config.merchantAccount,
    countryCode: "NL",
    shopperLocale: "nl-NL",
    amount: { currency: "EUR", value: 1000, },
    channel: "iOS"
}).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]",
})
res, httpRes, err := client.Checkout.PaymentMethods(&checkout.PaymentMethodsRequest{
    CountryCode: "NL",
    ShopperLocale: "nl-NL",
    Amount: &checkout.Amount{
        Value:    1000,
        Currency: "EUR",
    },
    Channel: "iOS",
    MerchantAccount: "[YOUR_MERCHANT_ACCOUNT]",
})

The response includes the list of available paymentMethods:

/paymentMethods response
{
 "paymentMethods":[
  {
    "details":[...],
    "name":"Credit Card",
    "type":"scheme"
    ...
  },
  {
    "details":[...],
    "name":"SEPA Direct Debit",
    "type":"sepadirectdebit"
  },
  ...
  ]
}

Pass the response to your client app. Use this in the next step to show available payment methods to the shopper.

Step 2: Add Adyen Drop-in to your app

1. Add Adyen React Native to your project

$ yarn add @adyen/react-native

2. Install

  1. Run pod install.
  2. In your AppDelegate.m file, add a return URL handler for handling redirects from other apps. For example:

    iOS return URL handler
    import <adyen-react-native/ADYRedirectComponent.h>
    
    {
    ...
    - (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
     return [ADYRedirectComponent applicationDidOpenURL:url];
    }

3. Configure Adyen Checkout

Create a configuration object with the following properties:

Parameter 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](/online-payments/react-native/drop-in#test-and-go-live).
clientKey -white_check_mark- A public key linked to your API credential, used for client-side authentication.
returnUrl -white_check_mark- For iOS, this is the URL to your app, where the shopper should return, after a redirection. Maximum of 1024 characters. For more information on setting a custom URL scheme for your app, read the Apple Developer documentation.
For Android, this value is automatically overridden by AdyenCheckout.
countryCode If you want to show the amount on the Pay button. The shopper's country code.
amount If you want to show the amount on the Pay button. The currency and value of the payment, in minor units.

For example:

Create a configuration object
const configuration = {
    // When you're ready to accept live payments, change the value to one of our live environments.
    environment: 'test',
    clientKey: 'YOUR_CLIENT_KEY',
    // For iOS, this is the URL to your app. For Android, this is automatically overridden by AdyenCheckout.
    returnUrl: 'your-app://',
    // Must be included to show the amount on the Pay button.
    countryCode: 'NL',
    amount: { currency: 'EUR', value: 1000 }
};

4. Initialize Drop-in

  1. Configure AdyenCheckout, setting the following:
Parameter Description
config Your configuration object.
paymentMethods The full response from the /paymentMethods endpoint.
onSubmit Calls the didSubmit function for making a /payments request.
onProvide Calls the didProvide function for making a /payments/details request.
onFail Calls the didFail function for returning errors.
onComplete Calls the didComplete function for returning the result code when the payment flow is complete.
  1. Set AdyenCheckout as the context for your View .

For example:

Configure AdyenCheckout
// Import AdyenCheckout.
import { AdyenCheckout } from '@adyen/react-native';

<AdyenCheckout
  config=configuration
  paymentMethods=paymentMethods
  onSubmit=didSubmit
  onProvide=didProvide
  onFail=didFail
  onComplete=didComplate >
    <YourCheckoutView/> // Your checkout view that uses AdyenCheckout as the context.
</AdyenCheckout>
  1. Create a way, like a button, for AdyenCheckout to call the start function.
Create a way to start Drop-in
// Import useAdyenCheckout.
import { useAdyenCheckout } from '@adyen/react-native';

// Set your View to use AdyenCheckout as the context.
const YourCheckoutView = () => {
    const { start } = useAdyenCheckout();

    return (
    // Create a way, like a checkout button, that starts Drop-in.
        <Button
            title="Checkout"
            // Use dropIn to show the full list of available payment methods.
            onPress={() => { start('dropIn'); }} />
    );
};

The context starts Adyen's Native Component for Drop-in.

Step 3: Make a payment

When the shopper selects the Pay button or chooses to pay with a payment method that requires a redirection, the Native Component calls onSubmit, and you make a payment request to Adyen.

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 of the payment and its value in minor units.
reference -white_check_mark- Your unique reference for this payment.
paymentMethod -white_check_mark- The payment method from the payload of the onSubmit event from your front end.
returnUrl -white_check_mark-
For Android, this value is automatically overridden by AdyenCheckout.
For iOS, this is the URL to your app, where the shopper should return, after a redirection. Maximum of 1024 characters. For more information on setting a custom URL scheme for your app, read the Apple Developer documentation.
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.

Include additional parameters in your payment request to:
- Integrate some payment methods. For more information, refer to our payment method integration guides.
- Make use of our risk management features. For more information, see Required risk fields.
- Use native 3D Secure 2 authentication.
- Tokenize your shopper's payment details or make recurring payments.

Here's an example of how you would make a payment request for 10 EUR:

curl https://checkout-test.adyen.com/v69/payments \
-H "x-API-key: YOUR_API_KEY" \
-H "content-type: application/json" \
-d '{
  "amount":{
    "currency":"EUR",
    "value":1000
  },
  "reference":"YOUR_ORDER_NUMBER",
  "paymentMethod":{hint:paymentMethod field of an object passed from the front end or client app}STATE_DATA{/hint},
  "returnUrl":"your-app://",
  "merchantAccount":"YOUR_MERCHANT_ACCOUNT"
}'
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 the paymentMethod field of an object passed from the front end or client app, deserialized from JSON to a data structure.
paymentMethod = STATE_DATA

response = adyen.checkout.payments({ 
    :paymentMethod => paymentMethod,
    :amount => {
        :currency => 'EUR',
        :value => 1000
    },
    :reference => 'YOUR_ORDER_NUMBER',
    :returnUrl => 'your-app://',
    :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.
String xApiKey = "YOUR_X-API-KEY";
Client client = new Client(xApiKey,Environment.TEST);
Checkout checkout = new Checkout(client);
PaymentsRequest paymentsRequest = new PaymentsRequest();
paymentsRequest.setMerchantAccount("YOUR_MERCHANT_ACCOUNT");
// STATE_DATA is the paymentMethod field of an object passed from the front end or client app, deserialized from JSON to a data structure.
paymentsRequest.setPaymentMethod(STATE_DATA)
Amount amount = new Amount();
amount.setCurrency("EUR");
amount.setValue(1000L);
paymentsRequest.setAmount(amount);
paymentsRequest.setReference("YOUR_ORDER_NUMBER");
paymentsRequest.setReturnUrl("your-app://");
PaymentsResponse paymentsResponse = checkout.payments(paymentsRequest);
// 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 the paymentMethod field of an object passed from the front end or client app, deserialized from JSON to a data structure.
$paymentMethod = STATE_DATA;;

$params = array(
    "paymentMethod" => $paymentMethod,
    "amount" => array(
        "currency" => "EUR",
        "value" => 1000
    ),
    "reference" => "YOUR_ORDER_NUMBER",
    "returnUrl" => "your-app://",
    "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.payment.client.platform = "test"
adyen.client.xapikey = 'YOUR_X-API-KEY'

# STATE_DATA is the paymentMethod field of an object passed from the front end or client app, deserialized from JSON to a data structure.
paymentMethod = STATE_DATA

result = adyen.checkout.payments({
    'paymentMethod': paymentMethod,
    'amount': {
        'value': 1000,
        'currency': 'EUR'
    },
    'reference': 'YOUR_ORDER_NUMBER',
    'returnUrl': 'your-app://',
    '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.
string apiKey = "YOUR_X-API-KEY";
var client = new Client (apiKey, Environment.Test);
var checkout = new Checkout(client);
var amount = new Adyen.Model.Checkout.Amount("EUR", 1000);
var paymentsRequest = new Adyen.Model.Checkout.PaymentRequest
{ 
// STATE_DATA is the paymentMethod field of an object passed from the front end or client app, deserialized from JSON to a data structure.
    PaymentMethod = STATE_DATA,
    Amount = amount,
    Reference = "YOUR_ORDER_NUMBER",
    ReturnUrl = @"your-app://",
};
var paymentResponse = checkout.Payments(paymentsRequest);
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]';
config.merchantAccount = '[YOUR_MERCHANT_ACCOUNT]';
const client = new Client({ config });
client.setEnvironment("TEST");
const checkout = new CheckoutAPI(client);
checkout.payments({
    merchantAccount: config.merchantAccount,
// STATE_DATA is the paymentMethod field of an object passed from the front end or client app, deserialized from JSON to a data structure.
    paymentMethod: STATE_DATA,
    amount: { currency: "EUR", value: 1000, },
    reference: "YOUR_ORDER_NUMBER",
    returnUrl: "your-app://"
}).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 the paymentMethod field of an object passed from the front end or client app, deserialized from JSON to a data structure.
paymentMethod := STATE_DATA
res, httpRes, err := client.Checkout.Payments(&checkout.PaymentRequest{
    PaymentMethod: paymentMethod,
    Amount: checkout.Amount{
        Value:    1000,
        Currency: "EUR",
    },
    Reference: "YOUR_ORDER_NUMBER",
    ReturnUrl: "your-app://",
    MerchantAccount: "[YOUR_MERCHANT_ACCOUNT]",
})

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

Description Next steps
No action object No additional steps are needed to complete the payment. Use the resultCode to show the payment result to your shopper.
With action object The shopper needs to do additional actions to complete the payment. 1. Pass the action object to your front end. The Native Component uses this to handle the required action.
2. Proceed to step 4.

The following example shows the /payments response for iDEAL, a redirect payment method.

/payments response
{
  "resultCode": "RedirectShopper",
  "action": {
    "paymentMethodType": "ideal",
    "url": "https://checkoutshopper-test.adyen.com/checkoutshopper/checkoutPaymentRedirect?redirectData=X6Xtf...",
    "method": "GET",
    "type": "redirect"
  }
}

Errors

If an error occurs, you get an error object from the onFail callback with one of the following error codes:

Error code Description Action to take
canceledByShopper The shopper cancelled the payment. Take the shopper back to the checkout page.
notSupported The payment method isn't supported by the shopper's device. Tell the shopper that the payment method isn't supported by their device.
noClientKey No clientKey configured. Tell the shopper that an error occurred.
noPayment No payment information configured. Tell the shopper that an error occurred.
invalidPaymentMethods Can't parse the paymentMethods list, or the list is empty. Tell the shopper that an error occurred.
noPaymentMethod Can't find the selected payment method. Tell the shopper that their selected payment method is currently unavailable.

Step 4: Perform additional front-end actions

Some payment methods require additional action from the shopper such as: to scan a QR code, to authenticate a payment with 3D Secure, or to log in to their bank's website to complete the payment.

To handle these additional front-end actions, the AdyenCheckout provides a handle function to perform the next step depending on the action.type.

action.type Description Next steps
voucher Drop-in displays the voucher which the shopper
uses to complete the payment.
1. Proceed to step 6 and inform the shopper that you are waiting for the payment.
2. Wait for the notification webhook to know the payment result.
redirect Drop-in redirects the shopper to another website or app to complete the payment. 1. When the shopper returns to your website, your server needs to handle the redirect result.
2. Proceed to step 5 to check the payment result.
qrCode Drop-in shows the QR code
and calls the onProvide event.
1. Get the data from the onProvide event and pass it your server.
2. Proceed to step 5 to check the payment result.
await Drop-in shows the waiting screen while the shopper completes the payment.
Depending on the payment outcome, Drop-in calls the onProvide or onFail event.
1. Get the data from the onProvide or onFail event and pass it your server.
2. Proceed to step 5 to check the payment result.
sdk Drop-in shows the specific payment method's UI as an overlay and calls the onProvide event. 1. Get the data from the onProvide event and pass it your server.
2. Proceed to step 5 to check the payment result.
threeDS2 The payment qualifies for 3D Secure 2 and goes through the authentication flow.
Drop-in performs the authentication flow, and calls the onProvide event.
1. Get the data from the onProvide event and pass it your server.
2. Proceed to step 5 to complete the payment.

Call handle from one of Adyen's Native Components and pass the action to. For example:

Handle the action
// Call the handle function from the Native Component corresponding to the payment method.
nativeComponent.handle(action)

Handle the redirect result

If you receive an action.type redirect, Drop-in redirects your shopper to another website to complete the payment.

After completing the payment, the shopper is redirected back to your returnUrl with an HTTP GET. The returnUrl is appended with a Base64-encoded redirectResult:

The redirect result
GET /?shopperOrder=12xy..&&redirectResult=X6XtfGC3%21Y... HTTP/1.1
Host: your-app://checkout
  1. URL-decode the redirectResult and pass it to your back end.
  2. Proceed to step 5.

If a shopper completed the payment but failed to return to your website, wait for the webhook to know the payment result.

Step 5: Submit additional payment details

If the shopper performed additional action to complete the payment, you need to make another request to Adyen to either submit the additional payment details or to check the payment result.

From your server, make a POST /payments/details request with the data from the didProvide method from your client app.

curl https://checkout-test.adyen.com/v69/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.PaymentDetails(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)

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.
This is always the case for Checkout API v67 and above.
Use the resultCode to show the payment result to your shopper.
action object The shopper needs to do additional actions to complete the payment. 1. Pass the action object to your client app.
2. Perform step 4 again.

The response includes:

  • pspReference: Adyen's unique identifier for the transaction.
  • resultCode: Indicates the status of the payment. Use this to show the payment result to your shopper in step 6.
Successful payment response
 {
   "pspReference": "NC6HT9CRT65ZGN82",
   "resultCode": "Authorised"
 }
Refused response
 {
   "pspReference": "KHQC5N7G84BLNK43",
   "refusalReason": "Not enough balance",
   "resultCode": "Refused"
 }

Step 6: Show payment result

Use the resultCode from the response to show the result of the payment to the shopper. To update your order management system, use the webhook that we send you instead.

Webhook with payment outcome

You get the outcome of each payment asynchronously, in a notification webhook with eventCode: AUTHORISATION.
For a successful payment, the notification contains success: true.

Example webhook for a successful payment
{
  "live": "false",
  "notificationItems":[
    {
      "NotificationRequestItem":{
        "eventCode":"AUTHORISATION",
        "merchantAccountCode":"YOUR_MERCHANT_ACCOUNT",
        "reason":"033899:1111:03/2030",
        "amount":{
          "currency":"EUR",
          "value":2500
        },
        "operations":["CANCEL","CAPTURE","REFUND"],
        "success":"true",
        "paymentMethod":"mc",
        "additionalData":{
          "expiryDate":"03/2030",
          "authCode":"033899",
          "cardBin":"411111",
          "cardSummary":"1111",
          "checkoutSessionId":"CSF46729982237A879"
        },
        "merchantReference":"YOUR_REFERENCE",
        "pspReference":"NC6HT9CRT65ZGN82",
        "eventDate":"2021-09-13T14:10:22+02:00"
      }
    }
  ]
}

For an unsuccessful payment, you get success: false, and the reason field has details about why the payment was unsuccessful.

Example webhook for an unsuccessful payment
{
  "live": "false",
  "notificationItems":[
    {
      "NotificationRequestItem":{
        "eventCode":"AUTHORISATION",
        "merchantAccountCode":"YOUR_MERCHANT_ACCOUNT",
        "reason":"validation 101 Invalid card number",
        "amount":{
          "currency":"EUR",
          "value":2500
        },
        "success":"false",
        "paymentMethod":"unknowncard",
        "additionalData":{
          "expiryDate":"03/2030",
          "cardBin":"411111",
          "cardSummary":"1112",
          "checkoutSessionId":"861631540104159H"
        },
        "merchantReference":"YOUR_REFERENCE",
        "pspReference":"KHQC5N7G84BLNK43",
        "eventDate":"2021-09-13T14:14:05+02:00"
      }
    }
  ]
}

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

To debug or troubleshoot test payments, you can also use API logs in your test environment.

When you are ready to go live, you need to:

  1. Apply for a live account. Review the process to start accepting payments on Get started with Adyen.
  2. Assess your PCI DSS compliance by submitting the Self-Assessment Questionnaire-A.
  3. Configure your live account
  4. Submit a request to add payment methods in your live Customer Area .
  5. Switch from test to our live endpoints.
  6. Load Drop-in from one of our live environments and set the environment to match your live endpoints:
Endpoint region environment value
Europe live
Australia live-au
US live-us

Next steps