# Kite payments dashboard: a first-time user guide

Kite is where you follow the money coming into your business: what was charged, what failed, who paid, and what will be paid out. This guide walks through the three things you will do most often. The dashboard opens at `http://127.0.0.1:4173/demo/dashboard.html`; no login is needed for the demo.

## 1. Reading the Payments overview

The **Payments** screen is the home of the dashboard. It is made of three blocks, numbered below.

![The Payments overview: KPI cards, gross volume chart and the All payments table](01-overview.png)

1. **The three KPI cards** summarise the period shown next to the title (the *Last 30 days* chip).
   - **Gross volume** is the total amount charged over the period, before fees.
   - **Net volume** is what actually reaches you: the gross volume with fees deducted.
   - **Failed payments** counts the charges that did not go through.

   The small percentage beside each figure is the change compared with the previous period. It is green when the change is good news and red when it is not, which is why a rise in failed payments shows in red.
2. **The Gross volume chart** draws the same total day by day, so you can see whether the period grew steadily or in bursts. The figure at the top right is the total for the period.
3. **The All payments table** lists each payment, most recent first, with its **amount** and currency, its **status**, the payment **method** (card brand or SEPA and the last four digits), the **customer** (name and email) and the **date**. Status is colour-coded: green for *Succeeded*, amber for *Pending*, red for *Failed*.

### Filtering the table by status

The four tabs at the top right of the table narrow the list down to one status.

![The All payments table with the status filters highlighted](02-status-filters.png)

- **All** shows every payment, including the ones still pending.
- **Succeeded** keeps only the payments that went through.
- **Refunded** keeps the payments you have returned to the customer.
- **Failed** keeps the charges that were declined or errored, which is the tab to open when the *Failed payments* card goes up.

## 2. Creating a payment

Charges usually come from your website or your integration, but you can also create one by hand, for instance to charge an invoice agreed over the phone.

Click **New payment** at the top right of the header. It is available from every screen.

![The New payment button in the header](03-new-payment-button.png)

Tip: the address `http://127.0.0.1:4173/demo/dashboard.html?panel=new` opens the dashboard with the panel already open, which is handy for a bookmark.

The **New payment** panel opens over the dashboard. Fill it in from top to bottom.

![The New payment panel with the three steps numbered](04-new-payment-panel.png)

1. **Amount** — type the amount to charge, for example `1240.00`. Amounts are charged in EUR, and the fees on this payment will be deducted from your net volume.
2. **Customer** — start typing the customer's name or email address and pick them from the list. The payment is attached to that customer and shows up in their history.
3. **Create payment** — confirms the charge. Once created, the payment is listed in the *All payments* table like any other.

The **Description** field is optional; whatever you type there appears on the customer's card statement. **Cancel** closes the panel without charging anything.

## 3. Finding the other screens

The sidebar on the left switches between screens. Two of them complete the picture given by Payments.

### Customers

Click **Customers** in the sidebar, or open `http://127.0.0.1:4173/demo/dashboard.html?page=Customers`.

![The Customers screen, reached from the sidebar](05-customers.png)

The **All customers** table lists everyone who has paid you at least once, with their name, email address, country and **lifetime** value (everything they have ever paid you). The *All / Subscribed / Churned* tabs work like the status filters on Payments. The header button becomes **New customer** on this screen, so you can add a customer before their first payment.

### Balances

Click **Balances** in the sidebar, or open `http://127.0.0.1:4173/demo/dashboard.html?page=Balances`.

![The Balances screen, reached from the sidebar](06-balances.png)

Balances shows what Kite is holding for you, one card per currency (EUR, GBP and USD in the demo), and the **Payout schedule**: how often the money is sent to you (*Automatic, daily*, with the date of the next payout) and the bank account it goes to, identified by its last four digits and its verification status. The header button becomes **Export** here.

---

*Screenshots were taken on the demo account. Customer email addresses are personal data and have been masked in every image.*

Made with [Gotcha](https://saastisfaction.com) · [npm](https://www.npmjs.com/package/@saastisfaction/gotcha)