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:

Make sure that you have set up your back end implementation.
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.

To use the Custom Card Web Component, you need to:

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 our JavaScript and CSS files.

<script src="https://checkoutshopper-test.adyen.com/checkoutshopper/sdk/3.8.0/adyen.js"
integrity="sha384-j+P95C9gdyJZ9LTUtvrMDElDvFEeTCelUsE89yfnDfP7nbOXS3N0+e5nb0CLTdx/"
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/checkout/release-notes -->

Use the following CSS file:

<link rel="stylesheet" href="https://checkoutshopper-test.adyen.com/checkoutshopper/sdk/3.8.0/adyen.css"
integrity="sha384-y1lKqffK5z+ENzddmGIfP3bcMRobxkjDt/9lyPAvV9H3JXbJYxCSD6L8TdyRMCGM"
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/checkout/release-notes -->

You can add your own styling by overriding the rules of this CSS file. For more information, refer to Styling.

Create an instance of AdyenCheckout, 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.
`originKey`	The Origin Key of your website. To find out how to generate one, see How to get an Origin Key.
`environment`	When you're ready to accept live payments, change the value to one of our live environments.
`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",
      originKey: "YOUR_ORIGIN_KEY",
      onChange: handleOnChange
  };

  const checkout = new AdyenCheckout(configuration);

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

Event	Description
`onAutoComplete`	V 3.4.0 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.
`onLoad`	Called once all the card input fields have been created but are not yet ready to use.
`onConfigSuccess`	Called once the card input fields are ready to use.
`onFieldValid`	Called when a specific field is validated and encrypted or becomes invalid.
`onBrand`	Called once we detect the card brand.
`onError`	Called in case of an invalid card number, invalid expiry date, or incomplete field. Called again when errors are cleared.
`onFocus`	Called when a field gains or loses focus.
`onBinValue`	Provides the BIN Number of the card (up to 6 digits), called as the user types in the PAN.

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 attributes for the input fields for web accessibility.	Refer to Default labels.
`autoFocus`	Automatically shift the focus from date field to the CVC field.	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.

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'
        }
    },
    ariaLabels: {
        lang: 'en-GB',
        encryptedCardNumber: {
            label: 'Credit or debit card number field'
        }
    },
    // Events
    onChange: function() {},
    onValid : function() {},
    onLoad: function() {},
    onConfigSuccess: function() {},
    onFieldValid : function() {},
    onBrand: function() {},
    onError: function() {},
    onFocus: function() {},
    onBinValue: function(bin) {}
}).mount('#customCard-container');

When the shopper selects to pay, the Component calls the onChange event, which contains a state.data. If state.isValid is true, collect the state.data, pass this to your server, and proceed to make a payment.

Styling web elements

You can style the iframe elements when using the Custom Card Web Component. Use JavaScript to style the fields:

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'
  }
};
```

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

