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!
Drop-in on GitHub:
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:
- The shopper goes to the checkout page.
- Your server uses the shopper's country and currency information from your client to get available payment methods.
- Drop-in shows the available payment methods, collects the shopper's payment details, handles additional actions, and shows the payment result to the shopper.
- 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:
- Get your API key.
- Get your client key.
- Set up webhooks to know the payment outcome.
- Install a server-side library.
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 |
![]() |
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
:
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
3. Configure Adyen Checkout
Create a configuration object with the following properties:
Parameter | Required | Description | |
---|---|---|---|
environment |
![]() |
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 |
![]() |
A public key linked to your API credential, used for client-side authentication. | |
returnUrl |
![]() |
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:
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
- 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. |
For example:
// 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>
- Create a way, like a button, for
AdyenCheckout
to call thestart
function.
// 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 |
![]() |
Your merchant account name. |
amount |
![]() |
The currency of the payment and its value in minor units. |
reference |
![]() |
Your unique reference for this payment. |
paymentMethod |
![]() |
The payment method from the payload of the onSubmit event from your front end. |
returnUrl |
![]() 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.
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 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
:
- URL-decode the
redirectResult
and pass it to your back end. - 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.
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.
{
"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.
{
"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 Transactions > Payments.
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:
- Apply for a live account. Review the process to start accepting payments on Get started with Adyen.
- Assess your PCI DSS compliance by submitting the Self-Assessment Questionnaire-A.
- Configure your live account.
- Submit a request to add payment methods in your live Customer Area .
- Switch from test to our live endpoints.
- 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 |