Are you looking for test card numbers?

Would you like to contact support?

Payment-method icon

Custom card integration

Build your own UI and use Adyen's client-side solutions to encrypt card details.

To ensure PCI compliance as you build your own cards payment form, use our client-side solutions to help encrypt card details.

  • For web: Build your own UI for the card payment form, and then use our Custom Card Web Component to collect, validate, and encrypt your shopper's card details. The Component renders card input fields in iframes served by Adyen.
  • For iOS and Android: Build your own UI for the card payment form, collect the shopper's card details, and then use Adyen classes to validate and encrypt the data in your client app.

If you'd rather not build your own card payment form, use Drop-in or Card Component for web, iOS, or Android instead.

Before you begin

These instructions explain how to add card payments to your existing API-only integration. The API-only integration works the same way for all payment methods. If you haven't done this integration yet, refer to our API-only integration guide.

Before starting your integration:

  1. Make sure that you have set up your back end implementation.
  2. Add the cards that you want to support in your test Customer Area.

Show the available cards in your payment form

For information about the supported countries and currencies for each card, refer to Payment methods.

Specify in your /paymentMethods request a combination of countryCode and amount.currency, and use the /paymentMethods response to determine which cards are available to the shopper. For more information, refer to our API-only integration guide.

Next, use our client-side solutions to validate and encrypt your shopper's card details. Select the platform below:

The Custom Card Component renders card input fields in iframes served by Adyen. Use this to collect, validate, and encrypt your shopper's card details.

  1. Install the Custom Card Component. Either install the Adyen Web Node package or use a <script> tag:

    • npm (recommended)

      a. Install the Adyen Web Node package:

      npm install @adyen/adyen-web --save

      b. Import Adyen Web into your application:

      import AdyenCheckout from '@adyen/adyen-web';
import '@adyen/adyen-web/dist/adyen.css';

    • Script

      a. Include the following script in the <body> above any other JavaScript in your checkout page:

      We recommend that you also validate the Subresource Integrity (SRI) hash, which we provide for each version of our JavaScript and CSS files. You can find the SRI hashes in our release notes, under Updating to this version.

      <script src="https://checkoutshopper-test.adyen.com/checkoutshopper/sdk/{VERSION}/adyen.js"
integrity="sha384-KF6Y8NQXGnIuzqJn5rcqCe6dMy7gBWobcIKr1BmIaz6pOeBAV0hrHBBMbHC/inHu"
crossorigin="anonymous"></script>
<!-- Adyen provides the SRI hash that you include as the integrity attribute.-->
<!-- Refer to our release notes to get the SRI hash for the specific version: https://docs.adyen.com/online-payments/release-notes -->

      b. Use the following CSS file:

      <link rel="stylesheet" href="https://checkoutshopper-test.adyen.com/checkoutshopper/sdk/{VERSION}/adyen.css"
