# Accept payments with stored card credentials 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). You can then [reuse them in future payments](https://www.checkout.com/docs/payments/accept-payments/pay-with-stored-card-details.md), so customers do not have to enter their details each time they buy from you. Flow 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. Stored card payments are available for the following integrations: - [Flow](https://www.checkout.com/docs/payments/accept-payments/accept-a-payment-on-your-website.md) - [Hosted Payments Page](https://www.checkout.com/docs/payments/accept-payments/accept-a-payment-on-a-hosted-page.md) > **Information** > > You can enable [Remember Me](https://www.checkout.com/docs/payments/accept-payments/accept-a-payment-on-your-website/extend-your-flow-integration/enable-remember-me.md) 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). --- ## Store card credentials For new customers, call the [Request a Payment Session](https://api-reference.checkout.com/tag/Flow/#operation/CreatePaymentSession) endpoint and set `payment_method_configuration.card.store_payment_details` to `collect_consent`. This value displays the option to store card credentials for future payments. If you already collected consent from the customer, set the field to `enabled` instead. Also provide either `customer.email` or `customer.id`. > **Information** > > Your base URL's `{prefix}` value is unique to your account and environment. To learn how to retrieve your base URLs for the sandbox and production environments, see [API endpoints](https://www.checkout.com/docs/developer-resources/api/api-endpoints.md). **Production** `POST` `https://{prefix}.api.checkout.com/payment-sessions` **Sandbox** `POST` `https://{prefix}.api.sandbox.checkout.com/payment-sessions` ### Request examples **Collect consent from customer** ```json { "amount": 1000, "currency": "GBP", "reference": "ORD-123A", "billing": { "address": { "country": "GB" } }, "customer": { "email": "jia.tsang@example.com" }, "payment_method_configuration": { "card": { "store_payment_details": "collect_consent" } }, "success_url": "https://example.com/payments/success", "failure_url": "https://example.com/payments/failure" } ``` **You already collected customer consent** ```json { "amount": 1000, "currency": "GBP", "reference": "ORD-123A", "billing": { "address": { "country": "GB" } }, "customer": { "email": "jia.tsang@example.com" }, "payment_method_configuration": { "card": { "store_payment_details": "enabled" } }, "success_url": "https://example.com/payments/success", "failure_url": "https://example.com/payments/failure" } ``` ### Response example ```json { "id": "ps_2Un6I6lRpIAiIEwQIyxWVnV9CqQ", "payment_session_secret": "pss_9823241e-2cec-4c98-b23d-7b29ow4e2e34", "payment_session_token": "YmFzZTY0:eyJpZCI6InBzXzJVbjZJNmxScElBaUlFd1FJeXhXVm5WOUNxUSIsImFtb3VudCI6MTAwMCwibG9jYWxlIjoiZW4tR0IiLCJjdXJyZW5jeSI6IkdCUCIsInBheW1lbnRfbWV0aG9kcyI6W3sidHlwZSI6ImNhcmQiLCJjYXJkX3NjaGVtZXMiOlsiVmlzYSIsIk1hc3RlcmNhcmQiLCJBbWV4Il19XSwicmlzayI6eyJlbmFibGVkIjp0cnVlfSwiX2xpbmtzIjp7InNlbGYiOnsiaHJlZiI6Imh0dHBzOi8vYXBpLnNhbmRib3guY2hlY2tvdXQuY29tL3BheW1lbnQtc2Vzc2lvbnMvcHNfMlVuNkk2bFJwSUFpSUV3UUl5eFdWblY5Q3FRIn19fQ==", "_links": { "self": { "href": "https://{prefix}.api.sandbox.checkout.com/payment-sessions/ps_2Un6I6lRpIAiIEwQIyxWVnV9CqQ" } } } ``` > **Information** > > After a successful payment, call the [Get payment details](https://api-reference.checkout.com/tag/Payments/#operation/getPaymentDetails) endpoint providing the payment ID as the `{id}` path parameter. Store the returned `customer.id` value to use in future payments. --- ## Display stored cards For a returning customer, provide their stored customer ID in `payment_method_configuration.stored_card.customer_id` when you request a payment session. Flow displays the card details stored for the [customer](https://www.checkout.com/docs/payments/store-and-manage-credentials/store-credentials/customers.md), and collects the card verification value (CVV) if the payment needs it. If you have payment instruments that are not stored under a customer, provide them in `payment_method_configuration.stored_card.instrument_ids` instead. ### Request examples **Display stored cards under customer** ```json { "amount": 1000, "currency": "GBP", "reference": "ORD-123A", "billing": { "address": { "country": "GB" } }, "customer": { "email": "jia.tsang@example.com" }, "payment_method_configuration": { "card": { "store_payment_details": "collect_consent" }, "stored_card": { "customer_id": "cus_qeoewolfowrexgjwvpjujgaize" } }, "success_url": "https://example.com/payments/success", "failure_url": "https://example.com/payments/failure" } ``` **Display stored cards with instrument IDs** ```json { "amount": 1000, "currency": "GBP", "reference": "ORD-123A", "billing": { "address": { "country": "GB" } }, "customer": { "email": "jia.tsang@example.com" }, "payment_method_configuration": { "card": { "store_payment_details": "collect_consent" }, "stored_card": { "instrument_ids": [ "src_7r7eitazpleuxeqk5eeo6elcni", "src_nts3p7anttkehivcfqady4pygi" ], "default_instrument_id": "src_7r7eitazpleuxeqk5eeo6elcni" } }, "success_url": "https://example.com/payments/success", "failure_url": "https://example.com/payments/failure" } ``` ### Response example ```json { "id": "ps_2Un6I6lRpIAiIEwQIyxWVnV9CqQ", "payment_session_secret": "pss_9823241e-2cec-4c98-b23d-7b29ow4e2e34", "payment_session_token": "YmFzZTY0:eyJpZCI6InBzXzJVbjZJNmxScElBaUlFd1FJeXhXVm5WOUNxUSIsImFtb3VudCI6MTAwMCwibG9jYWxlIjoiZW4tR0IiLCJjdXJyZW5jeSI6IkdCUCIsInBheW1lbnRfbWV0aG9kcyI6W3sidHlwZSI6ImNhcmQiLCJjYXJkX3NjaGVtZXMiOlsiVmlzYSIsIk1hc3RlcmNhcmQiLCJBbWV4Il19XSwicmlzayI6eyJlbmFibGVkIjp0cnVlfSwiX2xpbmtzIjp7InNlbGYiOnsiaHJlZiI6Imh0dHBzOi8vYXBpLnNhbmRib3guY2hlY2tvdXQuY29tL3BheW1lbnQtc2Vzc2lvbnMvcHNfMlVuNkk2bFJwSUFpSUV3UUl5eFdWblY5Q3FRIn19fQ==", "_links": { "self": { "href": "https://{prefix}.api.sandbox.checkout.com/payment-sessions/ps_2Un6I6lRpIAiIEwQIyxWVnV9CqQ" } } } ``` --- ## Capture CVV for stored card Some regions and card schemes, such as Mada, require the CVV for a stored card payment. When a customer selects such a card, Flow captures the CVV and converts it to a token. To always capture the CVV, set `componentOptions.stored_card.captureCardCvv` to `true` when you initialize `CheckoutWebComponents`: ```javascript // Insert your public key here const publicKey = '{YOUR_PUBLIC_KEY}'; const checkout = await CheckoutWebComponents({ paymentSession, publicKey, environment: 'sandbox', componentOptions: { stored_card: { captureCardCvv: true, }, }, }); const flowComponent = checkout.create('flow'); flowComponent.mount('#flow-container'); ``` --- ## Enable customers to delete stored cards By default, customers can pay with the cards you stored for them but cannot delete them. To let customers delete a stored card from the payment form, set `componentOptions.stored_card.allowRemoveInstrument` to `true` when you initialize `CheckoutWebComponents`: ```javascript // Insert your public key here const publicKey = '{YOUR_PUBLIC_KEY}'; const checkout = await CheckoutWebComponents({ paymentSession, publicKey, environment: 'sandbox', componentOptions: { stored_card: { allowRemoveInstrument: true, }, }, }); const flowComponent = checkout.create('flow'); flowComponent.mount('#flow-container'); ``` You can set the option in any of the following places, and the most specific one takes precedence: - `componentOptions.flow.allowRemoveInstrument` – Applies to the stored cards shown in the Flow component. - `componentOptions.stored_card.allowRemoveInstrument` – Applies to all stored cards, as in the previous example. - `checkout.create('stored_card', { allowRemoveInstrument: true })` – Applies to the options you pass when you create the stored card component.