Payment Components

Available Components

Component	Description
CreatePaymentForm	Record a new payment for a document

CreatePaymentForm

Record a payment against an invoice:

Record Paymenttypescript

Copy

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

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

  return (
    <Dialog open onOpenChange={onClose}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Record Payment</DialogTitle>
        </DialogHeader>
        <RecordPaymentForm
          documentId={invoice.id}
          remainingAmount={remainingAmount}
          onSuccess={(payment) => {
            toast.success(`Payment of ${payment.amount} recorded`);
            onClose();
          }}
          onCancel={onClose}
        />
      </DialogContent>
    </Dialog>
  );
}

Personalize locally

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