Modular Checkout Summary
Overview
Renders a summary of checkout details consisting of the checkout description and amount passed in the create checkout API request 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 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-checkout-summary</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
}
</style>
</head>
<body>
<justifi-modular-checkout
auth-token="authToken"
checkout-id="ch_123"
save-payment-method="true"
>
<justifi-checkout-summary />
</justifi-modular-checkout>
</body>
</html>Props, Events & Methods
Events
No custom events; summary listens to the parent checkout for updates automatically.
Public methods
refresh()– Fetch updated totals (useful if you change the checkout server-side).
Theming & Layout
| Part | Description | DOM target |
|---|---|---|
::part(text) | — |