Skip to content
Trading Cards

Better Quote Modules

Better Quote Modules is a starter project for building custom-coded React modules for HubSpot Commerce Hub quote templates.

It includes a larger set of reusable quote modules, including:

  • Quote structure modules for the header, sections, summary, and footer
  • Line item tables for standard and enhanced quote layouts
  • Pricing and totals modules, including payment details, billing details, billing schedules, and grand totals
  • Supporting modules for addresses, timelines, notes, payment plans, and terms acceptance

Requirements

Section titled “Requirements”

Minimum HubSpot licence: Commerce Hub Professional

Commerce Hub Professional and Enterprise accounts can create custom modules for quote templates. A Commerce Hub seat is required to create and edit quotes, and quote template permissions are required to configure the templates.

What it includes

Section titled “What it includes”
  • Typed React modules for quote templates
  • HubL data templates for pulling quote and CRM data
  • Client-hydrated islands for interactive quote behaviour
  • Example patterns for quote-module composition and editor-aware rendering

Included modules

Section titled “Included modules”
  • QuoteHeader — top-of-quote branding and summary header
  • QuoteSection — reusable content section wrapper
  • QuoteSummary — high-level quote summary and totals block
  • QuoteFooter — footer content for the rendered quote
  • SimpleLineItemTable — straightforward line item presentation
  • BetterLineItemTable — richer line item table with grouping and display options
  • PaymentDetails — payment-related quote details
  • BillingDetails — billing-related quote details
  • BillingSchedule — billing schedule display for recurring quotes
  • GrandTotal — totals and contract value summary
  • AddressBlock — address display module for quote context
  • TimelineDetails — contract and timeline details
  • AdditionalNotes — supporting notes and extra detail content
  • PaymentPlans — payment plan selection module
  • TermsAcceptance — terms selection and acceptance flow

Notes

Section titled “Notes”
  • Custom coded modules cannot be added to a quote through the API; the API can only select templates that already include the modules.
  • This starter is intended for Commerce Hub quote templates, not CRM record cards.

Documentation

Section titled “Documentation”