Card Component

This is the default with Components v5.0.0 or later.

Step 1:

In your POST /sessions request, include splitCardFundingSources: true.

Step 2:

In your front end create two DOM elements, placing these where you want the forms to be rendered.

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

 <h1>Debit card</h1>
 <div id="debit-container"></div>

 <h1>Credit card</h1>
 <div id="credit-container"></div>

Check if the paymentMethodsResponse loaded in your AdyenCheckout instance includes objects with fundingSource debit and credit, then mount the instances.

const debitCards = checkout.paymentMethodsResponse.paymentMethods.find(paymentMethod => paymentMethod.fundingSource === 'debit');

if (debitCards) {
  checkout.create('card', debitCards).mount('#debit-container');
}

const creditCards = checkout.paymentMethodsResponse.paymentMethods.find(paymentMethod => paymentMethod.fundingSource === 'credit');

if (creditCards) {
   checkout.create('card', creditCards).mount('#credit-container');
}

If you implemented an additional use case.

Step 1:

In your POST /paymentMethods request, include splitCardFundingSources: true.

Step 2:

In your front end create two DOM elements, placing these where you want the forms to be rendered.

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

 <h1>Debit card</h1>
 <div id="debit-container"></div>

 <h1>Credit card</h1>
 <div id="credit-container"></div>

Check if the /paymentMethods response returns objects that contain fundingSource debit and credit, then mount the instances.

const debitCards = paymentMethodsResponse.paymentMethods.find(paymentMethod => paymentMethod.fundingSource === 'debit');

if (debitCards) {
  checkout.create('card', debitCards).mount('#debit-container');
}

const creditCards = paymentMethodsResponse.paymentMethods.find(paymentMethod => paymentMethod.fundingSource === 'credit');

if (creditCards) {
   checkout.create('card', creditCards).mount('#credit-container');
}

How you store card details with the Component depends on the Checkout API version you use:

• Checkout API v70 or later
• Checkout API v69 or earlier

v70 or later

Send additional parameters in the /sessions request to store card details or to configure the Component to let the shopper choose if they want to store their card details.

In the /sessions request, include:

Possible values for storePaymentMethodMode:

For example:

curl https://checkout-test.adyen.com/v70/sessions \
-H 'X-API-key: YOUR_API_KEY' \
-H 'Content-Type: application/json' \
-d '{
    "amount":{
      "currency":"JPY",
      "value": 3000
    },
    "merchantAccount": "YOUR_MERCHANT_ACCOUNT",
    "reference": "YOUR_REFERENCE",
    "recurringProcessingModel": "CardOnFile",
    "returnUrl": "https://your-company.com/checkout?shopperOrder=12xy..",
    "storePaymentMethodMode": "askForConsent"
}'

v69 or earlier

To ask the shopper if they want to store their card details, set enableStoreDetails to true when adding the Card Component. This shows a checkbox for your shopper to choose to store their card details.

To store the shopper's card details without asking if they want to, include in your /sessions request:

To store shopper's card details, set enableStoreDetails to true when adding the Card Component. This shows a checkbox for your shopper to choose to store their card details.

If the shopper chooses to save their card details when making a payment, the onChange or onSubmit method from the Component includes a state.data.storePaymentMethod. Pass this to your server.

To create a token, include in your /payments request:

• storePaymentMethod: The state.data.storePaymentMethod from your front end.
• shopperReference: Your unique identifier for the shopper.

When you make the /sessions request, include shopperReference to show the shopper's stored card details.

By default, the Component shows available stored card payment methods. If you don't want to show them, set showStoredPaymentMethods to false when configuring the Component.

To add available stored cards in your payment form:

1. In your /paymentMethods request, include:

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

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

When creating an instance of the AdyenCheckout, pass the full /paymentMethods response to the paymentMethodsResponse object .

2. Add stored cards to your payment form:
   a. Create a DOM element for stored payment methods, placing it where you want the form to be rendered:

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

   b. Get the stored payment methods that you want to display from the checkout.paymentMethodsResponse object, and pass this when creating an instance of the Card Component:

   const storedPaymentMethod = checkout.paymentMethodsResponse.storedPaymentMethods[0];
   const card = checkout.create("card", storedPaymentMethod).mount("#stored-card");

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. You need this to make a payment.