integrity="sha384-uwMmo3xJR0e9jI+Oi5kzu43ShY0pXrb3auIlCjLjMNtl0X8Nat55eXNqwj8xU6H9"
crossorigin="anonymous">
<!-- Adyen provides the SRI hash that you include as the integrity attribute. -->
<!-- Refer to our release notes to get the SRI hash for the specific version: https://docs.adyen.com/online-payments/release-notes -->

      You can add your own styling by overriding the rules in this CSS file.

  2. Create a configuration object, specifying the following parameters:

    Parameter Description
    locale The shopper's locale. This is used to set the language rendered in the Components. For a list of supported locales, see Localization.
    clientKey A public key linked to your API credential, used for client-side authentication.
    environment Use test. When you're ready to accept live payments, change the value to match your live endpoints:
    - Europe: live
    - Australia: live-aus
    - US: live-us
    - Asia Pacific South East: live-apse
    onChange Specify a function to handle the onChange event that the Component calls after the shopper provides the required card details. 
      function handleOnChange(state, component) {
      state.isValid // True or false. Specifies if all the information that the shopper provided is valid.
      state.data // Provides the data that you need to pass in the `/payments` call.
      component // Provides the active component instance that called this event.
  }

  const configuration = {
      locale: "en_US",
      environment: "test",
      clientKey: "YOUR_CLIENT_KEY",
      onChange: handleOnChange
  };

  1. Use the configuration object to create an instance of AdyenCheckout. In Components versions 5.0.0 or later, the creation of AdyenCheckout is asynchronous:

    • v5.0.0 or later:

      const checkout = await AdyenCheckout(configuration);

    • before v5.0.0:

      const checkout = new AdyenCheckout(configuration);

  2. Implement callbacks to handle the following events triggered by the Custom Card Component:

    Event Description
    onAutoComplete Provides the card holder name when a shopper uses Chrome or Safari's autofill function to fill out the card holder name field.
    onChange Called when the shopper enters data in the card input fields. Here you have the option to override your main Adyen Checkout configuration. v5.0.0 or later you can also watch state.errors and call the custom card specific setErrors function.
    onLoad Called when all the card input fields have been created but are not yet ready to use.
    onConfigSuccess Called when the card input fields are ready to use.
    onFieldValid Called when the input in a field becomes valid and also if the input changes and becomes invalid. For the card number field, it returns the last 4 digits of the card number.
    onBrand Called when the card brand is detected.
    onError Called when card number or expiry date is invalid, or a field is incomplete field. Called again when errors are cleared. v5.0.0 or later: the onError handler is no longer used only for custom card component related errors. You can also watch state.errors from the onChange event.
    onFocus Called when a field gains focus.
    onBinValue Call when the shopper enters the card number. Provides the BIN Number of the card (up to 8 digits).
    onBinLookup
    v4.6.0 or later    		 Called when the shopper enters the card number. Returns the following:
    - type: type of the card.
    - brands: brands on the card.
    - supportedBrands: the brands you support.
    - detectedBrands: brands detected on the card.
    - v5.43.0 or later paymentMethodVariant: the card type variant.

  3. Add the Custom Card Component to your payment form:

    a. Create a DOM element, placing it where you want the card input fields to be rendered:

    <div id="customCard-container">
    <label>
        <span>Card number:</span>
        <span data-cse="encryptedCardNumber"></span>
    </label>
    <label>
        <span>Expiry date:</span>
        <span data-cse="encryptedExpiryDate"></span>
    </label>
    <label>
        <span>CVV/CVC:</span>
        <span data-cse="encryptedSecurityCode"></span>
    </label>
</div>

    b. Create an instance of the Custom Card Component, and mount it. You can also include optional configuration.

    Field Description Default
    ariaLabels Specify aria-label attributes for the input fields for web accessibility.
    v4.0.0 or later: Use translation fields instead.    		 Refer to Default labels.
    autoFocus Automatically move the focus from date field to the CVC field once a date has been entered. Starting v5.8.0 the focus changes to the date field when the entered card number reaches the expected length. true
    brands Array of card brands that will be recognized by the component. For a list of possible values, refer to Supported card types. ['mc','visa','amex']
    styles Set a style object to customize the input fields. For a list of supported properties, refer to Styling. Refer to Default styles.
    minimumExpiryDate
    v4.3.0 or later    		 If a shopper enters a date that is earlier than specified here, they will see the following error:
    "Your card expires before check out date."
    Format: mm/yy    		 
    const customCard = checkout.create('securedfields', {
    // Optional configuration
    type: 'card',
    brands: ['mc', 'visa', 'amex', 'bcmc', 'maestro'],
    styles: {
        error: {
            color: 'red'
        },
        validated: {
            color: 'green'
        },
        placeholder: {
            color: '#d8d8d8'
        }
    },
    // Only for Web Components before 4.0.0.
    // For Web Components 4.0.0 and above, configure aria-label attributes in translation files
    ariaLabels: {
        lang: 'en-GB',
        encryptedCardNumber: {
            label: 'Credit or debit card number field',
            iframeTitle: 'Iframe for secured card number',
            error: 'Message that gets read out when the field is in the error state'
        }
    },
    // Events
    onChange: function() {},
    onValid : function() {},
    onLoad: function() {},
    onConfigSuccess: function() {},
    onFieldValid : function() {},
    onBrand: function() {},
    onError: function() {},
    onFocus: function() {},
    onBinValue: function(bin) {},
    onBinLookup: function(callbackObj: CbObjOnBinLookup) {}
}).mount('#customCard-container');

    When the shopper enters their card details, the Component calls the onChange event, which contains a state.

  4. If state.isValid is true, collect the state.data and pass this to your server. The state.data contains the encrypted card details, which you'll need to make a payment.

    Encrypted shopper payment details 
      {
      "encryptedCardNumber":"adyenjs_0_1_18$MT6ppy0FAMVMLH...",
      "encryptedExpiryMonth":"adyenjs_0_1_18$MT6ppy0FAMVMLH...",
      "encryptedExpiryYear":"adyenjs_0_1_18$MT6ppy0FAMVMLH...",
      "encryptedSecurityCode":"adyenjs_0_1_18$MT6ppy0FAMVMLH...",
  }

