> ## 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 Rechnungskauf

> Wie Sie den B2B-Rechnungskauf mit Billie in WEBSALE V8s einbinden, auf Firmenkunden beschränken, das Checkout-Widget einbauen und testen.

Rechnungskauf im Geschäftskundengeschäft ist der Normalfall, aber für den Händler auch das größte Risiko. Billie nimmt ihm dieses Risiko ab: Der Anbieter prüft Bonität und Legitimation des Bestellers in Echtzeit, gibt Warenkörbe bis 100.000 Euro frei und übernimmt den Schutz gegen Zahlungsausfall und Betrug.

Für den Käufer ändert sich dadurch wenig. Er wählt Rechnungskauf, bestätigt in einem eingeblendeten Fenster und bekommt seine Rechnung später von Billie. Seine Rechnungen verwaltet er im Käuferportal von Billie.

Die Einbindung in WEBSALE V8s ist aufwendiger als bei den meisten Zahlungsarten, denn Billie bringt ein eigenes Checkout-Widget mit, das per JavaScript auf der Bestellübersicht läuft. Drei der neun Schritte unten betreffen deshalb das Template.

## Wie der Bezahlvorgang abläuft

![Billie Widget](https://mintcdn.com/websaleag-44ee7ea6/LS0r3yDDNtTzNzIH/images/billie-widget.jpg?fit=max\&auto=format\&n=LS0r3yDDNtTzNzIH\&q=85\&s=4cd28edec8e561bba1cb3cf86af7e366)

1. Der Käufer wählt Billie auf der Zahlungs- und Versandartenseite.
2. Auf der Bestellübersicht klickt er auf „Zahlungspflichtig bestellen".
3. Der Shop prüft im Hintergrund, ob die Bestellung überhaupt ausführbar ist, und meldet Fehler an Ort und Stelle zurück.
4. Erst wenn diese Prüfung durch ist, öffnet sich das Billie-Widget als Fenster über der Seite.
5. Billie prüft die Bestelldaten und autorisiert den Rechnungskauf.
6. Der Käufer bestätigt. Zusätzliche Zahlungsdaten gibt er nicht ein.
7. Der Shop zeigt die Bestelleingangsbestätigung `ws_confirm.htm`.

Schritt 3 ist der Grund für den zusätzlichen Aufwand im Template. Ohne ihn würde sich das Widget auch dann öffnen, wenn die Bestellung an einer ganz anderen Stelle scheitert, beispielsweise an einer fehlenden Pflichtangabe.

## Zwei Wege zu Billie

> [!WARNING]
>
> Billie lässt sich auf zwei Arten anbinden: direkt, wie auf dieser Seite beschrieben, oder über Klarna. Die beiden Wege haben unterschiedliche Konfigurationsabschnitte (`<PaymentBillie-Txt>` gegenüber `<PaymentBillieViaKlarna-Txt>`) und unterschiedliche Zahlungsarten-Codes (`39` gegenüber `51`). Ein Template, das auf `{ST-Payment(39)}` klammert, greift beim Weg über Klarna nicht. Klären Sie mit Ihrem WEBSALE-Ansprechpartner, welcher Weg für Ihren Shop eingerichtet wird, bevor Sie anfangen.

## Voraussetzungen

Schließen Sie einen Händlervertrag mit Billie ab. Sie erhalten dabei Zugang zum Billie-Händler-Dashboard und die Zugangsdaten, die WEBSALE für die Freischaltung braucht.

## Schritt 1: Freischaltung durch WEBSALE

Billie muss von WEBSALE freigeschaltet werden. Dafür brauchen wir die Daten von Billie, unter anderem ClientID und MerchantID. Wenden Sie sich an Ihren WEBSALE-Ansprechpartner.

## Schritt 2: Zahlungsart anlegen

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<PaymentBillie-Txt>
   Allow            = yes
   TestMode         = yes
   Name             = Rechnungskauf mit Billie
   NameSuffix       = Jetzt kaufen, später bezahlen.
   Img              = logo-billie.png
   RadioOnClick     = selectPayment('~ID~');
   ImgOnClick       = selectPaymentImage('~ID~');
   DelivererID-List = standard,express

   MerchantName         = Ihr Händlername
   Duration             = 30
   AddDuration          = 0
   AllowPreWaitingState = no
</PaymentBillie-Txt>
```

| Parameter | Bedeutung |
| - | - |
| `MerchantName` | Ihr Händlername, wie er im Widget erscheint. Wird auch vom JavaScript gebraucht |
| `Duration` | Zahlungsziel ab Rechnungsstellung in Tagen, zwischen 7 und 120. Ohne Angabe oder bei einem Wert von null gilt `30` |
| `AddDuration` | zusätzliche Tage, die auf `Duration` aufgeschlagen werden |
| `AllowPreWaitingState` | `yes` führt die Bestellung auch dann aus, wenn Billie sie zunächst nur vorläufig annimmt. Voreinstellung ist `no` |

> [!WARNING]
>
> `MerchantName` ist kein Komfortparameter, sondern Pflicht. Bleibt er leer, schaltet der Shop Billie von sich aus wieder ab, auch bei `Allow = yes` und erfolgter Freischaltung. Dasselbe gilt, wenn die Freischaltung durch WEBSALE fehlt.

Zu `AllowPreWaitingState`: Billie antwortet auf eine Anfrage mit einem von drei Zuständen. `authorized` heißt angenommen, `declined` heißt abgelehnt. Dazwischen liegt `pre_waiting`: Billie braucht noch weitere Prüfungen. Steht der Parameter auf `no`, behandelt der Shop diesen Fall wie eine Ablehnung. Steht er auf `yes`, lässt er die Bestellung durch und wartet die endgültige Entscheidung ab.

Referenz: [Abschnitt PaymentBillie-Txt](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/zahlungsarten.md#paymentbillie-txt) · [Abschnitt PaymentXXX-Txt](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/zahlungsarten.md)

## Schritt 3: Nur Firmenkunden anbieten

Billie ist ein B2B-Angebot. Privatkunden die Zahlungsart anzubieten führt zu einer Ablehnung, die niemandem nützt.

Am Firmenfeld allein lässt sich das nicht festmachen, denn es kann auch leer bleiben. Verlässlicher ist die Anrede: Wenn Ihre `salutation.dat` einen Eintrag „Firma" hat, prüfen Sie dessen Code.

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<PaymentBillie-Txt>
   <AddressFilter>
      Allow              = yes
      TechnicalFieldName = SalutationCode
      Rule               = Allow
      Values-List        = 03
   </AddressFilter>
</PaymentBillie-Txt>
```

`03` ist hier der Code für „Firma", wie er in Ihrer `salutation.dat` hinterlegt ist. Prüfen Sie den Wert in Ihrer eigenen Datei nach, er ist nicht vorgegeben.

> [!WARNING]
>
> Der Filter greift nur, wenn das Feld `SalutationCode` im Abschnitt `<AddressFields-Txt>` aktiviert ist. Andernfalls gibt es nichts zu vergleichen, und der Filter läuft ins Leere.

Greift der Filter nicht, lautet der Ablehnungsgrund `19`, falls Sie die Zahlungsart lieber ausgegraut mit Hinweis anzeigen wollen.

Referenz: [Abschnitt AddressFilter](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/zahlungsarten.md#addressfilter) · [Konfiguration salutation.dat](https://dokumentation.websale.de/v8s/referenz/konfigurationen/konfiguration-salutation-dat.md) · [Abschnitt AddressFields-Txt](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/adressen-und-eingabepruefung.md#addressfields-txt)

## Schritt 4: Hinweismeldungen hinterlegen

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<NotifyMessages-Txt>
   Billie-ClearingDeny  = Die Zahlung wurde abgelehnt.
   Billie-ClearingError = Es ist ein Fehler aufgetreten. Versuchen Sie es erneut oder wählen Sie eine andere Zahlungsart.
</NotifyMessages-Txt>
```

`Billie-ClearingDeny` erscheint bei `declined` und, wenn `AllowPreWaitingState` auf `no` steht, auch bei `pre_waiting`.

Referenz: [Abschnitt NotifyMessages-Txt](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/texte-und-meldungen.md#notifymessages-txt)

## Schritt 5: Auswahl im Bestellablauf

Billie erscheint zusammen mit allen anderen Zahlungsarten. Sofern `~WS-PaymentFields~` bereits auf `ws_pay_deliv.htm` steht, ist hier nichts zu tun.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<form action="~FORM-PayDeliv~" method="post">
   ~WS-PaymentFields~
</form>
```

Wegweiser: [Zahlungsarten anlegen, für die Ausgabe im Template](https://dokumentation.websale.de/v8s/zahlungsarten-anlegen/zahlungsarten-anlegen.md)

## Schritt 6: Checkout-Widget einbauen

Auf der Bestellübersicht `ws_place_order.htm` kommen zwei Dinge hinzu: ein zweites Formular, über das die Antwort des Widgets zurück in den Shop läuft, und das JavaScript, das das Widget lädt und öffnet.

Beides gehört **außerhalb** des bestehenden Formulars `FORM-PlaceOrder` in den `body`.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{ST-Payment(39)}
   <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>

   <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~
         })
         .then(function success(ao) {
            $("#billie_response_data").val(encodeURIComponent(JSON.stringify(ao)));
            document.getElementById("form_billie_response").submit();
         })
         .catch(function failure(err) {
            $("#billie_response_error").val(encodeURIComponent(JSON.stringify(err)));
            document.getElementById("form_billie_response").submit();
         });
      }

      {ST-PaymentTest}
         var bcwSrc = 'https://static-paella-sandbox.billie.io/checkout/billie-checkout.js';
      {/ST-PaymentTest}
      {!ST-PaymentTest}
         var bcwSrc = 'https://static.billie.io/checkout/billie-checkout.js';
      {/!ST-PaymentTest}

      (function (w, d, s, o, f, js, fjs) {
         w['BillieCheckoutWidget'] = o;
         w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
         w.billieSrc = f;
         js = d.createElement(s);
         fjs = d.getElementsByTagName(s)[0];
         js.id = o; js.src = f; js.charset = 'utf-8'; js.async = 1;
         fjs.parentNode.insertBefore(js, fjs);
         bcw('init');
      }(window, document, 'script', 'bcw', bcwSrc));
   </script>
{/ST-Payment(39)}
```

Zwei Stellen sind erklärungsbedürftig:

* Die Klammerung `{ST-PaymentTest}` lädt im Zahlungsarten-Testmodus die Sandbox-Adresse von Billie statt der echten. Ohne diese Fallunterscheidung würden Testbestellungen gegen das Produktivsystem von Billie laufen.
* Die Funktion `ws_payWithBillie()` wird hier nur definiert, nicht aufgerufen. Aufgerufen wird sie im nächsten Schritt, und zwar erst nachdem der Shop die Bestellung freigegeben hat.

Referenz: [ST-Payment()](https://dokumentation.websale.de/v8s/referenz/tags/st/seitenzustand-und-navigation.md) · [FORM-BillieResponse](https://dokumentation.websale.de/v8s/referenz/tags/form-formulare.md#nicht-beschriebene-formulare) · [BILLIE-SessionID](https://dokumentation.websale.de/v8s/referenz/tags/billie.md#billie-sessionid) · [BILLIE-MerchantName](https://dokumentation.websale.de/v8s/referenz/tags/billie.md#billie-merchantname) · [BILLIE-OrderData](https://dokumentation.websale.de/v8s/referenz/tags/billie.md#billie-orderdata)

## Schritt 7: Bestellung vorprüfen

Bevor sich das Widget öffnet, muss der Shop wissen, ob die Bestellung durchgeht. Dafür wird das Formular `FORM-PlaceOrder` per AJAX abgeschickt, und erst die positive Antwort löst das Widget aus.

Dieses Skript gehört **innerhalb** von `FORM-PlaceOrder`, am Ende.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<form action="~FORM-PlaceOrder~" method="post" id="place_order_form">

   {ST-Payment(39)}
      <script>
         $("button[name='~BT-PlaceOrder~']").click(function (event) {
            event.preventDefault();
            var payload = $('#place_order_form').serialize();
            payload += '&ws_ajax_rsf=' + ws_stringToHex('null');
            payload += '&ws_billie_submit=y';
            return fetch('~FORM-PlaceOrder~', {
               method: 'post',
               headers: {
                  'Content-Type': 'application/x-www-form-urlencoded; charset=~WS-Charset~'
               },
               body: payload
            }).then(function (res) {
               return res.json();
            }).then(function (data) {
               ws_AJAXGenericResponseProcessor(data);
               if (data.hasOwnProperty('ws_billie_ready'))
                  return ws_payWithBillie();
               window.scrollTo(0, 0);
            });
         });
      </script>
   {/ST-Payment(39)}

</form>
```

