Are you looking for test card numbers?

Would you like to contact support?

Default icon

Redirect 3D Secure Component integration

Add 3D Secure authentication with a redirect to your integration.

The Card Component handles 3D Secure redirect flow to complete the required 3D Secure authentication.

Follow the instructions on this page if your integration uses the /payments or /payments/details endpoint, and Checkout API 49 or later.

If your integration uses only the /sessions endpoint, you don't need additional configuration for 3D Secure. If you're using Checkout API 46 or earlier, follow instructions in the 3D Secure 2 integration guide for v46 or earlier.

To handle card payments with redirect 3D Secure authentication:

  1. Get additional shopper details in your payment form.
  2. Make a payment request with additional 3D Secure parameters.
  3. Redirect the shopper to perform 3D Secure authentication.
  4. Handle the redirect result when the shopper returns to your page.
  5. Show the payment result.

Before you begin

This page assumes you've already built a Card Component integration.

If you are using 3D Secure for PSD2 compliance, read our comprehensive PSD2 SCA guide.

Step 1: Get additional shopper details in your payment form

For higher authentication rates, we strongly recommend that you collect the shopper's email address, cardholder name, billing address, and IP address for payments with 3D Secure authentication.

Get the shopper's email outside of the Card Component because it doesn't have a configuration to include shopper email in the payment form.

To get the cardholder name and billing address in your payment form, include the following when creating an instance of the Card Component:

  • hasHolderNametrue. This shows the input field for the cardholder name.
  • holderNameRequired: true. This makes the cardholder name a required field.
  • billingAddressRequired: true. This shows the billing address input fields.
     const card = checkout.create("card", {
         hasHolderName: true,
         holderNameRequired: true,
         billingAddressRequired: true
     }).mount("#card-container");

Step 2: Make a payment

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

Parameter name Required Description
paymentMethod -white_check_mark- The state.data.paymentMethod object from the onChange event.
For higher authentication rates, we strongly recommend including paymentMethod.holderName.
browserInfo -white_check_mark- The state.data.browserInfo object from the onChange event.
authenticationData.threeDSRequestData.nativeThreeDS -white_check_mark- Set to preferred. Indicates that your payment page can handle 3D Secure 2 transactions natively.
channel -white_check_mark- Set to Web.
origin -white_check_mark- The origin URL of the page where you are rendering the Component. This can be a maximum of 80 characters and should not include subdirectories and a trailing slash. For example, if you are rendering the Component on https://your-company.com/checkout/payment, specify: https://your-company.com.

To get the origin:
  • Open the browser console and call window.location.origin.
returnUrl -white_check_mark- In case of a 3D Secure 1 flow, this is the URL where the shopper will be redirected back to after completing 3D Secure 1 authentication. The URL should include the protocol: http:// or https://. For example, https://your-company.com/checkout/. You can also include your own additional query parameters, for example, shopper ID or order reference number.
billingAddress The state.data.billingAddress object from the onSubmit event.
shopperEmail The cardholder's email address.
shopperIP The shopper's IP address.
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",
   "shopperReference":"YOUR_UNIQUE_SHOPPER_ID",
   "{hint:state.data.paymentMethod from onSubmit}paymentMethod{/hint}":{
      "type":"scheme",
      "encryptedCardNumber":"adyenjs_0_1_18$k7s65M5V0KdPxTErhBIPoMPI8HlC..",
      "encryptedExpiryMonth":"adyenjs_0_1_18$p2OZxW2XmwAA8C1Avxm3G9UB6e4..",
      "encryptedExpiryYear":"adyenjs_0_1_18$CkCOLYZsdqpxGjrALWHj3QoGHqe+..",
      "encryptedSecurityCode":"adyenjs_0_1_24$XUyMJyHebrra/TpSda9fha978+..",
      "holderName":"S. Hopper"
   },
   "{hint:state.data.browserInfo from onSubmit}browserInfo{/hint}":{
      "userAgent":"Mozilla\/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit\/537.36 (KHTML, like Gecko) Chrome\/70.0.3538.110 Safari\/537.36",
      "acceptHeader":"text\/html,application\/xhtml+xml,application\/xml;q=0.9,image\/webp,image\/apng,*\/*;q=0.8",
      "language":"nl-NL",
      "colorDepth":24,
      "screenHeight":723,
      "screenWidth":1536,
      "timeZoneOffset":0,
      "javaEnabled":true
   },
   "{hint:state.data.billingAddress from onSubmit}billingAddress{/hint}": {
       "street": "Infinite Loop",
       "houseNumberOrName": "1",
       "postalCode": "1011DJ",
       "city": "Amsterdam",
       "country": "NL"
  },
   "shopperEmail":"s.hopper@example.com",
   "shopperIP":"192.0.2.1",
   "channel":"web",
   "origin":"https://your-company.com",
   "returnUrl":"https://your-company.com/checkout?shopperOrder=12xy..",
   "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"