Styling card input fields

If you want to change the styling of the card number, CVC, and expiry date of a card:

  1. Create an object and set the following CSS values:

    You can provide styling for the following:

    • base: Base styling applied to the iframe. All styling extends from this style.
    • error: Styling applied when a field fails validation.
    • placeholder: Styling applied to the field's placeholder values.
    • validated: Styling applied once a field passes validation.

    Here is an example style object:

    // Define style object
var styleObject = {
  base: {
    color: 'black',
    fontSize: '16px',
    fontSmoothing: 'antialiased',
    fontFamily: 'Helvetica'
  },
  error: {
    color: 'red'
  },
  placeholder: {
    color: '#d8d8d8'
  },
  validated: {
    color: 'green'
  }
};

  2. Style the elements with the following properties. These properties map to CSS properties and accept allowed CSS values:

    JavaScriptCSS

    background

    background

    caretColor

    caret-color

    color

    color

    display

    display

    font

    font

    fontFamily

    font-family

    fontSize

    font-size

    fontSizeAdjust

    font-size-adjust

    fontSmoothing

    font-smoothing

    fontStretch

    font-stretch

    fontStyle

    font-style

    fontVariant

    font-variant

    fontVariantAlternates

    font-variant-alternates

    fontVariantCaps

    font-variant-caps

    fontVariantEastAsian

    font-variant-east-asian

    fontVariantLigatures

    font-variant-ligatures

    fontVariantNumeric

    font-variant-numeric

    fontWeight

    font-weight

    letterSpacing

    letter-spacing

    lineHeight

    line-height

    mozOsxFontSmoothing

    moz-osx-font-smoothing

    mozTransition

    moz-transition

    outline

    outline

    opacity

    opacity

    padding

    padding

    textAlign

    text-align

    textShadow

    text-shadow

    transition

    transition

    webkitFontSmoothing

    webkit-font-smoothing

    webkitTransition

    webkit-transition

  3. Add the styling to the configuration object of your AdyenCheckout instance.

    Configuration object with card styling 
    const configuration = {
  //...other configuration parameters
  paymentMethodsConfiguration: {
    card: {
      styles: styleObject,
    },
    //Required to apply styling to stored cards.
    storedCard: {
      styles: styleObject,
    }
  },
};

Default styles and labels

If you don't provide configuration for styles and labels, the Component will use the following default properties.

{
    styles: {
            base: {
                color: "#001b2b",
                fontSize: "16px",
                fontWeight: "400"
            },
            placeholder: {
                color: "#90a2bd",
                fontWeight: "200"
            },
            error: {
                color: "#001b2b"
            }
    },
    ariaLabels: {
        lang: "en-GB",
        encryptedCardNumber: {
            label: "Credit or debit card number",
            iframeTitle: "Iframe for card data input field"
        },
        encryptedExpiryDate: {
            label: "Credit or debit card expiration date",
            iframeTitle: "Iframe for card data input field"
        },
        encryptedSecurityCode: {
            label: "Iframe for card data input field"
        }
    }
}

Supported card types in web

Use the values in this list when specifying card types in the brands array. If card types are not provided, the configuration defaults to ['mc','visa','amex'].

Card Type Description
amex Amex
argencard Argencard
bcmc Bancontact/Mister Cash
bijcard de Bijenkorf Card
cabal Cabal
cartebancaire Carte Bancaires
codensa Codensa
cup China Union Pay
dankort Dankort
diners Diners Club
discover Discover
electron Electron
elo ELO
forbrugsforeningen Forbrugsforeningen
hiper HiperCard
hipercard HiperCard
jcb JCB
karenmillen Karen Millen GiftCard
laser Laser
maestro Maestro
maestrouk Maestro UK
mc Mastercard
mcalphabankbonus Alpha Bank Mastercard Bonus
mir MIR
naranja Naranja
oasis Oasis GiftCard
rupay RuPay
shopping Tarjeta Shopping
solo Solo
troy Troy
uatp UATP
visa Visa
visaalphabankbonus Alpha Bank Visa Bonus
visadankort Visa Dankort
warehouse Warehouse GiftCard

