Payment Components

Available Components

Component	Description
`CreatePaymentForm`	Record a new payment for a document

CreatePaymentForm

Record a payment against an invoice:

Record Paymenttypescript

import { RecordPaymentForm } from "@/components/space-invoices/payments";

function _PaymentDialog({ invoice, onClose }) {
  const remainingAmount = invoice.total - invoice.paidAmount;

  return (
    
      
        
          Record Payment
        
        id}
          remainingAmount={remainingAmount}
          onSuccess={(payment) => {
            toast.success(`Payment of ${payment.amount} recorded`);
            onClose();
          }}
          onCancel={onClose}
        />
      
    
  );
}

Props

Prop	Type	Description
`invoiceId`	`string`	Invoice ID
`invoiceTotal`	`number`	Invoice total amount
`entityId`	`string`	Entity context
`onSuccess`	`(payment) => void`	Success callback
`onError`	`(error) => void`	Error callback

Composing Payment History

The kit does not currently ship a dedicated payment list/detail component. Most teams compose payment history inside their invoice detail page or account UI, using SDK data and their own layout.

Next Steps

Invoices — Invoice components
Customization — Customize payment flow