01Платежи

Billing-страница

Что показывать: план, история, способ оплаты, инвойсы, отмена.

Спроектируй billing-страницу.

Структура

┌─ Current plan ──────────────────┐
│  Pro · $49/month                 │
│  Next charge: Apr 15, $49        │
│  [Change plan]  [Cancel]         │
└──────────────────────────────────┘

┌─ Usage this period ──────────────┐
│  Active projects: 23 of 100      │
│  API calls: 18,432 of 50,000     │
└──────────────────────────────────┘

┌─ Payment method ─────────────────┐
│  •••• 4242  ·  exp 12/26         │
│  [Update card]                   │
└──────────────────────────────────┘

┌─ Invoices ───────────────────────┐
│  Apr 1   $49   Paid    [PDF]     │
│  Mar 1   $49   Paid    [PDF]     │
└──────────────────────────────────┘

┌─ Billing details ────────────────┐
│  Email: billing@company.com      │
│  Address: ...                    │
│  Tax ID: ...                     │
│  [Edit]                          │
└──────────────────────────────────┘