Skip to main content

Card Form

Overview​

Renders a form for collecting credit and debit card details as part of a checkout flow.

This component is designed to be used within the justifi-modular-checkout and does not accept props directly. Instead, it relies on shared state passed through the Stencil Store, managed by the wrapper component.

Note: If you are using the card payment method, you also need to provide billing information. This can be done by using either the justifi-billing-form-full component for complete billing address, the justifi-card-billing-form-simple component for ZIP code only, or by passing the billingInformation object as an argument to the submitCheckout method called on the wrapper. The billingInformation object can contain all the fields or just the address_postal_code field.

Authorization and business context are also handled by justifi-modular-checkout, which manages authentication tokens and related configuration.

This component exposes no public methods or properties and is not intended for standalone use.

Usage​

<!DOCTYPE html>
<html dir="ltr" lang="en">

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
<title>justifi-card-form</title>

<script type="module" src="https://cdn.jsdelivr.net/npm/@justifi/webcomponents@6.7.3/dist/webcomponents/webcomponents.esm.js"></script>

<script
nomodule
src="https://cdn.jsdelivr.net/npm/@justifi/webcomponents@6.7.3/dist/webcomponents/webcomponents.js"
></script>

<style>
/** These are the available parts for styling the component. */
::part(skeleton){' '}
{
  // skeleton styles
}
::part(label){' '}
{
  // label styles
}
::part(input-invalid-and-focused){' '}
{
  // input invalid and focused styles
}
::part(input-invalid){' '}
{
  // input invalid styles
}
::part(input-focused){' '}
{
  // input focused styles
}
::part(input){' '}
{
  // input styles
}
</style>

</head>

<body>
<justifi-modular-checkout auth-token="authToken" checkout-id="ch_123">
  <justifi-card-form />
  <button id="submit-button">Submit Checkout</button>
</justifi-modular-checkout>
</body>

<script>
(function() {
  const checkoutWrapper = document.querySelector('justifi-modular-checkout');
  const submitButton = document.querySelector('#submit-button');

  submitButton.addEventListener('click', () => {
    checkoutWrapper.submitCheckout();
  });

  checkoutWrapper.addEventListener('error-event', (event) => {
    console.error(event.detail);
  });

  document.addEventListener('submit-event', (event) => {
    console.log('Checkout completed successfully!', event.detail);
  });
})();
</script>

</html>

Props, Events & Methods​

Events​

All submit and error events bubble through the parent <justifi-modular-checkout>, so no additional listeners are required on the card form.

Theming & Layout​

  • When embedded inside cards, wrap the host element in your layout container and scope typography overrides via the parts listed below.
PartDescriptionDOM target
::part(skeleton)—
::part(input)—
::part(inputFocused)—
::part(inputInvalid)—
::part(inputInvalidAndFocused)—
::part(label)—
::part(textDanger)—
  • Use the card-form CSS part (::part(card-form)) to apply box shadows or wrapper padding.