response = adyen.checkout.payments({
    :paymentMethod => {     # Data object passed from Component, parsed from JSON to a Hash.
        :type => "scheme",
        :encryptedCardNumber => "adyenjs_0_1_18$k7s65M5V0KdPxTErhBIPoMPI8HlC..",
        :encryptedExpiryMonth => "adyenjs_0_1_18$p2OZxW2XmwAA8C1Avxm3G9UB6e4..",
        :encryptedExpiryYear => "adyenjs_0_1_18$CkCOLYZsdqpxGjrALWHj3QoGHqe+..",
        :encryptedSecurityCode => "adyenjs_0_1_24$XUyMJyHebrra/TpSda9fha978+..",
        :holderName => "S. Hopper"
  },
    :billingAddress => {
        :city => "Amsterdam",
        :country => "NL",
        :houseNumberOrName => "1",
        :postalCode => "1011DJ",
        :street => "Infinite Loop"
  },
    :browserInfo => {        # Data object passed from the onSubmit event, parsed from JSON to a Hash.
        :userAgent =>  "Mozilla\/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit\/537.36 (KHTML, like Gecko) Chrome\/70.0.3538.110 Safari\/537.36",
        :acceptHeader => "text\/html,application\/xhtml+xml,application\/xml;q=0.9,image\/webp,image\/apng,*\/*;q=0.8",
        :language => "nl-NL",
        :colorDepth => 24,
        :screenHeight => 723,
        :screenWidth => 1536,
        :timeZoneOffset => 0,
        :javaEnabled => "true"
  },
    :amount => {
        :currency => 'EUR',
        :value => 1000
    },
    :channel => 'Web',
    :reference => 'YOUR_ORDER_NUMBER',
    :shopperEmail => "s.hopper@example.com",
    :shopperIP => "192.0.2.1",
    :origin => "https://your-company.com",
    :returnUrl => 'https://your-company.com/checkout?shopperOrder=12xy..',
    :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);
PaymentsRequest paymentsRequest = new PaymentsRequest();
paymentsRequest.setMerchantAccount("YOUR_MERCHANT_ACCOUNT");
DefaultPaymentMethodDetails paymentMethodDetails = new DefaultPaymentMethodDetails();
paymentMethodDetails.setType("scheme");
paymentMethodDetails.setEncryptedCardNumber("adyenjs_0_1_18$k7s65M5V0KdPxTErhBIPoMPI8HlC..");
paymentMethodDetails.setEncryptedExpiryMonth("adyenjs_0_1_18$p2OZxW2XmwAA8C1Avxm3G9UB6e4..");
paymentMethodDetails.setEncryptedExpiryYear("adyenjs_0_1_18$CkCOLYZsdqpxGjrALWHj3QoGHqe+..");
paymentMethodDetails.setEncryptedSecurityCode("adyenjs_0_1_24$XUyMJyHebrra/TpSda9fha978+..");
paymentMethodDetails.setHolderName("S. Hopper");

paymentsRequest.setPaymentMethod(paymentMethodDetails);
Amount amount = new Amount();
amount.setCurrency("EUR");
amount.setValue(1000L);
paymentsRequest.setAmount(amount);
Address billingAddress = new Address();
billingAddress.setCity("Amsterdam");
billingAddress.setCountry("NL");
billingAddress.setHouseNumberOrName("1");
billingAddress.setPostalCode("1011DJ");
billingAddress.setStreet("Infinite Loop");

paymentsRequest.setBillingAddress(billingAddress);
BrowserInfo browserInfo = new BrowserInfo();
browserInfo.setUserAgent("Mozilla\/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit\/537.36 (KHTML, like Gecko) Chrome\/70.0.3538.110 Safari\/537.36");
browserInfo.setAcceptHeader("text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8");
browserInfo.setLanguage("nl-NL");
browserInfo.setColorDepth(24);
browserInfo.setScreenHeight(723);
browserInfo.setScreenWidth(1536);
browserInfo.setTimeZoneOffset(0);
browserInfo.setJavaEnabled(true);
{ % REQUEST_INSTANCE % }.setChannel({ % REQUEST_CLASS % }.ChannelEnum.Web);
paymentsRequest.setReference("YOUR_ORDER_NUMBER");
paymentsRequest.setShopperEmail("s.hopper@example.com");
paymentsRequest.setShopperIP("192.0.2.1");
 paymentsRequest.setOrigin("https://your-company.com");
paymentsRequest.setReturnUrl("https://your-company.com/checkout?shopperOrder=12xy..");
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);