Make a payment

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

  • paymentMethod: Object that contains the encrypted card details from the client side, the card holder's name (if you collected it), and a type parameter set to scheme.
curl https://checkout-test.adyen.com/v70/payments \
-H "X-API-key: YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
  "amount":{
    "currency":"USD",
    "value":1000
  },
  "reference":"YOUR_ORDER_NUMBER",
  "paymentMethod": {
    "type": "scheme",
    "encryptedCardNumber": "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
    "encryptedExpiryMonth": "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
    "encryptedExpiryYear": "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
    "encryptedSecurityCode": "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
    "holderName": "S. Hopper"
  },
  "returnUrl": "https://your-company.com/...",
  "merchantAccount":"YOUR_MERCHANT_ACCOUNT"
}'
# Set your X-API-KEY with the API key from the Customer Area.
adyen = Adyen::Client.new
adyen.api_key = "YOUR_X-API-KEY"
 
response = adyen.checkout.payments({
  :amount => {
    :currency => "USD",
    :value => 1000
  },
  :reference => "YOUR_ORDER_NUMBER",
  :paymentMethod => {
    :type => "scheme",
    :encryptedCardNumber => "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
    :encryptedExpiryMonth => "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
    :encryptedExpiryYear => "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
    :encryptedSecurityCode => "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
    :holderName => "S. Hopper"
  },
  :returnUrl => "https://your-company.com/...",
  :merchantAccount => "YOUR_MERCHANT_ACCOUNT"
})
// Set your X-API-KEY with the API key from the Customer Area.
Client client = new Client(xApiKey,Environment.TEST);
 
Checkout checkout = new Checkout(client);
PaymentsRequest paymentsRequest = new PaymentsRequest();
paymentsRequest.setMerchantAccount("YOUR_MERCHANT_ACCOUNT");
Amount amount = new Amount();
amount.setCurrency("USD");
amount.setValue(1000L);
paymentsRequest.setAmount(amount);
String encryptedCardNumber = "adyenjs_0_1_18$...encryptedCardNumber";
String encryptedExpiryMonth = "adyenjs_0_1_18$...encryptedExpiryMonth";
String encryptedExpiryYear = "adyenjs_0_1_18$...encryptedExpiryYear";
String encryptedSecurityCode = "adyenjs_0_1_18$...encryptedSecurityCode";
paymentsRequest.setReference("YOUR_ORDER_NUMBER");
paymentsRequest.addEncryptedCardData(encryptedCardNumber,encryptedExpiryMonth, encryptedExpiryYear, encryptedSecurityCode, "S. Hopper");
paymentsRequest.setReturnUrl("https://your-company.com/...");
PaymentsResponse paymentsResponse = checkout.payments(paymentsRequest);
// Set your X-API-KEY with the API key from the Customer Area.
$client = new \Adyen\Client();
$client->setXApiKey("YOUR_X-API-KEY");
$service = new \Adyen\Service\Checkout($client);

