CreditCard Container

See the CardType type and related payment types in the @adobe-commerce/payment-services-sdk/payment module.

Configuration

The CreditCard container provides the following configuration options:

Parameter	Type	Req?	Description
getCartId	function	Yes	Returns a promise that resolves to the shopper’s cart ID.
creditCardFormRef	RefObject<CreditCardFormRef>	Yes	References the credit card form. Pass { current: null } initially. After rendering, the container sets current to a { validate: () => boolean; submit: () => Promise<void> } object for programmatic validation and submission.
onSuccess	function	Yes	Executes when the payment flow completes successfully.
onError	function	Yes	Executes when the payment flow aborts due to an error. Receives an object with two properties, { name: string, message: string }, containing the localized error name and message. Both properties are user-facing and translatable through the “PaymentServices.CreditCard.errors” language definitions. Note: When omitted, the promise rejects properly so the calling code can catch errors directly.
getCustomerToken	(() => string | null) | null	No	Optional override for retrieving the customer auth token. If it returns a non-null string, the Save this card checkbox is shown and vaulting can be requested on submit. If not provided, the container uses getCustomerToken from initialization.

Card vaulting

The CreditCard container shows a Save this card for future purchases checkbox when both of the following are true:

• The shopper is logged in — the host application must emit the authenticated event through the event bus.
• Card vaulting is enabled in the Adobe Commerce Admin at Stores > Configuration > Sales > Payment Methods > Adobe Payment Services > Credit Card Fields > Vault Enabled.

If the shopper selects the checkbox and submits, the card is saved for future purchases. The checkbox is automatically hidden when either the shopper is a guest or vaulting is disabled.

Slots

This container exposes no customizable slots.

Usage

The following example demonstrates how to use the CreditCard container:

import { render as provider } from '@dropins/storefront-payment-services/render.js';
import { CreditCard } from '@dropins/storefront-payment-services/containers/CreditCard.js';

await provider.render(CreditCard, {
  getCartId: getCartId,
  creditCardFormRef: {},
  onSuccess: onSuccess,
})(block);