hb-page-checkout — page checkout

Category: commerce
Tags: commerce, checkout, page

What it does

Checkout page layout that embeds the payment flow and shopping cart: left column uses hb-checkout (user, shipments, gateways, payment) and right column uses hb-checkout-shopping-cart. Recomputes line totals, tax, shipment fee, and payment total from JSON props; updates shipment selection internally and forwards paymentCompleted and saveUser to the host.

Custom element

hb-page-checkout

Attributes (snake_case; use string values in HTML)

• id, style (optional): strings.
• shipments (required): JSON string — IShipment[] (see hb-checkout types).
• user (required): JSON string — IUser (address, nationality, zip, fixed, etc.).
• payment (required): JSON string — shopping payment + IPayment fields (currency, items, totals, merchant, country).
• gateways (required): JSON string — IGateway[] (e.g. PayPal id, Google Pay ids).
• completed (optional): "yes" | "no" — completion state for UI.

Events

• saveUser: detail is IUser (updated user payload).
• paymentCompleted: { total: number; method: string; completed: true }.

Usage notes

• CSS variables: --hb-checkout-border, Bootstrap --bs-primary, --bs-secondary, --bs-success, --bs-info, --bs-warning, --bs-danger.
• Compose gateways and payment objects like Storybook extra/docs.ts; shared types live under hb-checkout / hb-checkout-shopping-cart.

Minimal HTML example

<hb-page-checkout
  shipments="[]"
  user='{"fullName":"Jane Doe","addressWithNumber":"Main 1","city":"Rome","nationality":"IT","zip":"00100","fixed":true}'
  payment='{"countryCode":"IT","merchantName":"Shop","currencyCode":"EUR","total":100,"items":[{"id":"a","name":"A","unitaryPrice":10,"taxPercentage":22}]}'
  gateways='[{"id":"paypal","label":"PayPal","paypalid":"YOUR_CLIENT_ID"}]'
></hb-page-checkout>