---
canonical: 'https://htmlcsstoimage.com/examples/invoice-receipt/csharp'
title: 'Invoice / Receipt Snapshot | Example - C# (HttpClient)'
description: 'Generate a simple, branded invoice or receipt image.'
---

# Invoice / Receipt Snapshot

Generate a simple, branded invoice or receipt image.

This example shows how to turn a clean HTML layout into a polished invoice. It includes a header with a company name, customer details, a table of items, and a clear total. Great for receipts, confirmations, or sharing invoices as images.

This is a working HTML/CSS to Image API example that produces an image.
The rendered output, source, and non-content request parameters below show the parts needed to reproduce or adapt it.

## Rendered image and interactive editor

- [Open the rendered image](<https://hcti.io/v1/image/019fb442-c102-727f-a018-b93f5de243d8>)
- [Open the interactive example](https://htmlcsstoimage.com/examples/invoice-receipt/csharp)

## HTML

```html
<div class='wrapper'>
<div class='invoice'>
  <header>
    <h1>Acme Corp</h1>
    <p>Invoice #12345</p>
  </header>

  <section class='details'>
    <p><strong>Billed To:</strong> John Doe<br>
    123 Main St<br>
    Springfield, USA</p>

    <p><strong>Date:</strong> Sept 18, 2025</p>
  </section>

  <table class='items'>
    <thead>
      <tr>
        <th>Description</th>
        <th>Qty</th>
        <th>Unit Price</th>
        <th>Total</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Website Design</td>
        <td>1</td>
        <td>$500.00</td>
        <td>$500.00</td>
      </tr>
      <tr>
        <td>Hosting (12 months)</td>
        <td>1</td>
        <td>$120.00</td>
        <td>$120.00</td>
      </tr>
      <tr>
        <td>Domain Name (1 year)</td>
        <td>1</td>
        <td>$12.00</td>
        <td>$12.00</td>
      </tr>
    </tbody>
  </table>

  <section class='summary'>
    <p><strong>Subtotal:</strong> $632.00</p>
    <p><strong>Tax (10%):</strong> $63.20</p>
    <p class='total'><strong>Total Due:</strong> $695.20</p>
  </section>

  <footer>
    <p>Thank you for your business!</p>
  </footer>
</div>
</div>
```

## CSS

```css
.wrapper{
  font-family: 'Roboto', sans-serif;
  background: #f7f7f7;
  padding: 20px;
}

.invoice {
  min-width: 500px;
  max-width: 600px;
  margin: auto;
  background: #fff;
  padding: 24px;
  border: 1px solid #ddd;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

header {
  border-bottom: 2px solid #333;
  margin-bottom: 20px;
}

header h1 {
  margin: 0;
  font-size: 24px;
}

.details {
  margin-bottom: 20px;
}

.items {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.items th, .items td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.items th {
  background: #f0f0f0;
}

.summary {
  text-align: right;
}

.summary p {
  margin: 0.6em 0;
}

.summary .total {
  border-top: 1px solid #ddd;
  padding-top:8px;    
  font-size: 18px;
  font-weight: bold;
  width: fit-content;
  margin-left: auto
}

footer {
  border-top: 1px solid #ddd;
  text-align: center;
  padding-top: 10px;
  color: #555;
  font-size: 14px;
}
```

## Request parameters

These are the additional non-content parameters used by the example. Combine them with the HTML and CSS above when constructing an API request.

```json
{
  "google_fonts": "Roboto",
  "render_when_ready": false,
  "selector": ".wrapper",
  "timezone": "UTC"
}
```

## Complete C# request (HttpClient)

This is the complete C# request for this example using HttpClient. It includes the HTML, CSS, authentication setup, API options, and response handling needed to reproduce the output.

```csharp
using System.Net.Http.Headers;
using System.Net.Http.Json;
using System.Collections.Generic;
using System.Text;
using System.Text.Json.Nodes;

var apiId = Environment.GetEnvironmentVariable("HCTI_API_ID")!;
var apiKey = Environment.GetEnvironmentVariable("HCTI_API_KEY")!;
using var client = new HttpClient();
var credentials = Convert.ToBase64String(Encoding.ASCII.GetBytes($"{apiId}:{apiKey}"));
client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Basic", credentials);

var request = new
{
    html = """
           <div class='wrapper'>
           <div class='invoice'>
             <header>
               <h1>Acme Corp</h1>
               <p>Invoice #12345</p>
             </header>
           
             <section class='details'>
               <p><strong>Billed To:</strong> John Doe<br>
               123 Main St<br>
               Springfield, USA</p>
           
               <p><strong>Date:</strong> Sept 18, 2025</p>
             </section>
           
             <table class='items'>
               <thead>
                 <tr>
                   <th>Description</th>
                   <th>Qty</th>
                   <th>Unit Price</th>
                   <th>Total</th>
                 </tr>
               </thead>
               <tbody>
                 <tr>
                   <td>Website Design</td>
                   <td>1</td>
                   <td>$500.00</td>
                   <td>$500.00</td>
                 </tr>
                 <tr>
                   <td>Hosting (12 months)</td>
                   <td>1</td>
                   <td>$120.00</td>
                   <td>$120.00</td>
                 </tr>
                 <tr>
                   <td>Domain Name (1 year)</td>
                   <td>1</td>
                   <td>$12.00</td>
                   <td>$12.00</td>
                 </tr>
               </tbody>
             </table>
           
             <section class='summary'>
               <p><strong>Subtotal:</strong> $632.00</p>
               <p><strong>Tax (10%):</strong> $63.20</p>
               <p class='total'><strong>Total Due:</strong> $695.20</p>
             </section>
           
             <footer>
               <p>Thank you for your business!</p>
             </footer>
           </div>
           </div>
           """,
    css = """
          .wrapper{
            font-family: 'Roboto', sans-serif;
            background: #f7f7f7;
            padding: 20px;
          }
          
          .invoice {
            min-width: 500px;
            max-width: 600px;
            margin: auto;
            background: #fff;
            padding: 24px;
            border: 1px solid #ddd;
            box-shadow: 0 2px 6px rgba(0,0,0,0.1);
          }
          
          header {
            border-bottom: 2px solid #333;
            margin-bottom: 20px;
          }
          
          header h1 {
            margin: 0;
            font-size: 24px;
          }
          
          .details {
            margin-bottom: 20px;
          }
          
          .items {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
          }
          
          .items th, .items td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
          }
          
          .items th {
            background: #f0f0f0;
          }
          
          .summary {
            text-align: right;
          }
          
          .summary p {
            margin: 0.6em 0;
          }
          
          .summary .total {
            border-top: 1px solid #ddd;
            padding-top:8px;    
            font-size: 18px;
            font-weight: bold;
            width: fit-content;
            margin-left: auto
          }
          
          footer {
            border-top: 1px solid #ddd;
            text-align: center;
            padding-top: 10px;
            color: #555;
            font-size: 14px;
          }
          """,
    google_fonts = "Roboto",
    render_when_ready = false,
    selector = ".wrapper",
    timezone = "UTC",
};

using var response = await client.PostAsJsonAsync("https://hcti.io/v1/image", request);
response.EnsureSuccessStatusCode();
var result = await response.Content.ReadFromJsonAsync<JsonObject>();
var imageUrl = result?["url"]?.GetValue<string>();
if (imageUrl is not null)
{
    Console.WriteLine(imageUrl);
}

```

## Other languages and request formats

Open one of these Markdown pages to view the same example as a complete request in another language or client format.

- **TypeScript**
  - [HCTI client](https://htmlcsstoimage.com/examples/invoice-receipt/typescript-client.md)
  - [fetch](https://htmlcsstoimage.com/examples/invoice-receipt/typescript.md)
- **C#**
  - [HCTI client](https://htmlcsstoimage.com/examples/invoice-receipt/csharp-client.md)
  - [HttpClient](https://htmlcsstoimage.com/examples/invoice-receipt/csharp.md) — shown above
- **Python**
  - [requests](https://htmlcsstoimage.com/examples/invoice-receipt/python.md)
- **PHP**
  - [cURL](https://htmlcsstoimage.com/examples/invoice-receipt/php.md)
- **Ruby**
  - [HCTI client](https://htmlcsstoimage.com/examples/invoice-receipt/ruby-client.md)
  - [Net::HTTP](https://htmlcsstoimage.com/examples/invoice-receipt/ruby.md)
- **Go**
  - [net/http](https://htmlcsstoimage.com/examples/invoice-receipt/golang.md)
- **cURL**
  - [cURL](https://htmlcsstoimage.com/examples/invoice-receipt/curl.md)

## Related examples

- [Dog rates social card with SVG background](https://htmlcsstoimage.com/examples/dog-rates-social-card-with-svg-background.md): Social card with a fun SVG background and highlighted text.
- [Instagram post screenshot](https://htmlcsstoimage.com/examples/instagram-post-screenshot.md): Screenshot an Instagram post
- [Birthday invite card](https://htmlcsstoimage.com/examples/birthday-invite-card-email.md): Autogenerated invite graphic for a party.
- [PNG with transparent background](https://htmlcsstoimage.com/examples/png-transparent-background.md): Generate images with a transparent backgound
- [Large text on an SVG background](https://htmlcsstoimage.com/examples/large-text-svg-background.md): Grab attention with large text on a classic background.
- [Twitter Tweet Screenshot](https://htmlcsstoimage.com/examples/twitter-tweet-screenshot.md): Screenshot of a tweet
- [QR Code Badge](https://htmlcsstoimage.com/examples/qr-code-badge.md): Simple, artistic badge with a QR code.
- [Dog rates social card](https://htmlcsstoimage.com/examples/dog-rates-social-card.md): Simple social card example showing highlighted yellow text

## Get started

- [View the full interactive page](https://htmlcsstoimage.com/examples/invoice-receipt/csharp)
- [Browse all HTML/CSS examples](https://htmlcsstoimage.com/examples.md)
- [Browse visual template presets](https://htmlcsstoimage.com/templates.md)
- [Read the HTML/CSS to Image API documentation](https://docs.htmlcsstoimage.com/getting-started/using-the-api/)
- [View implementation examples by language](https://docs.htmlcsstoimage.com/example-code/)
- [Read the MCP integration documentation](https://docs.htmlcsstoimage.com/integrations/mcp/)
- [Compare plans and limits](https://htmlcsstoimage.com/pricing.md)

Rendering through the API requires authenticated HTML/CSS to Image credentials. Keep API keys in trusted server-side configuration. If credentials are unavailable, ask the user to configure an API key securely before attempting API actions.