Card Component integration

When you make the /sessions request, cards does not require any additional fields.

When you configure the Component, cards does not require any additional configuration.

After adding configuration to the Component, create the checkout session.

To let your shoppers use the address lookup functionality:

1. Set the AddressLookupCallback using the CardComponent.setAddressLookupCallback(AddressLookupCallback) function.

2. In AddressLookupCallback, implement the onQueryChanged(query: String) callback to make an API request to the address lookup API you use with the query parameter.

3. Map the values you receive in the response to an array of LookupAddress objects that include the following:

   Field	Required	Description
   id		The unique identifier for this address search result.
   name		The name of the item that shows up in the list of suggested addresses.
   street		The name of the street.
   houseNumberOrName		The number or name of the house.
   postalCode		A maximum of five digits for an address in the US, or a maximum of ten characters for an address in all other countries/regions.
   city		The name of the city.
   country		The two-character ISO-3166-1 alpha-2 country code. For example, US. If you do not collect the shopper's country/region, use the placeholder ZZ.
   stateOrProvince	Required for Android	The two-character ISO 3166-2 state or province code. For example, CA (California) in the US or ON (Ontario) in Canada.
   apartmentSuite		The name or number of the apartment/suite.

4. Pass the lookup result to the Component.
   For example:

   Implement the AddressLookupCallback

   Expand view

   Copy link to code block

   Copy code

   Copy code

   cardComponent.setAddressLookupCallback(object : AddressLookupCallback {
       override fun onQueryChanged(query: String) {
           // Make an API request to your desired endpoint.
           // Map the LookupAddress object fields to address objects.
           // Pass it back to Drop-in.
           cardComponent.updateAddressLookupOptions(options)
       }
   }

5. To handle cases when a shopper presses the back button, delegate the onBackPressed() event to the Component using CardComponent.handleBackPress(). This method returns true if the Component handles the back press.

   Delegate back press to the Card Component

   Expand view

   Copy link to code block

   Copy code

   Copy code

   override fun onBackPressed() {
       if (cardComponent?.handleBackPress() == true) return
       super.onBackPressed()
   }

When you make a /sessions request from your server, include:

• splitCardFundingSources: Set to true.

The following example shows how to do this for a shopper in the Netherlands, making a EUR 47.00 payment.

curl https://checkout-test.adyen.com/checkout/v70/sessions \
-H 'x-api-key: ADYEN_API_KEY' \
-H 'content-type: application/json' \
-d '{
    "merchantAccount": "YOUR_MERCHANT_ACCOUNT",
    "countryCode": "NL",
    "amount": {
        "currency": "EUR",
        "value": 4700
    },
    "splitCardFundingSources": true
}'

Storing the shopper's payment details

Include the storedPaymentMethodMode parameter in your /sessions request. Possible values:

If you or the shopper chooses to store payment details, Adyen creates a token for the shopper's payment details when the shopper pays.

Showing stored payment methods in your payment form

To show stored payment methods in your payment form:

1. Include in your /sessions request:

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

   The /paymentMethods response includes the stored payment methods for this shopper.

2. Pass the API response to your client-side app.

3. When you launch and show the Component, use the stored payment methods:

   Launch and show the Component with stored payment methods

   Expand view

   Copy link to code block

   Copy code

   Copy code

   import com.adyen.checkout.components.compose.get
    
   // Get the list of stored payment methods.
   val storedPaymentMethods = checkoutSession.sessionSetupResponse.paymentMethodsApiResponse?.storedPaymentMethods
   val storedPaymentMethod = // The stored payment method from the list.
    
   @Composable
   private fun ComposableCardComponentComponent() {
      // Keep a reference to this Component in case you need to access it later.
      val cardComponent = CardComponent.PROVIDER.get(
          checkoutSession = checkoutSession,
          storedPaymentMethod = storedPaymentMethod,
          configuration = checkoutConfiguration, // Optional. Pass this if you created a configuration object
          componentCallback = callback,
          // This key is required to ensure a new Component gets created for each different screen or payment session.
          // Generate a new value for this key every time you need to reset the Component.
          key = "YOUR_UNIQUE_KEY_FOR_THIS_COMPONENT",
      )
    
      // This is your composable, a wrapper around our xml view.
      AdyenComponent(
         component = cardComponent,
         modifier = YOUR_MODIFIER,
      )
   }

Making a payment with stored payment details

When the shopper pays, the Component uses the token for the shopper's payment details. You can also use tokens to make shopper-not-present payments for subscriptions or contracts.

If you want to accept credit card installments, include in the /sessions request, include the installmentOptions object which includes the following fields:

Field	Required	Description
values		An array of the number of installments that the shopper can choose.
preselectedValue		The preselected number of installments in the payment form.
plans		An array that shows the types of installment plans that the shopper can choose. Possible values: regular and revolving. If not included, the default is regular.