Billie Rechnungskauf

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

Der Käufer wählt Billie auf der Zahlungs- und Versandartenseite.
Auf der Bestellübersicht klickt er auf „Zahlungspflichtig bestellen”.
Der Shop prüft im Hintergrund, ob die Bestellung überhaupt ausführbar ist, und meldet Fehler an Ort und Stelle zurück.
Erst wenn diese Prüfung durch ist, öffnet sich das Billie-Widget als Fenster über der Seite.
Billie prüft die Bestelldaten und autorisiert den Rechnungskauf.
Der Käufer bestätigt. Zusätzliche Zahlungsdaten gibt er nicht ein.
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

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

<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`

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 · Abschnitt PaymentXXX-Txt

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.

<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.

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 · Konfiguration salutation.dat · Abschnitt AddressFields-Txt

Schritt 4: Hinweismeldungen hinterlegen

<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

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.

<form action="~FORM-PayDeliv~" method="post">
   ~WS-PaymentFields~
</form>

Wegweiser: Zahlungsarten anlegen, für die Ausgabe im Template 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.

{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() · FORM-BillieResponse · BILLIE-SessionID · BILLIE-MerchantName · 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.

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

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 · 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.

<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 · MSG-PlaceOrder_Notify · MSG-PlaceOrder_InputError

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.

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.

https://www.ihre-shop-url.de/?test=on&payment-test=on&billie-test=off

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

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

Wegweiser

Wie der Bezahlvorgang abläuft

Zwei Wege zu Billie

Voraussetzungen

Schritt 1: Freischaltung durch WEBSALE

Schritt 2: Zahlungsart anlegen

Schritt 3: Nur Firmenkunden anbieten

Schritt 4: Hinweismeldungen hinterlegen

Schritt 5: Auswahl im Bestellablauf

Schritt 6: Checkout-Widget einbauen

Schritt 7: Bestellung vorprüfen

Schritt 8: Fehlermeldungen nachladbar machen

Schritt 9: Testen

Verwandte Themen

​Wie der Bezahlvorgang abläuft

​Zwei Wege zu Billie

​Voraussetzungen

​Schritt 1: Freischaltung durch WEBSALE

​Schritt 2: Zahlungsart anlegen

​Schritt 3: Nur Firmenkunden anbieten

​Schritt 4: Hinweismeldungen hinterlegen

​Schritt 5: Auswahl im Bestellablauf

​Schritt 6: Checkout-Widget einbauen

​Schritt 7: Bestellung vorprüfen

​Schritt 8: Fehlermeldungen nachladbar machen

​Schritt 9: Testen

​Verwandte Themen

Wie der Bezahlvorgang abläuft

Zwei Wege zu Billie

Voraussetzungen

Schritt 1: Freischaltung durch WEBSALE

Schritt 2: Zahlungsart anlegen

Schritt 3: Nur Firmenkunden anbieten

Schritt 4: Hinweismeldungen hinterlegen

Schritt 5: Auswahl im Bestellablauf

Schritt 6: Checkout-Widget einbauen

Schritt 7: Bestellung vorprüfen

Schritt 8: Fehlermeldungen nachladbar machen

Schritt 9: Testen

Verwandte Themen