You can update the payment amount after making the /sessions request, for example if the shopper updates their cart during checkout. Implement methods that make additional API requests for Drop-in to update the payment amount.
Before you begin
This page assumes you've already built a Drop-in integration.
How it works
After the /sessions request:
- When the shopper selects the Pay button with an updated amount, your Drop-in calls a handler that you implement to make a
/payments
request. - Your Drop-in calls a handler that you implement for the additional action if required.
- You show the payment result.
Step 1: Make a payment request
Drop-in requires additional methods that you must implement to make a payment request outside of the session:
handlerForPayments
: provides a handler to make a payment request.didSubmit
: makes a /payments request.
1. Implement the handlerForPayments
method
When the shopper selects the Pay button, Drop-in calls handlerForPayments
which returns an instance of AdyenSessionPaymentsHandler
.
The following example shows an implementation that returns an instance of AdyenSessionPaymentsHandler
if the payment method is Apple Pay:
//Create a type that conforms to AdyenSessionPaymentDetailsHandler.
//Implement this in AdyenSessionDelegate.
func handlerForPayments(in component: PaymentComponent,
session: AdyenSession) -> AdyenSessionPaymentsHandler? {
//Check that the payment method is Apple Pay.
if component is ApplePayComponent {
//This instance has the didSubmit method that the AdyenSession calls.
return myPaymentsHandlerInstance
}
//AdyenSession handles the payment flow. No additional API request.
return nil
}
2. Implement the didSubmit
method
Drop-in calls didSubmit
from the instance of AdyenSessionPaymentsHandler
, making a /payments request with the required data:
// Implement this in AdyenSessionDelegate
func didSubmit(_ paymentComponentData: PaymentComponentData,
from component: Component,
dropInComponent: AnyDropInComponent?,
session: AdyenSession) {
// Make a /payments request with paymentComponentData
// which includes the updated payment amount.
}
To make a /payments request, include the following:
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 state.data.paymentMethod from the onSubmit event from your front end. |
returnUrl |
![]() |
URL to where the shopper should be taken back to after a redirection. The URL can contain a maximum of 1024 characters and should include the protocol: http:// or https:// . You can also include your own additional query parameters, for example, shopper ID or order reference number. |
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. |
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":"my-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 => 'my-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("my-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" => "my-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': 'my-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 = @"my-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: "my-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: "my-app://",
MerchantAccount: "[YOUR_MERCHANT_ACCOUNT]",
})
3. Handle the payment response
The next step depends on if the /payments response contains an action
object:
Response includes | Next steps |
---|---|
No action object |
Use the resultCode to show the payment result to your shopper. |
action object |
1. Pass the action object to your front end.2. Call the handle(action) method from Drop-in, passing the action object. |
The following example shows a /payments response with action.type
: redirect.
Possible action
types include:
Type | Description |
---|---|
redirect | Redirect the shopper to another URL. |
sdk | Show the specific payment method's UI as an overlay. |
threeDS2Fingerprint Checkout API v66 and earlier. |
The payment qualifies for 3D Secure 2 and must go through either the frictionless or the challenge flow. |
threeDS2Challenge Checkout API v66 and earlier. |
The payment qualifies for 3D Secure 2, and the issuer initiates the challenge flow. |
threeDS2 Checkout API v67 and later. |
The shopper must perform 3D Secure 2 authentication. |
await | The shopper must go to another app or site to complete the payment. |
voucher | Show a voucher to the shopper. |
qrCode | Show a QR code to the shopper. |
document | Show a document to the shopper. |
Step 2: Implement a handler for additional actions
If you receive an action
object in the /payments response, call the handle(action)
method. Drop-in requires additional methods you must implement:
handlerForAdditionalDetails
: handler to submit additional details from the action.didProvide
: makes a /payments/details request.
1. Implement the handlerForAdditionalDetails
method
The Drop-in session
calls handlerForAdditionalDetails
.
The following example shows an implementation that handles, for example, the 3D Secure 2 action:
- If the
component
type isThreeDS2Component
, the method returns an instance ofAdyenSessionPaymentDetailsHandler
. - The
session
callsdidProvide
frommyPaymentDetailsHandlerInstance
to submit additional data from theThreeDS2Component
in a /payments/details request.
// Create a type that conforms to AdyenSessionPaymentDetailsHandler.
// Implement this in AdyenSessionDelegate.
func handlerForAdditionalDetails(in component: ActionComponent,
session: AdyenSession) -> AdyenSessionPaymentDetailsHandler? {
if component is ThreeDS2Component {
// This instance has the didProvide method that the AdyenSession calls.
return myPaymentDetailsHandlerInstance
}
// AdyenSession handles the flow. No additional API request.
return nil
}
2. Implement the didProvide
method
The Drop-in session
calls didProvide
from AdyenSessionPaymentDetailsHandler
, making a /payments/details request from your server with required data:
3. For redirects, implement the application
method
If the type of action is redirect, the shopper is redirected to an external site or application to complete the payment. When the shopper returns to your app, the Drop-in session
calls the application
method to pass the required data:
Step 3: Show the payment result
Use the resultCode
from the /payments or /payments/details response to show the payment result to the shopper.