<Card title="Invoice #INV-2024-087" subtitle="Creative Design Studio · Issued Jan 12, 2025">
<Columns>
<div>

### Amount due

# $4,250.00

USD · **Due Feb 10, 2025**

<Badge tone="warning">Payment pending</Badge>

</div>
<div>

### Pay now

<Button size="large" icon="credit-card">Pay $4,250.00</Button>

<Button variant="secondary" icon="bank">Bank transfer</Button>

</div>
</Columns>
</Card>

<Card title="Invoice summary">
| Item | Quantity | Rate | Amount |
|---|---|---|---|
| Website design (12 pages) | 1 | $3,500.00 | $3,500.00 |
| Logo concepts (3 options) | 1 | $500.00 | $500.00 |
| Revisions (2 rounds) | 1 | $250.00 | $250.00 |
| **Subtotal** | | | **$4,250.00** |
| **Total due** | | | **$4,250.00** |

<Callout tone="info" title="Payment terms">Net 30 · Late fee of 1.5% per month applies after due date.</Callout>
</Card>

<Card title="Payment details">
<Columns>
<div>

<Stat label="Due date" value="Feb 10, 2025" icon="calendar" />

<Stat label="Days left" value="10 days" icon="hourglass" />

</div>
<div>

<Stat label="Invoice number" value="#INV-2024-087" icon="file-text" />

<Stat label="Client ID" value="ACME-7741" icon="user" />

</div>
</Columns>
</Card>

<Card title="Payment options">
<Tabs>
<Tab title="Credit card">

<Form name="card-payment">
<Input label="Card number" placeholder="1234 5678 9012 3456" type="tel" required />
<Columns>
<Input label="Expiry" placeholder="MM/YY" type="text" required />
<Input label="CVC" placeholder="123" type="tel" required />
</Columns>
<Input label="Name on card" placeholder="Jane Cooper" required />
<Button>Pay $4,250.00</Button>
</Form>

</Tab>
<Tab title="Bank transfer">

<Callout tone="neutral" title="Wire instructions">
<Columns>
<div>
<strong>Bank</strong><br/>Chase · New York, NY
</div>
<div>
<strong>Account</strong><br/>•••• 4521
</div>
<div>
<strong>Routing</strong><br/>021000021
</div>
</Columns>
</Callout>

<Button variant="secondary" icon="copy">Copy wire details</Button>

</Tab>
<Tab title="PayPal">

Pay to <strong>payments@creativestudio.co</strong> using your PayPal account.

<Button variant="secondary" icon="arrow-right">Continue with PayPal</Button>

</Tab>
</Tabs>
</Card>

<Card title="Need help?">
<Columns>
<div>

<details>
<summary>What happens after I pay?</summary>
You'll receive a payment confirmation email immediately, and a receipt will be available in your client portal within 24 hours.

</details>

<details>
<summary>Can I pay in installments?</summary>
Contact us at billing@creativestudio.co to arrange a custom payment plan before the due date.

</details>

</div>
<div>

<details>
<summary>Is my payment secure?</summary>
Yes — all payments are processed through Stripe with 256-bit SSL encryption and PCI-DSS compliance.

</details>

</div>
</Columns>
</Card>

<FollowUps>
- Show me a receipt for a past payment
- What happens if I miss the due date?
- Can I download this invoice as a PDF?
- Change the due date to a later time
</FollowUps>