CreditCard Container

… See ‘CardType’ from @adobe-commerce/payment-services-sdk/payment.

Version: 3.0.1

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.

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);