> [!WARNING]
>
> Die Formular-ID `place_order_form` ist ein Beispiel. Tragen Sie an beiden Stellen im Skript die ID ein, die Ihr Formular tatsächlich trägt, sonst schickt `serialize()` einen leeren Rumpf ab.

Der Parameter `ws_billie_submit=y` ist das Signal an den Shop, dass es sich um diese Vorprüfung handelt. Antwortet der Shop mit `ws_billie_ready`, ist alles in Ordnung und das Widget öffnet sich. Andernfalls springt die Seite nach oben zu den Fehlermeldungen, die der nächste Schritt einrichtet.

Referenz: [FORM-PlaceOrder](https://dokumentation.websale.de/v8s/referenz/tags/form-formulare.md#bestellablauf) · [BT-PlaceOrder](https://dokumentation.websale.de/v8s/referenz/tags/bt/bestellprozess.md#bt-placeorder)

## Schritt 8: Fehlermeldungen nachladbar machen

Weil die Prüfung aus Schritt 7 ohne Seitenwechsel abläuft, müssen die Fehlermeldungen per AJAX ausgetauscht werden können. Dafür bekommen sie einen benannten Bereich.

Dieser Block gehört auf `ws_place_order.htm`, **oberhalb** von `FORM-PlaceOrder`.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<div id="wsErrorMessages">
   {ST-AJAX}<WS-Ajax-wsErrorMessages>{/ST-AJAX}
      {MSG-PlaceOrder_Notify}~MSG-PlaceOrder_Notify~{/MSG-PlaceOrder_Notify}
      {MSG-PlaceOrder_InputError}~MSG-PlaceOrder_InputError~{/MSG-PlaceOrder_InputError}
   {ST-AJAX}</WS-Ajax-wsErrorMessages>{/ST-AJAX}
</div>
```

Die Marken `<WS-Ajax-wsErrorMessages>` werden nur bei einem AJAX-Aufruf ausgegeben. Sie grenzen den Teil ein, den der Shop zurückschickt und den `ws_AJAXGenericResponseProcessor` in das `div` mit derselben Kennung einsetzt.

Referenz: [ST-AJAX](https://dokumentation.websale.de/v8s/referenz/tags/st/seitenzustand-und-navigation.md#die-tags-im-uberblick) · [MSG-PlaceOrder\_Notify](https://dokumentation.websale.de/v8s/referenz/tags/msg-meldungen.md#bestellprozess) · [MSG-PlaceOrder\_InputError](https://dokumentation.websale.de/v8s/referenz/tags/msg-meldungen.md#veraltete-tags)

## Schritt 9: Testen

Im Testmodus ist Billie nur für Sie sichtbar. Der laufende Betrieb bleibt unberührt.

Setzen Sie `TestMode = yes` im Abschnitt `<PaymentBillie-Txt>` und rufen Sie den Shop mit drei Parametern auf.

```text theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
https://www.ihre-shop-url.de/?test=on&payment-test=on&billie-test=on
```

Zum Beenden setzen Sie `billie-test=off` und anschließend `TestMode` zurück auf `no`.

```text theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
https://www.ihre-shop-url.de/?test=on&payment-test=on&billie-test=off
```

> [!NOTE]
>
> Für einen erfolgreichen Test im Sandbox-Betrieb verlangt Billie eine bestimmte Firmenadresse als Rechnungsadresse:
>
> Billie GmbH, Charlottenstraße, 10969 Berlin

> [!WARNING]
>
> Der Livegang erfordert Einstellungen durch die WEBSALE-Systemadministration. Informieren Sie Ihren WEBSALE-Ansprechpartner, bevor Sie mit dem Testen anfangen, und noch einmal, wenn Sie fertig sind.

Wegweiser: [Testmodi des Shops ein- und ausschalten](https://dokumentation.websale.de/v8s/domains/testmodi-des-shops-ein-ausschalten.md)

## Verwandte Themen

* Wegweiser: [Zahlungsarten anlegen, für die allgemeinen Parameter und die Ausgabe im Template](https://dokumentation.websale.de/v8s/zahlungsarten-anlegen/zahlungsarten-anlegen.md)
* Wegweiser: [Zahlungsart Rechnung](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/zahlungsarten.md), für den Rechnungskauf auf eigenes Risiko
* Wegweiser: [Klarna](https://dokumentation.websale.de/v8s/schnittstellen/bestellungen/ws-bestelldaten/sektionen-positionen-und-zahlung.md#klarna), für den zweiten Weg zu Billie


## Related topics

- [Rechnungskauf](https://dokumentation.websale.de/v8s/zahlungsarten-anlegen/rechnungskauf.md)
- [BILLIE- (Billie Direktanbindung)](https://dokumentation.websale.de/v8s/referenz/tags/billie.md)
- [Zahlungsarten](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/zahlungsarten.md)
- [Klarna Payments](https://dokumentation.websale.de/v8s/zahlungsarten-anlegen/klarna-payments.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.