$params = array(
  "amount" => array(
    "currency" => "USD",
    "value" => 1000
  ),
  "reference" => "YOUR_ORDER_NUMBER",
  "paymentMethod" => array(
    "type" => "scheme",
    "encryptedCardNumber" => "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
    "encryptedExpiryMonth" => "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
    "encryptedExpiryYear" => "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
    "encryptedSecurityCode" => "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
    "holderName" => "S. Hopper"
  ),
  "returnUrl" => "https://your-company.com/...",
  "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.client.xapikey = 'YOUR_X-API-KEY'

result = adyen.checkout.payments({
   'amount': {
      'value': 1000,
      'currency': 'USD'
   },
   'reference': 'YOUR_ORDER_NUMBER',
   'paymentMethod': {
      'type': 'scheme',
      'encryptedCardNumber': 'adyenjs_0_1_18$MT6ppy0FAMVMLH...',
      'encryptedExpiryMonth': 'adyenjs_0_1_18$MT6ppy0FAMVMLH...',
      'encryptedExpiryYear': 'adyenjs_0_1_18$MT6ppy0FAMVMLH...',
      'encryptedSecurityCode': 'adyenjs_0_1_18$MT6ppy0FAMVMLH...',
      'holderName': 'S. Hopper'
   },
   'returnUrl': 'https://your-company.com/...',
   'merchantAccount': 'YOUR_MERCHANT_ACCOUNT'
})
// Set your X-API-KEY with the API key from the Customer Area.
var client = new Client ("YOUR_X-API-KEY", Environment.Test);
var checkout = new Checkout(client);

var amount = new Adyen.Model.Checkout.Amount("USD", 1000);
var details = new Adyen.Model.Checkout.DefaultPaymentMethodDetails{
  Type = "scheme",
  EncryptedCardNumber = "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
  EncryptedExpiryMonth = "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
  EncryptedExpiryYear = "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
  EncryptedSecurityCode = "adyenjs_0_1_18$MT6ppy0FAMVMLH..."
};
var paymentsRequest = new Adyen.Model.Checkout.PaymentRequest
{
  Reference = "YOUR_ORDER_NUMBER",
  Amount = amount,
  ReturnUrl = @"https://your-company.com/...",
  MerchantAccount = "YOUR_MERCHANT_ACCOUNT",
  PaymentMethod = details
};

var paymentResponse = checkout.Payments(paymentsRequest);
// Set your X-API-KEY with the API key from the Customer Area.
const {Client, Config, CheckoutAPI} = require('@adyen/api-library');
const config = new Config();
// Set your X-API-KEY with the API key from the Customer Area.
config.apiKey = '[API_KEY]';
config.merchantAccount = '[YOUR_MERCHANT_ACCOUNT]';
const client = new Client({ config });
client.setEnvironment("TEST");
const checkout = new CheckoutAPI(client);
checkout.payments({
    amount: { currency: "USD", value: 1000 },
    paymentMethod: {
        type: 'scheme',
        encryptedSecurityCode: "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
        encryptedExpiryMonth: "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
        encryptedExpiryYear: "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
        holderName: "S. Hopper",
        encryptedCardNumber: "adyenjs_0_1_18$MT6ppy0FAMVMLH..."
    },
    reference: "YOUR_ORDER_NUMBER",
    merchantAccount: config.merchantAccount,
    returnUrl: "https://your-company.com/..."
}).then(res => res);

The /payments response contains:

  • pspReference: Our unique identifier for the transaction.
  • resultCode: Use this to present the payment result to your shopper.
  • merchantReference: The reference from the /payments request.
  • additionalData: Additional information about the transaction.
    To specify the fields that you want to receive in additionalData, log in to your Customer Area, and go to Developers > Additional data settings.
/payments response 
{
  "additionalData": {
    "cardSummary": "1111"
  },
  "pspReference": "851572424333194G",
  "resultCode": "Authorised",
  "merchantReference": "YOUR_ORDER_NUMBER"
}

Present the payment result

Use the  resultCode from the /payments response to present the payment result to your shopper. You will also receive the outcome of the payment asynchronously in a 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 whether 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.

Additional resultCode values are possible in case of the 3D Secure authentication flow. For more information, refer to Result codes.

Requirements for co-branded cards issued in Europe

Regulatory guidelines (EU IFR Regulation 2015/751 article 8) for cards issued in Europe require the following:

  • When a shopper presents a co-branded card, they must be allowed to select their preferred brand.
  • If the shopper selected a preferred brand, the payment must be completed with this brand.

To comply with these guidelines:

  1. Use the onBinLookup event to detect if a card is co-branded.
  2. If a card is co-branded, present all supported brands to the shopper, allowing them to click on the brand they want to pay with. Each of the presented brands should have an alt or a data-value attribute.
  3. If the shopper makes a choice, pass the corresponding event to the dualBrandingChangeHandler function.
    The shopper's selected brand will then be included in the state.data from the Component.

The following example shows how you would present brand logos for a co-branded Bancontact/Maestro card:

function onBinLookup(pCallbackObj) {
    // Handle a dual branded result
    if (pCallbackObj.supportedBrandsRaw?.length > 1) {
        onDualBrand(pCallbackObj);
    }
}
// Implement dual branding
function onDualBrand(pCallbackObj) {
  const bancontactLogo = pCallbackObj.rootNode.querySelector('#pmImageDual1');
  const maestroLogo = pCallbackObj.rootNode.querySelector('#pmImageDual2');
  const supportedBrands = pCallbackObj.supportedBrandsRaw;

  //Set Bancontact brand icon, add alt or data-value attributes; add an event listener
  bancontactLogo.setAttribute('src', supportedBrands[0].brandImageUrl);
  bancontactLogo.setAttribute('alt', supportedBrands[0].brand);
  bancontactLogo.setAttribute('data-value', supportedBrands[0].brand);
  bancontactLogo.addEventListener('click', dualBrandListener);

  // Set Maestro brand icon, add alt or data-value attributes; add an event listener
  maestroLogo.setAttribute('src', supportedBrands[1].brandImageUrl);
  maestroLogo.setAttribute('alt', supportedBrands[1].brand);
  maestroLogo.setAttribute('data-value', supportedBrands[1].brand);
  maestroLogo.addEventListener('click', dualBrandListener);
}

Implementing dualBrandListener to pass the selected attributes to to dualBrandingChangeHandler:

function dualBrandListener(e) {
    securedFields.dualBrandingChangeHandler(e);
}

Present debit and credit cards separately

This requires Checkout API v53 and later.

In some scenarios, you may want to present your shoppers with separate payment forms for debit cards and credit cards. Some examples include:

  • If you accept payments in Sweden, you need to present debit cards before credit cards in order to comply with local legislation.
  • In Brazil, many shoppers use Combo cards, allowing for both debit and credit transactions. Having a separate form for Debit Card and Credit Card gives your shoppers a clear indication of whether they are making a debit or credit transaction.

For more details, see the corresponding sections about Brazil and Sweden.

To show debit and credit cards separately:

  1. If you're using the /paymentMethods endpoint to get a list of payment methods to present on the client side, include:

    • splitCardFundingSources: Set this to true to receive separate objects for credit and debit cards in the response.

    The following example shows how you would get the available payment methods for a shopper in the Netherlands, making a 47.00 EUR payment.

    /paymentMethods request 
    curl https://checkout-test.adyen.com/v68/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": 4700
  },
  "splitCardFundingSources": true
}'

    The response includes the list of available payment methods, with debit and credit cards split into separate objects.

    Response 
    {
   ...
   "paymentMethods": [
       {
           "brands": [
               "mc",
               "visa",
               "amex"
           ],
           ...
           "fundingSource": "credit",
           "name": "Credit Card",
           "type": "scheme"
       },
       {
           "brands": [
               "mc",
               "visa",
               "amex"
           ],
           "fundingSource": "debit",
           "name": "Debit Card",
           "type": "scheme"
       }
   ]
}

  2. When the shopper selects to pay with either a debit or credit card, proceed to make a POST /payments request and include:

    • paymentMethod.fundingSource: Set this to either credit or debit.

    The following example shows how you can make a payment request for a debit card.

    /payments request 
    curl https://checkout-test.adyen.com/v68/payments \
