CreditCard Container

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

Version: 2.0.0

Configuration

The CreditCard container provides the following configuration options:

Parameter	Type	Req?	Description
getCartId	function	Yes	Should return a promise that resolves to the shopper`s cart ID.
creditCardFormRef	RefObject<CreditCardFormRef>	Yes	Credit card form reference. Initially, { current: null } should be passed. Once rendered, the credit card container will set the ‘current’ property to a { validate: () => boolean; submit: () => Promise<void> } object, which parent containers should use to (programmatically) validate and submit the credit card form.
onSuccess	function	Yes	Called when payment flow is successful.
onError	function	Yes	Called when the payment flow was aborted due to an error. The function receives an object with two properties, { name: string, message: string }, containing the localized error name and message. Both properties are user-facing and can be translated using the “PaymentServices.CreditCard.errors” language definitions.

Slots

This container does not expose any 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);