📄

Invoicing

Professional invoice creation and payment collection

Interactive Demo

Create an invoice below. Add line items, preview the invoice, and see the payment QR code that includes the exact invoice total.

Create Invoice

Customer Name

Customer Email

Line Items

NLe

NLe 1,000.00

NLe

NLe 50.00

Total Amount

NLe 1,207.50

Including 15% GST

Sandbox mode - Invoice will include a payment QR code

AI Integration Guide

Copy this prompt to your AI coding assistant to integrate the Invoice widget.

Prompt for AI Assistant

bash

I want to add a Peeap Invoice Creator to my app. Here are the details:

"code-comment">## Installation
npm install @peeap/widgets

"code-comment">## Basic Usage (React/Next.js)
import { InvoiceCreator } from '@peeap/widgets'

function MyInvoices() {
  return (
    <InvoiceCreator
      apiKey="pk_live_YOUR_API_KEY"
      merchantId="YOUR_MERCHANT_ID"
      onInvoiceCreated={(invoice) => console.log('Invoice created:', invoice)}
      onInvoiceSent={(invoice) => console.log('Invoice sent:', invoice)}
    />
  )
}

"code-comment">## Available Props
- apiKey (required): Your Peeap public API key
- merchantId (required): Your merchant business ID
- theme: 'light' | 'dark' (default: 'light')
- currency: string (default: 'SLE')
- taxRate: number (default: 15) - Default tax percentage (GST)
- defaultDueDays: number (default: 30) - Days until due
- showPreview: boolean (default: true) - Show invoice preview
- companyInfo: { name, address, logo } - Your company details
- onInvoiceCreated: (invoice) => void
- onInvoiceSent: (invoice) => void
- onError: (error) => void

Please integrate this into my app with [describe your requirements].

Component Props

Prop	Type	Default	Description
`apiKey`	string	required	Your Peeap public API key
`merchantId`	string	required	Your merchant business ID
`currency`	string	'SLE'	Invoice currency
`taxRate`	number	15	Default tax percentage (GST)
`defaultDueDays`	number	30	Days until invoice is due
`companyInfo`	object	-	Your company name, address, logo
`onInvoiceSent`	function	-	Callback when invoice is sent

Code Examples

Basic Invoice Creator

tsx

class="code-keyword">import { InvoiceCreator } class="code-keyword">from class="code-keyword">class="code-string">'@peeap/widgets'

class="code-keyword">export class="code-keyword">default class="code-keyword">function class="code-function">InvoicesPage() {
  class="code-keyword">return (
    <div className=class="code-keyword">class="code-string">"max-w-2xl mx-auto p-4">
      <h1>Create Invoice</h1>
      <class="code-component">InvoiceCreator
        apiKey=class="code-keyword">class="code-string">"pk_live_your_key"
        merchantId=class="code-keyword">class="code-string">"your_merchant_id"
      />
    </div>
  )
}

With Company Branding

tsx

<class="code-component">InvoiceCreator
  apiKey=class="code-keyword">class="code-string">"pk_live_your_key"
  merchantId=class="code-keyword">class="code-string">"your_merchant_id"
  companyInfo={{
    name: class="code-keyword">class="code-string">"ABC Enterprises",
    address: class="code-keyword">class="code-string">"45 Siaka Stevens Street, Freetown",
    logo: class="code-keyword">class="code-string">"/company-logo.png",
    email: class="code-keyword">class="code-string">"billing@abc.sl",
    phone: class="code-keyword">class="code-string">"+232 76 123 456"
  }}
  currency=class="code-keyword">class="code-string">"SLE"
  taxRate={15}
  defaultDueDays={14}
/>

Invoice List View

tsx

class="code-keyword">import { InvoiceList } class="code-keyword">from class="code-keyword">class="code-string">'@peeap/widgets'

class="code-keyword">class=class="code-keyword">class="code-string">"code-comment">// Display all invoices with status filters
<class="code-component">InvoiceList
  apiKey=class="code-keyword">class="code-string">"pk_live_your_key"
  merchantId=class="code-keyword">class="code-string">"your_merchant_id"
  filters={[class="code-keyword">class="code-string">'all', class="code-keyword">class="code-string">'draft', class="code-keyword">class="code-string">'sent', class="code-keyword">class="code-string">'paid', class="code-keyword">class="code-string">'overdue']}
  onInvoiceClick={(invoice) => router.class="code-function">push(class="code-keyword">class="code-template">`/invoices/${invoice.id}`)}
/>

Common Use Cases

Freelancer Invoicing

Create and send invoices to clients with custom payment terms and automatic reminders.

Subscription Billing

Set up recurring invoices for monthly or annual subscriptions with automatic generation.

B2B Payments

Send professional invoices to business clients with detailed line items and tax calculations.

Service Billing

Bill for hours worked or project milestones with customizable templates.