Content block

Money breakdown

Line items, fees, discounts, and totals for a summary or receipt.

Copy the bindings from
app/features/fundraisers/routes/public/fundraisers.slug.checkout/components/details-summary-panel.tsx
Route
/fundraisers/:slug/checkout
No line items
Total today$0.00
Printed props
<Form
  validator={{
    validate: validate,
  }}
  onSubmit={onSubmit}
>
  <MoneyBreakdown
    rows={[]}
    total={{
      label: 'Total today',
      value: <MoneyLabel
        cents={0}
      />,
    }}
  />
</Form>
One line item
Donation amount$50.00
Total today$50.00
Printed props
<Form
  validator={{
    validate: validate,
  }}
  onSubmit={onSubmit}
>
  <MoneyBreakdown
    rows={[
      {
        id: 'donation',
        label: 'Donation amount',
        value: <MoneyLabel
          cents={5000}
        />,
      },
    ]}
    total={{
      label: 'Total today',
      value: <MoneyLabel
        cents={5000}
      />,
    }}
  />
</Form>
Fees, discount and receipt total
Adoption fee$600.00
Travel carrier$35.00
Discount-$50.00
Processing fee$17.27
Platform fee$1.00
Charged to Visa ····4242$603.27
Net adoption and donation amount: $585.00
Printed props
<Form
  validator={{
    validate: validate,
  }}
  onSubmit={onSubmit}
>
  <MoneyBreakdown
    rows={[
      {
        id: 'adoption',
        label: 'Adoption fee',
        value: <MoneyLabel
          cents={60000}
        />,
      },
      {
        id: 'carrier',
        label: 'Travel carrier',
        value: <MoneyLabel
          cents={3500}
        />,
      },
      {
        id: 'discount',
        label: 'Discount',
        value: <MoneyLabel
          cents={-5000}
        />,
      },
      {
        id: 'processing',
        label: 'Processing fee',
        value: <MoneyLabel
          cents={1727}
        />,
        muted: true,
      },
      {
        id: 'platform',
        label: 'Platform fee',
        value: <MoneyLabel
          cents={100}
        />,
        muted: true,
      },
    ]}
    total={{
      label: 'Charged to Visa ····4242',
      value: <MoneyLabel
        cents={60327}
      />,
    }}
    footer="Net adoption and donation amount: $585.00"
  />
</Form>