$params = array(
    "paymentMethod" => {
        "type" => "scheme",
        "encryptedCardNumber" => "adyenjs_0_1_18$k7s65M5V0KdPxTErhBIPoMPI8HlC..",
        "encryptedExpiryMonth" => "adyenjs_0_1_18$p2OZxW2XmwAA8C1Avxm3G9UB6e4..",
        "encryptedExpiryYear" => "adyenjs_0_1_18$CkCOLYZsdqpxGjrALWHj3QoGHqe+..",
        "encryptedSecurityCode" => "adyenjs_0_1_24$XUyMJyHebrra/TpSda9fha978+..",
        "holderName" => "S. Hopper"
  ],
    "billingAddress" => [
        "city" => "Amsterdam",
        "country" => "NL",
        "houseNumberOrName" => "1",
        "postalCode" => "1011DJ",
        "street" => "Infinite Loop"
  ],
    "browserInfo" => [
        "userAgent" => "Mozilla\/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit\/537.36 (KHTML, like Gecko) Chrome\/70.0.3538.110 Safari\/537.36",
        "acceptHeader" => "text\/html,application\/xhtml+xml,application\/xml;q=0.9,image\/webp,image\/apng,*\/*;q=0.8",
        "language" => "nl-NL",
        "colorDepth" => 24,
        "screenHeight" => 723,
        "screenWidth" => 1536,
        "timeZoneOffset" => 0,
        "javaEnabled" => true
  ],
    "amount" => array(
        "currency" => "EUR",
        "value" => 1000
    ),
    "channel" => "Web",
    "reference" => "YOUR_ORDER_NUMBER",
    "shopperEmail" = "s.hopper@example.com",
    "shopperIP" => "192.0.2.1",
    "origin" => "https://your-company.com",
    "returnUrl" => "https://your-company.com/checkout?shopperOrder=12xy..",
    "merchantAccount" => "YOUR_MERCHANT_ACCOUNT"
);
$result = $service->payments($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'

result = adyen.checkout.payments({
    'paymentMethod': {
        'type': 'scheme',
        'encryptedCardNumber': 'adyenjs_0_1_18$k7s65M5V0KdPxTErhBIPoMPI8HlC..',
        'encryptedExpiryMonth': 'adyenjs_0_1_18$p2OZxW2XmwAA8C1Avxm3G9UB6e4..',
        'encryptedExpiryYear': 'adyenjs_0_1_18$CkCOLYZsdqpxGjrALWHj3QoGHqe+..',
        'encryptedSecurityCode': 'adyenjs_0_1_24$XUyMJyHebrra/TpSda9fha978+..',
        'holderName': 'S. Hopper'
  },
    'billingAddress': {
        'street': 'Infinite Loop',
        'houseNumberOrName': '1',
        'postalCode': '1011DJ',
        'city': 'Amsterdam',
        'country': 'NL'
  },
    'browserInfo': {
        'userAgent':  'Mozilla\/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit\/537.36 (KHTML, like Gecko) Chrome\/70.0.3538.110 Safari\/537.36',
        'acceptHeader': 'text\/html,application\/xhtml+xml,application\/xml;q=0.9,image\/webp,image\/apng,*\/*;q=0.8',
        'language': 'nl-NL',
        'colorDepth': 24,
        'screenHeight': 723,
        'screenWidth': 1536,
        'timeZoneOffset': 0,
        'javaEnabled': 'true'
  },
    'amount': {
        'value': 1000,
        'currency': 'EUR'
    },
    'channel': 'Web',
    'reference': 'YOUR_ORDER_NUMBER',
    'shopperEmail': 's.hopper@example.com',
    "shopperIP": "192.0.2.1",
    "origin": "https://your-company.com",
    'returnUrl': 'https://your-company.com/checkout?shopperOrder=12xy..',
    'merchantAccount': 'YOUR_MERCHANT_ACCOUNT'
})
// 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 paymentRequest = new Adyen.Model.Checkout.PaymentRequest
{ 
    PaymentMethod = new DefaultPaymentMethodDetails
    {
        EncryptedCardNumber = "adyenjs_0_1_18$k7s65M5V0KdPxTErhBIPoMPI8HlC..",
        EncryptedExpiryMonth = "adyenjs_0_1_18$p2OZxW2XmwAA8C1Avxm3G9UB6e4..",
        EncryptedExpiryYear = "adyenjs_0_1_18$CkCOLYZsdqpxGjrALWHj3QoGHqe+..",
        EncryptedSecurityCode = "adyenjs_0_1_24$XUyMJyHebrra/TpSda9fha978+..",
        HolderName = "S. Hopper",
        Type = "scheme"
    },
    BillingAddress = new Model.Checkout.Address
    {
        City = "Amsterdam",
        Country = "NL",
        HouseNumberOrName = "1",
        PostalCode = "1011DJ",
        Street = "Infinite Loop"
    },
    BrowserInfo = new Model.Checkout.BrowserInfo
    {
        UserAgent = @"Mozilla\/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit\/537.36 (KHTML, like Gecko) Chrome\/70.0.3538.110 Safari\/537.36",
        AcceptHeader = @"text\/html,application\/xhtml+xml,application\/xml;q=0.9,image\/webp,image\/apng,*\/*;q=0.8"
        Language = "nl-NL",
        ColorDepth = 24,
        ScreenHeight = 723,
        ScreenWidth = 1536,
        TimeZoneOffset = 0,
        JavaEnabled = true
    },
    Amount = amount,
    Channel = PaymentMethodsRequest.ChannelEnum.Web
    Reference = "YOUR_ORDER_NUMBER",
    ShopperEmail = "s.hopper@example.com",
    ShopperIP = "192.0.2.1",
    Origin = "https://your-company.com",
    ReturnUrl = @"https://your-company.com/checkout?shopperOrder=12xy..",
};
var paymentResponse = checkout.Payment(paymentRequest);
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,
    paymentMethod: {
        type: "scheme",
        encryptedCardNumber: "adyenjs_0_1_18$k7s65M5V0KdPxTErhBIPoMPI8HlC..",
        encryptedExpiryMonth: "adyenjs_0_1_18$p2OZxW2XmwAA8C1Avxm3G9UB6e4..",
        encryptedExpiryYear: "adyenjs_0_1_18$CkCOLYZsdqpxGjrALWHj3QoGHqe+..",
        encryptedSecurityCode: "adyenjs_0_1_24$XUyMJyHebrra/TpSda9fha978+..",
        holderName: "S. Hopper"
  },
    browserInfo:{
        userAgent: "Mozilla\/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit\/537.36 (KHTML, like Gecko) Chrome\/70.0.3538.110 Safari\/537.36",
        acceptHeader: "text\/html,application\/xhtml+xml,application\/xml;q=0.9,image\/webp,image\/apng,*\/*;q=0.8",
        language: "nl-NL",
        colorDepth: 24,
        screenHeight: 723,
        screenWidth: 1536,
        timeZoneOffset: 0,
        javaEnabled: true
  },
    billingAddress: {
        city: "Amsterdam",
        country: "NL",
        houseNumberOrName: "1",
        postalCode: "1011DJ",
        street: "Infinite Loop"
  },
    amount: { currency: "EUR", value: 1000, },
    channel: "Web",
    reference: "YOUR_ORDER_NUMBER",
    shopperEmail: "s.hopper@example.com",
    shopperIP: "192.0.2.1",
    origin: "https://your-company.com",
    returnUrl: "https://your-company.com/checkout?shopperOrder=12xy..",
}).then(res => res);