JavaScript	CSS
`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

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
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
shopping	Tarjeta Shopping
solo	Solo
troy	Troy
uatp	UATP
visa	Visa
visaalphabankbonus	Alpha Bank Visa Bonus
visadankort	Visa Dankort
warehouse	Warehouse GiftCard

Build your own UI for the card payment form, collect the shopper's card details, and then use the following classes to validate and encrypt the data in your client app:

To use our iOS classes, you need to:

Install the Adyen iOS client-side library from either CocoaPods or Carthage.
- To install iOS Drop-in from CocoaPods:
  1. Add pod 'Adyen' to your Podfile.
  2. Run pod install.
- To install iOS Drop-in from Carthage:
  1. Add github "adyen/adyen-ios" to your Cartfile.
  2. Run carthage update.
  3. Link the framework with your target as described in Carthage Readme.
Get your Client Encryption Public Key. You need to set this as your publicKey when using the CardEncryptor class. To get your Client Encryption Public Key:
1. Sign in to your Customer Area using your company-level account.
2. Navigate to Account > Users.
3. Click on your web service user (ws@Company.[YourCompanyAccount]) in the users list.
  This opens the Edit Web Service User page.
4. In the Client-Side Encryption panel, copy the Client Encryption Public Key.

Create a function that validates card data and provides the encrypted card details.

https://docs.adyen.com/payment-methods/cards/custom-card-integration#ios-classes-for-validating-and-encrypting-card-data

iOS classes for validating and encrypting card data

func validateCardData() {
        let cardValidator = CardNumberValidator()
        let isCardValid: Bool = cardValidator.isValid(cardNumberValue ?? "")
        let expiryValidator = CardExpiryDateValidator()
        let isExpiryValid: Bool = expiryValidator.isValid(expiryDate)
        let securityCodeValidator = CardSecurityCodeValidator()
        let isSecurityCodeValid = securityCodeValidator.isValid(securityCodeValue)
        if isCardValid && isExpiryValid && isSecurityCodeValid && (cardHolderNameValue != nil){
            let cardObject = CardEncryptor.Card(number: cardNumberValue, securityCode: securityCodeValue, expiryMonth: expiryMonthValue, expiryYear: expiryYearValue)
            let encryptedCard = CardEncryptor.encryptedCard(for: cardObject, publicKey: self.PUBLIC_KEY)
            makePayment(details: encryptedCard, holderName: cardHolderNameValue ?? "", type: "scheme")
        }
    }

Pass the encrypted data along with type: scheme to your server and proceed to make a payment.
https://docs.adyen.com/payment-methods/cards/custom-card-integration#encrypted-shopper-payment-details-for-card
Encrypted shopper payment details for Card
{ "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" }

Build your own UI for the card payment form, collect the shopper's card details, and then use the following classes to validate and encrypt the data in your client app:

To use our Android modules, you need to:

Add the dependency in your build.gradle (Module) file. To get the latest version, check our GitHub repository.
```
implementation "com.adyen.checkout:card-base:$checkout_version"
```
Get your Client Encryption Public Key. You need to set this as your publicKey when using the Encryptor class. To get your Client Encryption Public Key:
1. Sign in to your Customer Area using your company-level account.
2. Navigate to Account > Users.
3. Click on your web service user (ws@Company.[YourCompanyAccount]) in the users list.
  This opens the Edit Web Service User page.
4. In the Client-Side Encryption panel, copy the Client Encryption Public Key.

Use the modules to validate the card data and provide the encrypted card details.

https://docs.adyen.com/payment-methods/cards/custom-card-integration#android-modules-for-validating-and-encrypting-card-data

Android modules for validating and encrypting card data

// Example values
val cardNumber = "4111111111111111"
val cardType = CardType.estimate(cardNumber)[0] // This is just an estimation and could be empty
val expiryDate = ExpiryDate(2, 23)
val securityCode = "737"

if (CardValidationUtils.validateCardNumber(cardNumber).isValid
        && CardValidationUtils.validateExpiryDate(expiryDate).isValid
        && CardValidationUtils.validateSecurityCode(securityCode, cardType).isValid
) {
    val rawCardData = Card.Builder()
        .setNumber(cardNumber)
        .setExpiryDate(expiryDate.expiryMonth, expiryDate.expiryYear)
        .setSecurityCode(securityCode)
        .build()

    val encryptedCard = Encryptor.INSTANCE.encryptFields(rawCardData, "<publicKey>")
}

Pass the encrypted data along with type: scheme to your server and proceed to make a payment.
https://docs.adyen.com/payment-methods/cards/custom-card-integration#encrypted-shopper-payment-details-for-card
Encrypted shopper payment details for Card
{ "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" }

Make a payment

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

If state.isValid is true, collect the state.data and pass this to your server.
From your server, make a /payments request, specifying:
- paymentMethod: The state.data.paymentMethod from the onChange event.

https://docs.adyen.com/payment-methods/cards/custom-card-integration#card-payment

curl https://checkout-test.adyen.com/v52/payments \
-H "X-API-key: [Your API Key here]" \
-H "Content-Type: application/json" \
-d '{
  "amount":{
    "currency":"USD",
    "value":1000
  },
  "reference":"YOUR_ORDER_NUMBER",
  "{hint:state.data.paymentMethod from onChange or onSubmit}paymentMethod{/hint}": {
    "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 Model.Checkout.Amount("USD", 1000);
var details = new 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 paymentRequest = 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 Account > API URLs > Additional data settings.

https://docs.adyen.com/payment-methods/cards/ios-drop-in#-payments-response

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

Recurring 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 notification that you will receive for this payment.

Show a stored card in your payment form

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"
             }
]
         ...
         }

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.
Proceed to submit a payment request from your server.

Make a payment with a token