> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ecrypt.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Invoicing

## Overview

The Invoices module lets you generate branded payment requests and send them directly to customers via a hosted payment link. Unlike a standard credit card charge, an invoice gives the customer a professional document with itemized line items, a pricing summary, and a self-service "Pay Now" page they can open from any device.

Key capabilities:

* Create invoices tied to existing Customer Vault records
* Add one-time line items or pull from a saved product catalog
* Choose between **requesting payment** (the customer pays on their own) or **charging the customer directly** from a saved card
* Track invoice status in real time (Paid, Pending, Past Due, Overdue, Canceled)
* Customize the look of the invoice and payment form to match your brand
* Set a post-payment redirect URL and a Terms & Conditions link

***

## Navigation

Invoices lives in the left sidebar under **APPS → Invoices**, which expands to four sub-sections:

| Sub-section        | Path                                              | Purpose                               |
| ------------------ | ------------------------------------------------- | ------------------------------------- |
| **Dashboard**      | `/invoices/dashboard`                             | View and manage all invoices          |
| **Create Invoice** | `/invoices/create-invoice`                        | Build and send a new invoice          |
| **Branding**       | `/invoices/branding`                              | Customize invoice and form appearance |
| **URL Details**    | `/invoices/dashboard?actions=url-details-invoice` | Set redirect and T\&C URLs            |

***

## Invoices Dashboard

The Dashboard is the main invoice list. It opens automatically when you click **Invoices** in the sidebar.

### Status Filter Tabs

Six tabs across the top filter the list by invoice status:

| Tab          | Description                                                            |
| ------------ | ---------------------------------------------------------------------- |
| **All**      | Every invoice regardless of status                                     |
| **Paid**     | Invoices with full payment received                                    |
| **Past due** | Invoices where the due date has passed with no payment                 |
| **Overdue**  | Invoices flagged as overdue (may differ from past due by system logic) |
| **Pending**  | Invoices sent but not yet paid                                         |
| **Canceled** | Voided / canceled invoices                                             |

### Invoice List Columns

| Column                 | Description                                                            |
| ---------------------- | ---------------------------------------------------------------------- |
| **Issued Date**        | Date the invoice was created                                           |
| **Due Date**           | Payment deadline set on the invoice                                    |
| **Status**             | Color-coded badge: green = Paid, gold/amber = Past due, red = Canceled |
| **Total Amount**       | Full invoice value (line items + tax + surcharge)                      |
| **Paid Amount**        | Amount collected so far                                                |
| **Outstanding Amount** | Remaining balance due                                                  |
| **Customer**           | Customer name from the vault                                           |

Pagination controls at the bottom-right let you change **Rows per page** (dropdown) and page through results with **‹** / **›** arrows. The list shows "X–Y of Z" total records.

### CREATE INVOICE Button

The blue **CREATE INVOICE** button in the top-right corner of the dashboard navigates directly to the Create Invoice form.

### Filter Panel

Click the **FILTERS** toggle to expand a filter bar above the invoice table. Click **CLEAR FILTERS** to reset.

**Filter By** options (dropdown):

| Filter Field       | Type                    |
| ------------------ | ----------------------- |
| Issued Date        | Date range / comparison |
| Due Date           | Date range / comparison |
| Status             | Value match             |
| Total Amount       | Numeric comparison      |
| Paid Amount        | Numeric comparison      |
| Outstanding Amount | Numeric comparison      |
| Customer           | Text search             |

**Filter Type** options adjust the comparison operator (equals, greater than, contains, etc.) based on the chosen field.

After setting Field + Type + Value, click **+ ADD FILTER** to stack multiple conditions, then **APPLY FILTERS** to execute.

***

## Viewing an Invoice (Invoice Information Panel)

Clicking any row opens the **Invoice Information** side panel (the list dims in the background).

### Panel Header

| Element              | Description                                                                                |
| -------------------- | ------------------------------------------------------------------------------------------ |
| **Status badge**     | Color-coded pill: PAID (green), PAST DUE (amber), CANCELED (red), etc.                     |
| **Timestamp**        | Date and time the invoice was created                                                      |
| **Merchant**         | The merchant account the invoice belongs to                                                |
| **Initiated By**     | The user who created the invoice                                                           |
| **Invoice title**    | "Ecrypt Invoice #\[ID]"                                                                    |
| **Due date badge**   | Blue chip showing "DUE ON \[DATE]"                                                         |
| **Transaction link** | If paid, a clickable "Transaction #XXXXXXXXX" link to the transaction record               |
| **Invoice Link**     | Hosted payment page URL (clickable + copy icon) — this is what you share with the customer |

### Invoice Body

| Field                       | Description                                       |
| --------------------------- | ------------------------------------------------- |
| **Payment Amount**          | Total amount due                                  |
| **Customer Name**           | Full name from the vault                          |
| **Customer Email**          | Email on file                                     |
| **Customer Invoice Number** | Your custom invoice number (e.g., INV-2026052004) |

### Left Panel — MENU & ACTIONS

The left sidebar of the Invoice Information panel changes based on invoice status:

**MENU**

* **Invoice Information** — the current view (always present)

**ACTIONS (vary by status)**

| Action             | Available When                      | Description                                |
| ------------------ | ----------------------------------- | ------------------------------------------ |
| **Copy Invoice**   | Always                              | Duplicates this invoice as a new draft     |
| **Cancel Invoice** | Unpaid invoices (Pending, Past Due) | Voids the invoice; sets status to Canceled |
| **Send Again**     | Unpaid invoices (Pending, Past Due) | Re-sends the invoice email to the customer |

> **Note:** Paid and Canceled invoices only show **Copy Invoice**. Unpaid invoices show all three actions.

***

## Create Invoice

Navigate to **Invoices → Create Invoice** (or click the **CREATE INVOICE** button on the Dashboard).

### Step 1 — Add Customer

Type in the **Search for existing customer** field to find a Customer Vault record by name. The autocomplete dropdown shows:

* **+ Add a New Customer** — creates a new vault record inline
* Matching existing customers (shown as "FIRST LAST")

Select a customer to populate the invoice. The selected customer appears below the field with a red **Delete** (trash) icon to remove them.

### Step 2 — Add Line Items

After selecting a customer, type in the **Find or Add Line Item** field to search your saved product catalog or create a one-time item.

**Dropdown options:**

* **+ Add a New Item** — opens the inline line item form
* Matching saved products (if any exist)

#### Add New Line Item Form

Clicking **+ Add a New Item** expands a mini-form:

| Field                     | Required | Notes                                   |
| ------------------------- | -------- | --------------------------------------- |
| **Line Item Name**        | Yes      | Name shown on the invoice               |
| **Line Item Description** | No       | Optional detail text                    |
| **Price**                 | Yes      | Unit price in dollars (default: \$0.00) |
| **Quantity**              | Yes      | Number of units (default: 1)            |

Buttons: **CANCEL** (discards the item) · **ADD NEW LINE ITEM** (adds it to the invoice and updates the preview)

You can add multiple line items. Each appears in the live **Invoice Preview** on the right as you build.

### Step 3 — Payment Collection Info

| Field / Option                 | Description                                                                                              |
| ------------------------------ | -------------------------------------------------------------------------------------------------------- |
| **Add Invoice Number**         | Optional custom invoice reference number. If left blank, Ecrypt auto-generates one.                      |
| **Request payment**\*(radio)\* | Sends the invoice as a payment request with an optional due date. The customer pays via the hosted link. |
| **Charge Customer**\*(radio)\* | Generates an invoice receipt that charges the customer's saved card now or later.                        |

### Step 4 — Additional Payment Info

| Field               | Required | Notes                                                                              |
| ------------------- | -------- | ---------------------------------------------------------------------------------- |
| **Tax (Exclusive)** | No       | Percentage entered as a number (e.g., `8` for 8%). Applied on top of the subtotal. |

### Step 5 — Invoice Details

| Field           | Required | Notes                                                                                                    |
| --------------- | -------- | -------------------------------------------------------------------------------------------------------- |
| **Footer Text** | No       | Custom text that appears at the bottom of the invoice PDF/page (e.g., payment terms, thank-you message). |

### Invoice Preview

The right-hand panel shows a live preview of the invoice as you fill in the form. It displays:

* Ecrypt logo (or your custom logo if configured in Branding)
* Invoice Date (today's date)
* Bill To (customer name + email)
* Line items with price and quantity
* **Pricing Summary:** Subtotal · Estimated tax · Surcharge · **Amount Due**

### Form Actions

| Button             | Action                                                         |
| ------------------ | -------------------------------------------------------------- |
| **CREATE INVOICE** | Saves and sends the invoice; generates the hosted payment link |
| **CANCEL INVOICE** | Discards the form and returns to the Dashboard                 |

***

## Invoice Branding

Navigate to **Invoices → Branding**.

The page title is **"Appearance"** and contains three content tabs and a preview panel.

### Content Tabs

| Tab         | Controls                                              |
| ----------- | ----------------------------------------------------- |
| **Invoice** | Colors for the PDF/invoice portion of the hosted page |
| **Form**    | Colors for the payment collection form                |
| **Mobile**  | Colors for the mobile-optimized layout                |

### Preview Panel (Top Right)

Three device tabs let you preview how the invoice looks on different screens:

| Preview Tab | Shows                                      |
| ----------- | ------------------------------------------ |
| **Desktop** | Side-by-side invoice + payment form layout |
| **Tablet**  | Tablet-sized responsive view               |
| **Mobile**  | Single-column mobile card view             |

### Invoice Tab — Color Settings

| Setting                         | Default   | Description                             |
| ------------------------------- | --------- | --------------------------------------- |
| Invoice Background Color        | `#F0F1F2` | Background of the invoice document      |
| Invoice Text Color              | `#333333` | Body text color                         |
| Invoice Accent Color            | `#4a9fd7` | Hyperlinks and highlight elements       |
| Invoice Border Color            | `#c4c4c4` | Divider/border lines                    |
| Invoice Button Background Color | `#0f2859` | Pay button background                   |
| Invoice Button Text Color       | `#ffffff` | Pay button text                         |
| Invoice Icon Theme              | Dark      | Icon set style (dropdown: Dark / Light) |

### Form Tab — Color Settings

| Setting                      | Default   | Description                             |
| ---------------------------- | --------- | --------------------------------------- |
| Form Background Color        | `#ffffff` | Payment form background                 |
| Form Text Color              | `#333333` | Form body text                          |
| Form Title Color             | `#A4A9AF` | Section heading color                   |
| Form Accent Color            | `#4a9fd7` | Checked states, active elements         |
| Form Border Color            | `#333333` | Input field borders                     |
| Form Button Background Color | `#0f2859` | Submit button background                |
| Form Button Text Color       | `#ffffff` | Submit button text                      |
| Form Input Text Color        | `#333333` | Text inside input fields                |
| Form Label Color             | `#A4A9AF` | Field label text                        |
| Form Input Background Color  | `#ffffff` | Input field background                  |
| Alert Color                  | `#d32f2f` | Error/alert messages                    |
| Success Color                | `#333333` | Success state indicators                |
| Active Tab Color             | `#0f2859` | Currently selected tab                  |
| Inactive Tab Color           | `#6b6b6b` | Unselected tabs                         |
| Form Icon Theme              | Dark      | Icon set style (dropdown: Dark / Light) |

### Mobile Tab — Color Settings

| Setting                         | Default   | Description                             |
| ------------------------------- | --------- | --------------------------------------- |
| Mobile Background Color         | `#ffffff` | Mobile page background                  |
| Invoice Mobile Background Color | `#F0F1F2` | Invoice card background on mobile       |
| Invoice Mobile Text Color       | `#333333` | Invoice text on mobile                  |
| Mobile Text Color               | `#333333` | General mobile text                     |
| Mobile Button Background Color  | `#0f2859` | PAY NOW button background               |
| Mobile Button Text Color        | `#ffffff` | PAY NOW button text                     |
| Mobile Input Text Color         | `#333333` | Input text on mobile                    |
| Mobile Input Background Color   | `#ffffff` | Input field background on mobile        |
| Mobile Input Border Color       | `#333333` | Input field borders on mobile           |
| Mobile Label Color              | `#A4A9AF` | Field labels on mobile                  |
| Mobile Title Color              | `#A4A9AF` | Section titles on mobile                |
| Mobile Icon Theme               | Dark      | Icon set style (dropdown: Dark / Light) |

### Saving Branding Changes

Click the **Save** button (bottom-right of the preview panel) to apply all three tabs at once. Each color field also has a circular **reset** icon (↺) that reverts that individual field to its default value.

***

## Invoice URL Details

Navigate to **Invoices → URL Details** (opens as a modal overlay on the Dashboard).

This section lets you configure two post-payment URLs that apply to all invoices globally.

| Field                        | Required | Notes                                                                                                   |
| ---------------------------- | -------- | ------------------------------------------------------------------------------------------------------- |
| **Finish URL**               | No       | The URL customers are redirected to after successfully completing payment (e.g., your "Thank You" page) |
| **Terms And Conditions URL** | No       | A link to your T\&C or refund policy page; displayed on the invoice payment form                        |

Click **SAVE** to apply the changes.

***

## Tips & Best Practices

**Invoice Number Preference.** Leave the invoice number blank to use Ecrypt's auto-generated sequential IDs, or enter your own format (e.g., `INV-2026-001`) for consistency with your accounting system.

**Request Payment vs. Charge Customer.** Use *Request payment* when you want to send a link the customer clicks themselves. Use *Charge Customer* when you've already have the customer's payment method on file and want to charge it directly without requiring customer action.

**Line Item Descriptions.** Adding descriptions to line items improves transparency for the customer and reduces disputes. Descriptions appear on both the invoice PDF and the hosted payment page.

**Tax Field.** The Tax (Exclusive) field adds tax on top of the subtotal. "Exclusive" means the tax is not included in the item prices — it's calculated separately. For example, a $100 item at 8% tax results in a $108 total.

**Footer Text.** Use the footer to add payment terms (e.g., "Net 30"), a thank-you note, or return policy information. This text appears at the bottom of every invoice.

**Resending Invoices.** If a customer hasn't paid and the due date is approaching, use **Send Again** from the Invoice Information panel to re-send the email without creating a duplicate invoice.

**Copying Invoices.** Use **Copy Invoice** to quickly generate a new invoice pre-filled with the same line items and customer — ideal for recurring billing that doesn't need a subscription.

**Branding Consistency.** Match the Invoice Accent Color and Button Background Color to your brand's primary color. The preview panel updates in real time so you can see the result before saving.

**Finish URL.** Always set a Finish URL so customers have a clear next step after paying. A simple "Thank you, your payment was received" page reduces customer support inquiries.

**Overdue vs. Past Due.** Both statuses indicate an unpaid invoice whose due date has passed. Use the status filter tabs to quickly isolate and follow up on all outstanding balances.