Your next steps depend on whether the /payments response contains an action object. Choose your API version:

Description Next steps
No action object The transaction was either exempted or out-of-scope for 3D Secure authentication. Use the resultCode to show the payment result to your shopper.
action object
type:redirect
The payment qualifies for 3D Secure. 1. Pass the action object to your front end and redirect the shopper.
2. Handle the redirect result.

A sample /payments response with action.type: redirect:

/payments response
      {
        "resultCode": "RedirectShopper",
        "action": {
          "paymentMethodType": "scheme",
          "url": "https://test.adyen.com/hpp/3d/validate.shtml",
          "data": {
            "MD": "OEVudmZVMUlkWjd0MDNwUWs2bmhSdz09...",
            "PaReq": "eNpVUttygjAQ/RXbDyAXBYRZ00HpTH3wUosPfe...",
            "TermUrl": "https://example.com/checkout?shopperOrder=12xy..."
          },
          "method": "POST",
          "type": "redirect"
        }
      }

Step 3: Redirect the shopper

If you receive action.type: redirect, Card Component handles the redirect:

  1. Call handleAction, passing the action object from the /payments response.
  2. The Component redirects the shopper to the issuer page (the action.url) to perform 3D Secure authentication.
  3. When the shopper completes authentication, the payment is authorized. The shopper is redirected back to the returnUrl from your /payments request.

