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:
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) } }}