Search

Are you looking for test card numbers?

Would you like to contact support?

Making payments with tokens

Use tokenized payment information for recurring and subscription payments.

After you have created tokens for your shopper's payment details, you can use the tokens when:

Presenting your shopper's stored card details

The following integration sections describe configuration settings specific for stored payment details. Make sure that you have implemented the core integration for Drop-in, Components, or API only.

You can present your shopper's stored card details in your website or app with the following integrations:

  • Our Drop-in solution for Web and iOS.
  • Our pre-built Card Components for Web and iOS.

Alternatively, you can also build your own UI to show the stored card details.

After the shopper selects the stored card detail and provides the card verification code, you can then submit the payment request.

Web Drop-in

Make sure that your showStoredPaymentMethods is set to true. If not included in the configuration, this defaults to true.

const dropin = checkout
.create('dropin', {
  paymentMethodsConfiguration: {
    card: {
      showStoredPaymentMethods: true,
    }
  }
  // Other configuration here
.mount('#dropin');

When the onChange event is triggered and if state.isValid is true, collect the encrypted values passed in the state.data. Next, proceed to to submit a payment request from your server.

iOS Drop-in

Our iOS Drop-in solution supports showing stored card payment details without any additional configuration. Follow the same procedure for collecting your shopper's card details. After Drop-in returns data.paymentMethod, pass this to your server and proceed to submit a payment request.

Web Card Component

The steps for integrating Web Components are similar for all supported payment methods, as described in the core Web Components integration page. Go to the core Web Components integration steps we link to below and apply the configuration for Cards.

To show a stored card payment on the payment method list and to accept payments on your Web Component integration, you need to:

  1. In step 1 of the core Web Components integration, make a POST /paymentMethods request from your server and include the following parameter:

    • shopperReference: Your unique ID for this shopper. This should be the same shopperReference that you used when you created the token.
      {
      "merchantAccount": "YOUR_MERCHANT_ACCOUNT",
      "countryCode": "NL",
      "amount": {
       "currency": "EUR",
       "value": 1000
      },
      "channel": "Web",
      "shopperReference": "YOUR_UNIQUE_SHOPPER_ID_IOfW3k9G2PvXFu2j"
      }'

    If the shopper has a recurring card detail, the response will contain a oneClickPaymentMethods array. Store this array, for example as storedPaymentData.

         {
         ...
           "oneClickPaymentMethods":[
             {
               "details":[
                 {
                   "key":"cardDetails.cvc",
                   "type":"cvc"
                 }
               ],
               "name":"VISA",
               "type":"visa",
               "recurringDetailReference":"8415489254612814",
               "storedDetails":{
                 "card":{
                   "expiryMonth":"8",
                   "expiryYear":"2018",
                   "holderName":"John Smith",
                   "number":"1111"
                 }
               }
             }
           ]
         ...
         }
  2. In step 2, add the Components JavaScript file on your payments form and include the required configuration for AdyenCheckout.

    Then, create a DOM element for each stored card payment method, placing it where you want the card form to be rendered:

    <div id="stored-card"></div>

    Next, create an instance of the Card Component and configure it with the following properties:

    • type: Object containing oneClickPaymentMethods[0].type data.
    • storedDetails: Object containing oneClickPaymentMethods[0].storedDetails data.
    • details: Object containing oneClickPaymentMethods[0].details data.
    • recurringDetailReference: Object containing oneClickPaymentMethods[0].recurringDetailReference data.
    const card = checkout.create("card", {
    // Options
    type: storedPaymentData.type,
    storedDetails: storedPaymentData.storedDetails,
    details: storedPaymentData.details,
    recurringDetailReference: storedPaymentData.recurringDetailReference
    }).mount("#stored-card");

    When the onChange event is triggered and if state.isValid is true, collect the encrypted values passed in the state.data. You'll use these to make the payment in step 3. If you wish to override the function on the core AdyenCheckout instance, you can also define an onChange event on the Component level.

  3. Next, proceed to to submit a payment request from your server.

To configure how the Card Component renders in your payment form, see Configuring the Component.

iOS Card Component

The steps for integrating iOS Components are similar for all supported payment methods, as described in the core iOS Components integration page. Go to the core iOS Components integration steps we link to below and apply the configuration for stored card payment method.

  1. In step 1 of the core iOS Components integration, make a POST /paymentMethods request from your server and include the following parameter:

    • shopperReference: Your unique ID for this shopper. This should be the same shopperReference that you used when you created the token.
       {
         "merchantAccount": "YOUR_MERCHANT_ACCOUNT",
         "countryCode": "NL",
         "amount": {
           "currency": "EUR",
           "value": 1000
         },
         "channel": "iOS",
         "shopperReference": "YOUR_UNIQUE_SHOPPER_ID_IOfW3k9G2PvXFu2j"
       }'

    If the shopper has a recurring card detail, the response will contain a oneClickPaymentMethods array.

  2. In step 2 after you decode the /paymentMethods response, find the
    StoredCardPaymentMethod.

    Next, initialize the Card Component. When you're ready to go live, change the environment to live or to other environment values described in the class reference.

     let cardComponent = CardComponent(paymentMethod: storedCardPaymentMethod,
     publicKey: "YOUR_PUBLIC_KEY")
     cardComponent.delegate = self
     cardComponent.environment = .test
     present(cardComponent.viewController, animated: true)

    After the shopper provides payment details, the didSubmit method from the PaymentComponentDelegate will be invoked. Get the contents of data.paymentMethod and pass this to your server.

  3. Next, proceed to to submit a payment request from your server.

Build your own UI

Our API-only integration works the same way for all payment methods, as described in the core API-only integration page. Go to the core API-only integration steps we refer to below and apply the configuration to build your own form for Cards.

  1. In step 1 of the core API-only integration, make a POST /paymentMethods from your server and include the following parameter:

    • shopperReference: Your unique ID for this shopper. This should be the same shopperReference that you used when you created the token.
    {
    "merchantAccount": "YOUR_MERCHANT_ACCOUNT",
    "countryCode": "NL",
    "amount": {
      "currency": "EUR",
      "value": 1000
    },
    "channel": "Web",
    "shopperReference": "YOUR_UNIQUE_SHOPPER_ID_IOfW3k9G2PvXFu2j"
    }'

    In the response, find the oneClickPaymentMethods object. This will contain therecurringDetailReference which you will need to submit the payment request.

      {
      ...
        "oneClickPaymentMethods":[
          {
            "details":[
              {
                "key":"cardDetails.cvc",
                "type":"cvc"
              }
            ],
            "name":"VISA",
            "type":"visa",
            "recurringDetailReference":"8415489254612814",
            "storedDetails":{
              "card":{
                "expiryMonth":"8",
                "expiryYear":"2018",
                "holderName":"John Smith",
                "number":"1111"
              }
            }
          }
        ]
      ...
      }
  2. In step 2, include the shopper's previously stored card details in the list of available payment methods.

  3. In step 3, render the input fields to collect your shopper's details. Collect the following card details from the shopper in your payment form using custom card fields:

    If you are PCI Level 1 or 2 certified you can pass raw card data instead.

    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.

  4. Next, proceed to to submit a payment request from your server.

Making a payment with the token and CVV

From your server, make a POST /payments request and include the following parameters.

  • shopperReference: This is the shopperReference that you used the first time when you stored the shopper's card details.
  • shopperInteraction: Set this to ContAuth.
  • recurringProcessingModel: Set this to CardOnFile.
  • paymentMethod: Object that contains the shopper's recurring detail reference and CVV. If you are using Drop-in or Card Component, pass the data returned in the events and send it in this object. For example, send the data.paymentMethod from your iOS Drop-in and Card Component or state.data from your Web Drop-in and Card Component.

    You can also collect the following values with your own UI:

    • type: Set this to scheme to indicate card payment method.
    • recurringDetailReference or storedPaymentMethodId for API v49 and above.
    • encryptedSecurityCode: Encrypted card verification code.

If you are implementing 3D Secure for PSD2 SCA compliance, issuing banks might require SCA for ContAuth with CardOnFile transactions. Contact our Support Team to enable 3D Secure.

{
   "amount":{
      "value":2000,
      "currency":"USD"
   },
   "paymentMethod":{
      "type": "scheme",
      "recurringDetailReference":"7219687191761347",
      "encryptedSecurityCode": "adyenjs_0_1_18$MT6ppy0FAMVMLH..."
   },
   "reference":"Your Reference Here",
   "merchantAccount":"YOUR_MERCHANT_ACCOUNT",
   "returnUrl":"https://your-company.com/...",
   "shopperReference":"YOUR_UNIQUE_SHOPPER_ID_IOfW3k9G2PvXFu2j",
   "shopperInteraction":"ContAuth",
   "recurringProcessingModel": "CardOnFile"
}

If the payment was successful, you'll receive a resultCode of Authorised.

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

If you are implementing 3D Secure for PSD2 SCA compliance and would like to know how the regulation will impact your recurring business model, see SCA requirements based on business model.

Making a subsequent payment for a subscription or contract

Make a POST /payments request and include the following parameters.

  • paymentMethod: Object that contains the shopper's tokenized payment details.

    • recurringDetailReference or storedPaymentMethodId for API v49 and above. This is the recurringDetailReference returned in the response when you created the token.
  • shopperReference: This is the shopperReference that you used the first time when you created the token for the shopper's card details.
  • shopperInteraction: Set this to ContAuth.
  • recurringProcessingModel: Set this to Subscription or UnscheduledCardOnFile depending on your business model. See Recurring transaction types.
{
   "amount":{
      "value":2000,
      "currency":"USD"
   },
   "paymentMethod":{
      "type": "scheme",
      "storedPaymentMethodId":"7219687191761347"
   },
   "reference":"YOUR_ORDER_NUMBER",
   "merchantAccount":"YOUR_MERCHANT_ACCOUNT",
   "returnUrl":"https://your-company.com/...",
   "shopperReference":"YOUR_UNIQUE_SHOPPER_ID_IOfW3k9G2PvXFu2j",
   "shopperInteraction":"ContAuth",
   "recurringProcessingModel": "Subscription"
}

If the payment was successful, you'll receive a resultCode of Authorised.

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

Next steps