Test environment

In our test environment, you can perform the authentication with test credentials.The action.url for testing is https://test.adyen.com/hpp/3d/validate.shtml.
Perform the authentication using the 3D Secure test credentials:

  • Username: user
  • Password: password

Step 4: Handle the redirect result

The issuer (or our back end, if you're using the test environment) redirects the shopper back to the returnUrl from your payment request.

Verify the payment result

The redirect uses HTTP GET and is appended with the Base64-encoded redirectResult.

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

GET /?shopperOrder=12xy...&&redirectResult=X6XtfGC3%21Y.... HTTP/1.1
Host: www.your-company.com/checkout

To verify the payment result, make another API request with the redirectResult parameter:

  1. URL-decode the redirectResult, and pass it to your server.

  2. From your server, make a /payments/details request specifying:
    • details: Object that contains the decoded redirectResult.
/payments/details request
 curl https://checkout-test.adyen.com/v69/payments/details \
 -H "x-API-key: YOUR_X-API-KEY" \
 -H "content-type: application/json" \
 -d '{
      "details": {
        "redirectResult": "eyJ0cmFuc1N0YXR1cyI6IlkifQ=="
    }
 }'

The /payments/details response contains:

/payments/details response
    {
     "resultCode": "Authorised",
     "pspReference": "V4HZ4RBFJGXXGN82"
   }

Step 5: Show the payment result

Use the resultCode from the /payments or /payments/details response to present the payment result to your shopper. You will also receive the outcome of the payment asynchronously in a notification webhook.

For card payments, you can receive the following resultCode values:

resultCode Description Action to take
Authorised The payment was successful. Inform the shopper that the payment has been successful.
If you are using manual capture, you also need to capture the payment.
Cancelled The shopper cancelled the payment. Ask the shopper if they want to continue with the order, or ask them to select a different payment method.
Error There was an error when the payment was being processed. For more information, check the refusalReason field. Inform the shopper that there was an error processing their payment.
Refused The payment was refused. For more information, check the refusalReason field. Ask the shopper to try the payment again using a different payment method.

Test and go live

Use our test card numbers to test how your integration handles different 3D Secure authentication scenarios.

See also