Skip to main content

Saved Payment Methods

Overview​

Renders a radio input list of saved payment methods as part of a checkout flow.

Note: This sub component will only display saved payment methods if a payment_method_group_id with associated payment methods was passed to the create checkout API request.

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.

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-saved-payment-methods</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(text){' '}
{
  // text styles
}
::part(text-danger){' '}
{
  // text danger styles
}
::part(label){' '}
{
  // label styles
}
::part(input-radio){' '}
{
  // input radio styles
}
::part(input-radio-focused){' '}
{
  // input radio focused styles
}
::part(input-radio-checked){' '}
{
  // input radio checked styles
}
::part(input-radio-checked-focused){' '}
{
  // input radio checked focused styles
}
::part(input-radio-invalid){' '}
{
  // input radio invalid styles
}
</style>

</head>

<body>
<justifi-modular-checkout auth-token="authToken" checkout-id="ch_123">
  <justifi-saved-payment-methods />
</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​

This component does not emit any events directly. Events are handled by the parent justifi-modular-checkout component.

Theming & Layout​

PartDescriptionDOM target
::part(radioListItem)—
::part(inputRadio)—
::part(inputRadioChecked)—
::part(inputRadioCheckedFocused)—
::part(inputRadioFocused)—
::part(inputRadioInvalid)—
::part(label)—
::part(input)—
::part(inputFocused)—
::part(inputInvalid)—
::part(inputInvalidAndFocused)—