-H "X-API-key: [Your API Key here]" \
-H "Content-Type: application/json" \
-d '{
  "amount":{
    "currency":"EUR",
    "value":4700
  },
  "reference":"YOUR_ORDER_NUMBER",
  "paymentMethod": {
    "type": "scheme",
    "encryptedCardNumber": "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
    "encryptedExpiryMonth": "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
    "encryptedExpiryYear": "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
    "encryptedSecurityCode": "adyenjs_0_1_18$MT6ppy0FAMVMLH...",
    "holderName": "S. Hopper",
    "fundingSource": "debit"
  },
  "additionalData": {
    "overwriteBrand": true
  },
  "returnUrl": "https://your-company.com/...",
  "merchantAccount":"YOUR_MERCHANT_ACCOUNT"
}'

Brazil

For debit transactions, we highly recommend using 3D Secure and Automatic Capture due to some issuers' restrictions.

Sweden

When accepting payments in Sweden, present debit before credit cards, and label the forms clearly in order to comply with Swedish legislations.

Stored card payments

Adyen's tokenization service allows you to securely store shopper's card details for recurring payments. To make recurring payments, you first need to create a shopper token, and then use the token to make future payments for the shopper.

Create a token

To store shopper's card details, include in your /payments request:

  • storePaymentMethod: true
  • shopperReference: Your unique identifier for the shopper.

