Skip to main content

Modular Checkout

Overview​

The justifi-modular-checkout wrapper component serves as a container for checkout-related sub components. It manages the tokenization of payment methods, billing information, insurance, and overall form submission to complete the checkout. It also supports saving a payment method to a payment method group for future use.

Props, Events & Methods​

NameTypeRequiredDefaultDescription
auth-tokenstringYes—
checkout-idstringYes—
preCompleteHook(data: CheckoutState, resolve: (data: CheckoutState) => void, reject: () => void) => voidNo—

Events​

  • error-event: Emitted when validation fails, tokenization errors occur, or any other error happens during checkout processing. The event detail includes message, errorCode, and severity.
  • submit-event: Fired when checkout is successfully completed. The event detail includes the checkout object and a success message.
  • checkout-changed: Emitted whenever the checkout state changes (e.g., payment method selection, available payment methods). The event detail includes availablePaymentMethodTypes, selectedPaymentMethod, and savedPaymentMethods.

Public methods​

  1. submitCheckout(submitCheckoutArgs?) – Programmatically trigger the checkout submission. Validates forms, tokenizes payment methods if needed, and completes the checkout. Optionally accepts billing form fields as arguments.
  2. validate() – Validates all nested forms (payment method, billing, insurance) and returns a boolean indicating if validation passed. Emits error-event if validation fails.
  3. setSelectedPaymentMethod(paymentMethod) – Sets the selected payment method programmatically on the checkout.
<!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-modular-checkout</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>
    ::part(font-family) {
      font-family: georgia;   
    }
      
    ::part(color) {
      color: darkslategray;
    }

    ::part(background-color) {
      background-color: transparent;
    }
  </style>

</head>

<body>
<justifi-modular-checkout auth-token="authToken" checkout-id="cho_1234567890">
  <justifi-checkout-summary />
  <justifi-card-form />
  <justifi-billing-form-full />
</justifi-modular-checkout>
</body>

<script>
(function () {
  const modularCheckout = document.querySelector('justifi-modular-checkout');

  modularCheckout.addEventListener('error-event', (event) => {
    // this event is emitted when validation fails or an error occurs during processing
    console.error('error-event', event.detail);
  });

  modularCheckout.addEventListener('submit-event', (event) => {
    // this event is emitted when checkout is successfully completed
    console.log('submit-event', event.detail);
  });

  modularCheckout.addEventListener('checkout-changed', (event) => {
    // this event is emitted when the checkout state changes
    // includes availablePaymentMethodTypes, selectedPaymentMethod, and savedPaymentMethods
    const {
      availablePaymentMethodTypes,
      selectedPaymentMethod,
      savedPaymentMethods,
    } = event.detail;
    console.log('Available payment methods:', availablePaymentMethodTypes);
    console.log('Selected payment method:', selectedPaymentMethod);
    console.log('Saved payment methods:', savedPaymentMethods);
  });
})();
</script>

</html>