# Accept payments with stored card credentials

> **Information**
>
> You can enable Remember Me alongside the stored card functionality to also make the cardholder's stored cards available for faster checkout with Remember Me. To enable Remember Me, contact your account manager or [request support](https://dashboard.checkout.com/support/new?topic=case_account_management_and_access&issue=issue_account_changes).

With Vault, you can store your customers' payment card details as [Payment instruments](https://www.checkout.com/docs/payments/store-and-manage-credentials/store-credentials/payment-instruments.md), which you can later [reuse in future payments](https://www.checkout.com/docs/payments/accept-payments/pay-with-stored-card-details.md) so they do not have to input their details every time they make a purchase.

Flow for mobile enables customers to store their card credentials in Vault during checkout. The next time the customer shops with you, we display their stored card details.

---

## Store card credentials

For new customers, call the [Request a Payment Session](https://api-reference.checkout.com/tag/Flow/#operation/CreatePaymentSession) endpoint and set the `payment_method_configuration.card.store_payment_details` field to `collect_consent`. This value displays the option to store card credentials for future payments. If you have already collected consent from the customer, you can provide `payment_method_configuration.card.store_payment_details: "enabled"` instead.

You must also provide either the `customer.email` or `customer.id` fields.

> **Information**
>
> If your payment session request omits `customer.email`, the backend silently downgrades `store_payment_details: collect_consent` to `disabled`, and the consent checkbox does not display. If your customers are not seeing the consent checkbox, check your session request before troubleshooting your integration.

When `store_payment_details` is set to `collect_consent`, the SDK reports the customer's choice as `storeForFutureUse` on the tokenization result. Forward this value as `source.store_for_future_use` on your payment request. Sending nothing means the card is not stored, regardless of what the customer chose. For more information, see the `onTokenized` reference for [iOS](https://www.checkout.com/docs/payments/accept-payments/accept-a-payment-on-your-mobile-app/flow-for-mobile-library-reference/ios/componentcallback.md#onTokenized(TokenizationResult)) and [Android](https://www.checkout.com/docs/payments/accept-payments/accept-a-payment-on-your-mobile-app/flow-for-mobile-library-reference/android/componentcallback.md#onTokenized(TokenDetails)).

## Display stored cards

You can provide the stored customer ID for a returning customer using the `payment_method_configuration.stored_card.customer_id` field when you [Request a Payment Session](https://api-reference.checkout.com/tag/Flow/#operation/CreatePaymentSession).

Flow for mobile displays the card details stored for the [customer](https://www.checkout.com/docs/payments/store-and-manage-credentials/store-credentials/customers.md) to reuse, as well as the card verification value (CVV) if needed for payment.

Alternatively, if you already have payment instruments that are not stored under any customer, you can provide them using the `payment_method_configuration.stored_card.instrument_ids` field instead.

---

## Capture CVV for stored card

Some regions or card schemes, such as Mada, require the card verification value (CVV) when performing a stored card payment. Flow for mobile captures and tokenizes the CVV from the customer when such stored card details are selected.

Optionally, you can set the stored card component's CVV capture field to `true` to always capture CVV from the customer:

**Android**

Set `storedCardConfiguration.captureCardCvv` to `true`, and pass the configuration in the `componentOptions` map using `PaymentMethodName.StoredCard` as the key. Flow embeds the stored card component automatically when the payment session carries a `stored_card` payment method, so the same configuration applies whether you create the `Flow` component or the stored card component on its own:

```kotlin
// 1. Configure the Stored Card options to enable CVV capture
val storedCardConfiguration = StoredCardConfiguration(
  captureCardCvv = true // Enable CVV capture for saved cards
)

// 2. Wrap the configuration in a ComponentOption
val storedCardOptions = ComponentOption(storedCardConfiguration = storedCardConfiguration)

// 3. Create the SDK configuration
// Pass the options in the componentOptions map using PaymentMethodName.StoredCard as the key
val configuration = CheckoutComponentConfiguration(
  context = activity,
  publicKey = "pk_sbox_...",
  environment = Environment.SANDBOX,
  paymentSession = paymentSessionResponse,
  componentOptions = mapOf(
    PaymentMethodName.StoredCard to storedCardOptions
  )
)

// 4. Initialize CheckoutComponents (factory.create() is a suspend function)
val factory = CheckoutComponentsFactory(configuration)
val checkoutComponents = factory.create()

// 5. Create the desired components
// Flow component: Displays all available payment methods (Cards, Wallets, and Stored Cards)
val flowComponent = checkoutComponents.create(ComponentName.Flow)

// Stored Card component: Displays only the customer's saved cards
val storedCardComponent = checkoutComponents.create(PaymentMethodName.StoredCard)
```

**iOS**

```swift
let sdk = try await CheckoutComponents(configuration: configuration)

let storedCard = try sdk.create(
  .storedCard(
    storedCardConfiguration: .init(
      captureCVV: true
    ),
    cardConfiguration: cardConfiguration
  )
)

storedCard.render()
```

You can also set `storedCardConfiguration.captureCVV` when you add the `.storedCard` option to a `Flow` component:

```swift
let flow = try sdk.create(
  .flow(
    options: [
      .card(),
      .storedCard(storedCardConfiguration: .init(captureCVV: true))
    ]
  )
)
```

---

## Display stored cards with Remember Me

When the payment session offers both stored cards and Remember Me, Flow for mobile shows Remember Me sign-up and sign-in inside the stored cards screen, instead of showing Remember Me alone. This is an account-level setting, and your payment session request stays the same.

To fill in the Remember Me details on the stored card screen, provide them in your configuration.

If you omit them, Flow uses the customer's email address and phone number from the payment session.

**Android**

```kotlin
val storedCardOptions = ComponentOption(
  storedCardConfiguration = StoredCardConfiguration(captureCardCvv = true),
  rememberMeConfiguration = RememberMeConfiguration(
    data = RememberMeConfiguration.Data(
      email = "jia.tsang@example.com",
      phone = Phone(countryCode = "44", number = "7700900000")
    )
  )
)

val configuration = CheckoutComponentConfiguration(
  context = activity,
  publicKey = "pk_sbox_...",
  environment = Environment.SANDBOX,
  paymentSession = paymentSessionResponse,
  componentOptions = mapOf(PaymentMethodName.StoredCard to storedCardOptions)
)
val checkoutComponents = CheckoutComponentsFactory(configuration).create()

// Flow shows the stored cards, with Remember Me inside them, when the session offers both
val flowComponent = checkoutComponents.create(ComponentName.Flow)

// Or create the stored card component on its own
val storedCardComponent = checkoutComponents.create(PaymentMethodName.StoredCard)
```

**iOS**

Set `storedCardConfiguration.rememberMeConfiguration` for a standalone stored card integration:

```swift
let sdk = try await CheckoutComponents(configuration: configuration)

let storedCard = try sdk.create(
  .storedCard(
    storedCardConfiguration: .init(
      captureCVV: true,
      rememberMeConfiguration: .init(
        data: .init(
          email: "jia.tsang@example.com",
          phone: .init(countryCode: "44", number: "7700900000")
        )
      )
    ),
    cardConfiguration: cardConfiguration
  )
)

storedCard.render()
```

When the session offers stored cards and the account has Remember Me enabled:

- `create(.flow(...))` returns the stored card component with Remember Me inside it.
- `create(.storedCard(...))` returns the stored card component and does not throw `componentNotSupported`.