CreditCard Container

The CreditCard container renders a form for entering credit card details during checkout.

Version: 3.1.1

Configuration

The CreditCard container provides the following configuration options:

Option	Type	Req?	Description
getCartId	function	Yes	Returns a promise that resolves to the shopper’s cart ID.
creditCardFormRef	object	Yes	Reference to the credit card form. Initially, { current: null } should be passed. After rendering, the container sets current to the validate: () => boolean and submit: () => Promise<void> object, which parent containers can use to programmatically validate and submit the form. Any error during the payment flow propagates to onError and causes the promise returned by submit() to be rejected.
onSuccess	function	No	Called when the payment completes successfully. Receives { cartId: string }.
onError	function	No	Called when the payment flow fails or is aborted. Receives { name: string, message: string }, containing localized, user-facing error details. These values can be translated using PaymentServices.CreditCard.errors language definitions.

Slots

This container exposes no customizable slots.

Usage

The following example demonstrates how to render and submit a credit card form:

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

const $content = document.createElement('div');
const creditCardFormRef = { current: null };
const placeOrderButton = document.getElementById('place-order');

PaymentServices.render(CreditCard, {
  getCartId: async () => 'ozGi7uLI74etDYyMijoI2cla5CmGIBch',
  creditCardFormRef: creditCardFormRef,
})($content);

placeOrderButton.onclick = () => {
  if (creditCardFormRef.current) {
    if (creditCardFormRef.current.validate()) {
      const future = creditCardFormRef.current.submit()
      future.catch(console.error)
    }
  }
}