> ## Documentation Index
> Fetch the complete documentation index at: https://dokumentation.websale.de/llms.txt
> Use this file to discover all available pages before exploring further.

# BILLIE- (Billie Direktanbindung)

> Die Tags für den Rechnungskauf über die Billie-Direktanbindung: Checkout-Session anlegen, Widget einbinden, Antwort zurückgeben und auswerten.

Beim Rechnungskauf über Billie läuft die Prüfung des Käufers nicht im Shop, sondern in einem Widget von Billie. Der Shop legt dafür eine Checkout-Session an, übergibt die Bestelldaten, und das Widget meldet sein Ergebnis zurück.

Die Tags mit dem Präfix `BILLIE-` liefern die Bausteine für diesen Ablauf. Sie gehören auf die Bestellübersichtsseite (`ws_place_order.htm`), denn dort entscheidet sich die Zahlungsart.

Wegweiser: [Billie Rechnungskauf](https://dokumentation.websale.de/v8s/zahlungsarten-anlegen/billie-rechnungskauf.md)

## Der Ablauf im Template

Vier Schritte gehören zusammen, und keiner davon funktioniert allein.

| Schritt | Tags |
| - | - |
| Session anlegen und das Widget vorbereiten | `BILLIE-SessionID`, `BILLIE-MerchantName` |
| Bestelldaten übergeben | `BILLIE-OrderData` |
| Antwort zurück an den Shop schicken | `BILLIE-ResponseDataName`, `BILLIE-ResponseErrorName`, `FORM-BillieResponse` |
| Antwort auswerten | `BILLIE-WidgetRawResponse`, `BILLIE-SessionConfirmRawResponse` |

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<script>
   const billie_config_data = {
      'session_id':    '~BILLIE-SessionID~',
      'merchant_name': '~BILLIE-MerchantName~'
   }

   function ws_payWithBillie() {
      BillieCheckoutWidget.mount({
         billie_config_data: billie_config_data,
         billie_order_data:  ~BILLIE-OrderData~
      })
   }
</script>

<form action="~FORM-BillieResponse~" method="post" id="form_billie_response">
   <input name="~BILLIE-ResponseDataName~"  id="billie_response_data"  type="hidden">
   <input name="~BILLIE-ResponseErrorName~" id="billie_response_error" type="hidden">
</form>
```

> [!WARNING]
>
> `~BILLIE-OrderData~` steht ohne Anführungszeichen im JavaScript, die beiden anderen Werte stehen in einfachen Anführungszeichen. Das ist kein Versehen: Die Bestelldaten sind bereits ein JSON-Objekt, die Session-ID und der Händlername sind Zeichenketten.

## Die Session

### BILLIE-SessionID

Gibt die Session-ID von Billie aus.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
const billie_config_data = {
   'session_id': '~BILLIE-SessionID~'
}
```

> [!WARNING]
>
> Dieses Tag legt die Checkout-Session bei Billie an, es liest sie nicht nur aus. Setzen Sie es deshalb nur dort ein, wo der Rechnungskauf tatsächlich angeboten wird, und nicht vorsorglich auf jeder Seite. Jeder Seitenaufbau mit diesem Tag spricht mit Billie.

Als Bereichs-Tag greift es, wenn die Session angelegt werden konnte. Das ist die richtige Klammerung um den gesamten Billie-Block:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{BILLIE-SessionID}
   <!-- Widget, Formular und Schaltfläche -->
{/BILLIE-SessionID}

{!BILLIE-SessionID}
   Der Rechnungskauf steht im Moment leider nicht zur Verfügung.
{/!BILLIE-SessionID}
```

Der negative Bereich gehört dazu. Ist Billie nicht erreichbar, steht sonst eine Zahlungsart zur Auswahl, deren Schaltfläche nichts tut.

### BILLIE-MerchantName

Gibt den konfigurierten Händlernamen aus, den das Widget anzeigt. Als Bereichs-Tag greift es, wenn ein Name konfiguriert ist.

### BILLIE-OrderData

Gibt die Bestelldaten als JSON-Objekt aus, so wie das Billie-Widget sie erwartet.

> [!WARNING]
>
> Geben Sie die Bestelldaten nicht selbst aus und verändern Sie sie nicht. Das Widget prüft sie gegen die Session, und abweichende Werte führen zur Ablehnung.

## Die Antwort zurückgeben

Das Widget läuft im Browser. Sein Ergebnis muss deshalb über ein Formular zurück an den Shop.

| Tag | Liefert |
| - | - |
| `BILLIE-ResponseDataName` | den Namen des versteckten Feldes für die Antwort |
| `BILLIE-ResponseErrorName` | den Namen des versteckten Feldes für den Fehlerfall |

Die Adresse des Formulars liefert `FORM-BillieResponse`.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<form action="~FORM-BillieResponse~" method="post" id="form_billie_response">
   <input name="~BILLIE-ResponseDataName~"  id="billie_response_data"  type="hidden">
   <input name="~BILLIE-ResponseErrorName~" id="billie_response_error" type="hidden">
</form>
```

Die beiden `id`-Attribute sind frei wählbar, das JavaScript greift darüber auf die Felder zu. Die `name`-Attribute sind es nicht: Sie müssen aus den Tags kommen, sonst erkennt der Shop die Antwort nicht.

Referenz: [FORM-BillieResponse](https://dokumentation.websale.de/v8s/referenz/tags/form-formulare.md#nicht-beschriebene-formulare)

## Die Antwort auswerten

| Tag | Einzel-Tag | Bereichs-Tag | negatives Bereichs-Tag | Liefert |
| - | - | - | - | - |
| `BILLIE-WidgetRawResponse` | ja | ja | ja | die Antwort des Widgets als JSON |
| `BILLIE-SessionConfirmRawResponse` | ja | ja | ja | die Antwort auf die Session-Bestätigung als JSON |

Beide geben den Inhalt unkodiert aus. Als Bereichs-Tag greifen sie, wenn überhaupt eine Antwort vorliegt.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{BILLIE-WidgetRawResponse}
   ~BILLIE-WidgetRawResponse~
{/BILLIE-WidgetRawResponse}
```

> [!WARNING]
>
> Diese beiden Tags sind für die Fehlersuche gedacht, nicht für die Anzeige. Die Antworten enthalten technische Angaben zum Vorgang und gehören nicht auf eine Seite, die der Käufer sieht. Klammern Sie sie im Testmodus ein oder nehmen Sie sie nach der Einrichtung wieder heraus.

## Die Zahlungsbedingung

### BILLIE-Duration

Gibt die konfigurierte Zahlungsfrist in Tagen aus.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
Bitte begleichen Sie Ihre Rechnung innerhalb von ~BILLIE-Duration~ Tagen.
```

| Tag | Einzel-Tag | Bereichs-Tag | negatives Bereichs-Tag | Schleifen-Tag |
| - | - | - | - | - |
| `BILLIE-Duration` | ja | – | – | – |
| `BILLIE-SessionID` | ja | ja | ja | – |
| `BILLIE-MerchantName` | ja | ja | ja | – |
| `BILLIE-OrderData` | ja | ja | ja | – |
| `BILLIE-ResponseDataName` | ja | – | – | – |
| `BILLIE-ResponseErrorName` | ja | – | – | – |
| `BILLIE-WidgetRawResponse` | ja | ja | ja | – |
| `BILLIE-SessionConfirmRawResponse` | ja | ja | ja | – |

`BILLIE-Duration` ist das einzige Tag dieser Gruppe, das Sie auch außerhalb des Bestellprozesses brauchen, beispielsweise auf einer Informationsseite zu den Zahlungsarten. Die übrigen gehören auf die Bestellübersichtsseite.

## Verwandte Themen

* Wegweiser: [Billie Rechnungskauf](https://dokumentation.websale.de/v8s/zahlungsarten-anlegen/billie-rechnungskauf.md)
* Wegweiser: [Übersicht Zahlungs- und Versandarten](https://dokumentation.websale.de/v8s/informationsseiten/uebersicht-von-zahlungs-und-versandarten.md)
* Referenz: [FORM-BillieResponse](https://dokumentation.websale.de/v8s/referenz/tags/form-formulare.md#nicht-beschriebene-formulare)


## Related topics

- [Billie Rechnungskauf](https://dokumentation.websale.de/v8s/zahlungsarten-anlegen/billie-rechnungskauf.md)
- [Sektionen: Positionen und Zahlung](https://dokumentation.websale.de/v8s/schnittstellen/bestellungen/ws-bestelldaten/sektionen-positionen-und-zahlung.md)
- [Zahlungsarten](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/zahlungsarten.md)
- [Rechnungskauf](https://dokumentation.websale.de/v8s/zahlungsarten-anlegen/rechnungskauf.md)
- [Testmodi des Shops ein- und ausschalten](https://dokumentation.websale.de/v8s/domains/testmodi-des-shops-ein-ausschalten.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.