zugferd-api-examples/javascript/create.html at main · InvoiceXML/zugferd-api-examples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<meta charset="utf-8">
<title>Create ZUGFeRD with InvoiceXML API</title>
<!--
  Get API key: https://www.invoicexml.com/account/authentication
  Docs:        https://www.invoicexml.com/docs/api/create/zugferd

  WARNING: do not ship API keys in production browser code. Anyone who
  views the page source can read and reuse your key. For production,
  proxy this request through your own backend so the key stays server-side.
-->

<h1>Create ZUGFeRD invoice</h1>
<button id="run">Generate invoice</button>
<p id="status"></p>

<script>
// Raw key only, without the "Bearer " prefix (it is added below).
const apiKey = 'YOUR_API_KEY';

const payload = {
    invoice: {
        invoiceNumber: 'MIN-001',
        issueDate:     '2026-05-18',
        currency:      'EUR',
        seller: {
            name:              'Acme',
            vatIdentifier:     'DE123456789',
            legalRegistration: { identifier: 'HRB 12345' },
            postalAddress: {
                line1:    'Hauptstraße 12',
                city:     'Berlin',
                postCode: '10115',
                country:  'DE',
            },
        },
        buyer: {
            name: 'Globex SAS',
            postalAddress: {
                line1:    '15 rue de Rivoli',
                city:     'Paris',
                postCode: '75001',
                country:  'FR',
            },
        },
        paymentDetails: { paymentAccountIdentifier: 'DE89370400440532013000' },
        lines: [
            {
                quantity:       10,
                priceDetails:   { netPrice: 150.00 },
                vatInformation: { rate: 19.00 },
                item:           { name: 'Senior consulting' },
            },
        ],
    },
};

document.getElementById('run').addEventListener('click', async () => {
    const status = document.getElementById('status');
    status.textContent = 'Generating...';

    const response = await fetch('https://api.invoicexml.com/v1/create/zugferd', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            Authorization: 'Bearer ' + apiKey,
        },
        body: JSON.stringify(payload),
    });

    if (!response.ok) {
        status.textContent = `InvoiceXML API error ${response.status}: ${await response.text()}`;
        return;
    }

    const blob = await response.blob();
    const a = document.createElement('a');
    a.href = URL.createObjectURL(blob);
    a.download = 'invoice-zugferd.pdf';
    a.click();
    status.textContent = `Downloaded invoice-zugferd.pdf (${blob.size} bytes)`;
});
</script>