Skip to main content

Sezzle Payment Method

Overview​

Renders a radio input for selecting the Sezzle payment method, if BNPL (Buy Now Pay Later) is enabled for the sub account.

This component is designed to be used within the justifi-modular-checkout and does not accept props directly. Instead, it relies on the shared state passed through the Stencil Store, managed by the justifi-modular-checkout 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-sezzle-payment-method</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-sezzle-payment-method />
</justifi-modular-checkout>
</body>

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

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

  modularCheckout.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​

  • paymentMethodOptionSelected: Emits when Sezzle is selected as the payment method.

Theming & Layout​

  • Respect Sezzle's branding by keeping the provided colors and logos intact.