The /payments response contains:

  • recurringDetailReference: This is the token that you'll need to make recurring payments for this shopper.

The recurringDetailReference is also contained in the AUTHORISATION webhook that you will receive for this payment.

Show a stored card in your payment form

  1. To get the stored payment methods for a shopper, include in your /paymentMethods request:

    • shopperReference: The unique shopper identifier that you specified when creating the token.

      The /paymentMethods response includes a storedPaymentMethods array containing the stored payment methods for this shopper. The storedPaymentMethods array contains the id that you need when making the payment.

    If your Components version is 3.2.0 or lower, use the oneClickPaymentMethods array and the recurringDetailReference instead.

             {
         ...
         "storedPaymentMethods":[
             {
                "brand":"visa",
                "expiryMonth":"10",
                "expiryYear":"2020",
                "holderName":"John Smith",
                "id":"8415718415172204",
                "lastFour":"1111",
                "name":"VISA",
                "supportedShopperInteractions":[
                   "Ecommerce",
                   "ContAuth"
                ],
                "type":"scheme"
             },
             {
                "brand":"visa",
                "expiryMonth":"08",
                "expiryYear":"2018",
                "holderName":"John Smith",
                "id":"8315720121476805",
                "lastFour":"0008",
                "name":"VISA",
                "supportedShopperInteractions":[
                   "ContAuth",
                   "Ecommerce"
                ],
                "type":"scheme"
             }
]
         ...
         }

  2. Use the Custom Card Component to collect the following details from the shopper:

    Card details Example input
    The security code (CVV / CVC) "737"

    When onChange callback is triggered and if state.isValid is true, get the encrypted values from state.data and pass these values to your server.

  3. Proceed to submit a payment request from your server.

Make a payment with a token

When the shopper selects to pay, the Component calls the onChange event, which contains a state.data.

  1. Pass the state.data to your server.

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

    • paymentMethod.storedPaymentMethodId: The id from the the /paymentMethods response. This is the recurringDetailReference that you received when creating the token.
    • paymentMethod.encryptedSecurityCode: The state.data.paymentMethod.encryptedSecurityCode from the onChange event.

    • shopperReference: The unique shopper identifier that you specified when creating the token.
    • shopperInteraction: ContAuth.
    • recurringProcessingModel: CardOnFile.
Payment request with a token 
curl https://checkout-test.adyen.com/v68/payments \
-H "X-API-key: [Your API Key here]" \
-H "Content-Type: application/json" \
-d '{
     "amount":{
       "value":2000,
       "currency":"USD"
     },
     "paymentMethod":{
       "type":"scheme",
       "storedPaymentMethodId":"8415718415172204",
       "encryptedSecurityCode":"adyenjs_0_1_18$MT6ppy0FAMVMLH..."
     },
     "reference":"YOUR_ORDER_NUMBER",
     "merchantAccount":"YOUR_MERCHANT_ACCOUNT",
     "returnUrl":"...",
     "shopperReference":"YOUR_UNIQUE_SHOPPER_ID_IOfW3k9G2PvXFu2j",
     "shopperInteraction":"ContAuth",
     "recurringProcessingModel":"CardOnFile"
 }'

The /payments response contains:

Response 
{
   "pspReference": "8815329842815468",
   "resultCode": "Authorised"
}

You can also use tokens to make shopper-not-present payments for subscriptions or contracts. For more information, refer to Making a payment for a subscription or contract.

Test and go live

If your client-side integration isn't ready, you can test API requests with encrypted card details by adding a test_ prefix to the test card details.

v5.20.0 or later: Card input fields use JSON Web Encryption, so your test environment must be a secure context. Use either a local or https domain, and add it to your allowed origins.

Before making live card payments:

  1. Test your integration using our test card numbers. You can check the status of test payments in your Customer Area > Transactions > Payments.

  2. Add the cards that you want to accept in your live Customer Area.

  3. Before you can start accepting card payments in the live environment, you need to assess your PCI DSS compliance and submit the required Self-Assessment Questionnaire A document. For more information, refer to PCI DSS compliance guide.

See also