Skip to content

CreditCard container

The CreditCard container allows a shopper to enter credit card details during the checkout process. You can configure it to manage and display the credit card fields.

CreditCard configurations

The CreditCard container provides the following configuration options:

OptionTypeReq?Description
apiUrlstringYesThe URL to the Adobe Commerce GraphQL endpoint, such as "https://example.com/graphql".
getCartIdfunctionYesShould return a promise that resolves to the shopper`s cart ID.
getCustomerTokenfunctionYesThe credit card container may send GraphQL requests on behalf of the shopper. This requires GraphQL authorization, which can be performed using authorization tokens or session cookies. For token-based authorization, the "getCustomerToken" function should return a customer token as a string, or null for guest checkouts. For session-based authorization, the "getCustomerToken" property must explicitly be set to "null".
creditCardFormRefobjectYesCredit card form reference. Initially, { current: null } should be passed. Once rendered, the credit card container will set the "current" property to an { validate: () => boolean; submit: () => Promise<void> } object, which parent containers can use to (programmatically) validate and submit the credit card form.
onSuccessfunctionNoCalled when the payment flow finishes successfully. This function is not passed any arguments.
onErrorfunctionNoCalled when the payment flow was aborted due to an error. The function receives a single argument, {message: string}, containing the reason of error.

Example

The following example shows 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';
import { getUserTokenCookie } from '../../scripts/initializers/index.js';
import { getConfigValue } from '../../scripts/configs.js';
const commerceCoreEndpoint = await getConfigValue('commerce-core-endpoint');
const $content = document.createElement('div');
const creditCardFormRef = { current: null };
const placeOrderButton = document.getElementById('place-order');
PaymentServices.render(CreditCard, {
apiUrl: commerceCoreEndpoint,
getCustomerToken: getUserTokenCookie,
getCartId: () => 'ozGi7uLI74etDYyMijoI2cla5CmGIBch',
creditCardFormRef: creditCardFormRef,
})($content);
placeOrderButton.onclick = () => {
if (creditCardFormRef.current) {
if (creditCardFormRef.current.validate() {
const future = creditCardFormRef.current.submit()
future.catch(console.error)
}
}
}