PunchOut für Vendure einrichten – der komplette Guide | OCI und cXML PunchOut-Kataloge erstellen | PunchCommerce ![](//analytics.punchcommerce.de/matomo.php?idsite=1&rec=1) Good to know PunchOut für Vendure einrichten – der komplette Guide ==================================================================== Sie haben einen Vendure-Shop und möchten ihn per PunchOut an die Beschaffungssysteme Ihrer Großkunden anbinden? Dieser Guide führt Sie durch die komplette Einrichtung – von der Plugin-Installation in Vendure bis zur fertigen Konfiguration im PunchCommerce-Dashboard. Am Ende können Sie die Anbindung mit dem integrierten PunchOut-Simulator testen, ohne auf die IT Ihres Kunden warten zu müssen. 30.04.2026 · Lesezeit 5 Minuten ![PunchOut für Vendure einrichten – der komplette Guide](/storage/media/Vendure Guide.png) Wenn Sie noch nicht wissen, was PunchOut ist oder wie der Gateway Mode funktioniert: Lesen Sie zuerst unsere [Ankündigung der Vendure-Integration](https://www.punchcommerce.de/de/journal/2026/neue-technologie-partnerschaft-punchout-anbindung-fur-vendure-shops) – dort erklären wir den Ablauf auf einen Blick. Voraussetzungen --------------- Bevor Sie starten, brauchen Sie drei Dinge: - Einen laufenden **Vendure-Shop** (v3.x oder neuer) mit einem Storefront, das Sie anpassen können. - Einen **PunchCommerce-Account**. Noch keinen? [30 Tage kostenlos testen](https://www.punchcommerce.de/register). - Die Information, welches **Protokoll** Ihr Kunde erwartet – in der Regel cXML (SAP Ariba, Coupa, Jaggaer), OCI (SAP-Umgebungen im DACH-Raum) oder IDS Connect (deutscher Großhandel, z. B. SHK und Elektro). Teil 1: Vendure-Plugin installieren und konfigurieren ----------------------------------------------------- ### Schritt 1 – Plugin installieren Installieren Sie das offizielle Community-Plugin über den Paketmanager Ihrer Wahl: ```bash npm install @vendure-community/punchout-gateway-plugin ``` ### Schritt 2 – Plugin in die Vendure-Konfiguration aufnehmen Fügen Sie das Plugin in Ihre `vendure-config.ts` ein: ```typescript import { PunchOutGatewayPlugin } from '@vendure-community/punchout-gateway-plugin'; export const config: VendureConfig = { plugins: [ PunchOutGatewayPlugin.init({ // Standardwerte funktionieren sofort – // optionale Anpassungen siehe unten }), ], }; ``` Das Plugin bringt alles mit, was die Integration braucht: eine eigene Authentifizierungsstrategie für PunchOut-Sessions, eine aktive Warenkorb-Zuordnung pro Session und eine GraphQL-Mutation für den Warenkorb-Transfer. ### Schritt 3 – Optionale Konfiguration In den meisten Fällen reichen die Standardwerte. Drei Optionen können Sie bei Bedarf anpassen: OptionStandardWann anpassen?`apiUrl``https://www.punchcommerce.de`Nur bei Self-Hosted- oder Staging-Instanzen`shippingCostMode``'nonZero'`Wenn Versandkosten immer (`'all'`) oder nie (`'none'`) übertragen werden sollen`productFieldMapping`Alle Produkte als Stück (`PCE`)Wenn Ihr Katalog Produkte mit unterschiedlichen Einheiten enthält (kg, Liter etc.)Ein Beispiel für das Product-Field-Mapping: Angenommen, Sie verkaufen sowohl Einzelteile als auch Schüttgut. Dann können Sie die Mengeneinheit pro Produkt aus einem Vendure-Custom-Field lesen: ```typescript PunchOutGatewayPlugin.init({ productFieldMapping: { unit: { customField: 'punchOutUnit', default: 'PCE' }, unit_name: { customField: 'punchOutUnitName', default: 'Piece' }, weight: { customField: 'productWeight', default: 0 }, }, }) ``` Wenn das Custom-Field bei einem Produkt leer ist, greift der konfigurierte Fallback-Wert – ein Prinzip, das Sie auch aus dem Field-Mapping in PunchCommerce kennen. ### Schritt 4 – Kunden in Vendure zuordnen Das Plugin fügt dem Vendure-Kundenobjekt ein neues Feld hinzu: **„PunchOut Customer ID (uID)"**. Öffnen Sie den Kunden im Vendure-Admin und tragen Sie dort die gleiche Kennung ein, die Sie später im PunchCommerce-Dashboard als „Customer Identification" vergeben. Über dieses Feld erkennt das System, welcher Vendure-Kunde zu welcher PunchOut-Session gehört. Teil 2: Storefront anpassen --------------------------- Da Vendure headless arbeitet, braucht Ihr Frontend drei Anpassungen. Wir beschreiben hier das Konzept – die vollständigen Code-Beispiele mit GraphQL-Mutations finden Sie in der [offiziellen Plugin-Dokumentation](https://docs.vendure.io/current/community-plugins/punch-out-gateway-plugin). Noch schneller geht es mit dem **fertigen Demo-Storefront** des Vendure-Teams: [vendurehq/punchcommerce-storefront-demo](https://github.com/vendurehq/punchcommerce-storefront-demo). Es enthält alle drei Anpassungen als funktionierende Referenz-Implementierung. ### Anpassung 1 – PunchOut-Landing-Page Erstellen Sie eine Route (z. B. `/punchout`), an die PunchCommerce den Einkäufer weiterleitet. Diese Seite muss drei Dinge tun: - Die Parameter `sID` (Session-ID) und `uID` (Kunden-Kennung) aus der URL lesen. - Die `sID` für die Dauer der Session speichern – am besten in `sessionStorage`, damit parallele Browser-Tabs eigene Sessions behalten. - Die `authenticate`-Mutation mit der PunchOut-Strategie aufrufen und bei Erfolg auf die Shop-Startseite weiterleiten. ### Anpassung 2 – Session-gebundener Warenkorb Alle Warenkorb-Operationen – Artikel hinzufügen, Menge ändern, entfernen, Warenkorb anzeigen – müssen den Parameter `activeOrderInput` mit der aktuellen `sID` mitgeben. Das stellt sicher, dass der Warenkorb der richtigen PunchOut-Session zugeordnet bleibt. Das betrifft die Mutations `addItemToOrder`, `adjustOrderLine`, `removeOrderLine` sowie die Query `activeOrder`. Ohne diesen Parameter landen Artikel im regulären Warenkorb statt in der PunchOut-Session. ### Anpassung 3 – Warenkorb-Transfer statt Checkout Ersetzen Sie den normalen Checkout-Flow durch einen „Warenkorb übertragen"-Button. Dieser ruft die Mutation `transferPunchOutCart` auf und übergibt die `sID`. Nach erfolgreichem Transfer wechselt die Bestellung in Vendure in den Status „Transferred" – der Warenkorb wird archiviert, eine neue Session startet mit einem leeren Warenkorb. ### Hinweis: iFrame-Modus Wenn das Beschaffungssystem Ihren Shop in einem iFrame einbettet (statt in einem neuen Fenster zu öffnen), müssen Sie zusätzlich die Session-Cookies auf `SameSite=None; Secure` setzen und den `X-Frame-Options`-Header während PunchOut-Sessions entfernen. Details dazu finden Sie in der [Plugin-Dokumentation](https://docs.vendure.io/current/community-plugins/punch-out-gateway-plugin#4-iframe-support-if-applicable). Teil 3: PunchCommerce-Dashboard konfigurieren --------------------------------------------- ### Schritt 1 – Kunden anlegen Erstellen Sie im PunchCommerce-Dashboard einen neuen Kunden. Vergeben Sie eine eindeutige **„Customer Identification"** – das ist die `uID`, die auch im Vendure-Admin beim Kundenobjekt hinterlegt sein muss. ### Schritt 2 – Entry Address eintragen Tragen Sie die URL Ihrer PunchOut-Landing-Page ein, z. B. `https://ihr-shop.de/punchout`. PunchCommerce leitet den Einkäufer an diese Adresse weiter und hängt die Parameter `sID` und `uID` automatisch an. ### Schritt 3 – Protokoll wählen und Field-Mapping konfigurieren Wählen Sie das Protokoll, das Ihr Kunde erwartet: - **cXML** für SAP Ariba, Coupa oder Jaggaer - **OCI** für SAP-Beschaffungssysteme im DACH-Raum - **IDS Connect** für den deutschen Großhandel (SHK, Elektro) und Handwerkersoftware Anschließend ordnen Sie im Field-Mapping die Shop-Attribute (EAN, SKU, Kurzbeschreibung, Preis) den PunchOut-Feldern zu. Das funktioniert per Drag & Drop. Wenn ein Pflichtfeld im Shop leer ist, greift ein konfigurierbarer Fallback-Wert – so bleibt die Datenqualität gewährleistet, ohne dass Sie Ihr Quellsystem anpassen müssen. ### Schritt 4 – Testen mit dem PunchOut-Simulator Bevor Sie auf Ihren Kunden zugehen: Nutzen Sie den integrierten PunchOut-Simulator in PunchCommerce. Er simuliert eine komplette Session – von der Weiterleitung über den Warenkorb bis zum Transfer zurück ins Beschaffungssystem. Sie sehen sofort, ob Mapping, Preise und Produktdaten korrekt ankommen. Das spart erfahrungsgemäß mindestens eine Abstimmungsrunde mit der IT-Abteilung Ihres Kunden. Zusammenfassung: Was wo passiert -------------------------------- AufgabeWoAufwandPlugin installieren und konfigurierenVendure~10 MinutenStorefront anpassen (3 Stellen)Ihr Frontend-CodeJe nach ProjektKunden-Zuordnung (uID)Vendure-Admin + PunchCommerce~5 MinutenProtokoll und Field-MappingPunchCommerce-Dashboard~15 MinutenTesten mit SimulatorPunchCommerce-Dashboard~5 MinutenDie Konfiguration auf der PunchCommerce-Seite dauert unter 30 Minuten. Der größte variable Faktor ist die Storefront-Anpassung – hier beschleunigt das [Demo-Storefront](https://github.com/vendurehq/punchcommerce-storefront-demo) den Start erheblich. Nächster Schritt ---------------- Sie möchten die Integration an Ihrem konkreten Setup durchsprechen – oder direkt loslegen? Wir zeigen Ihnen in einem kurzen Gespräch, wie die Einrichtung in der Praxis aussieht. **[Jetzt Termin buchen →](https://account.netzdirektion.de/appointments/punchcommerce)** Wenn Sie Fragen oder Anregungen haben, schreiben Sie uns einfach eine E-Mail an oder rufen Sie uns an unter [06142 / 953 80 - 60](tel:061429538060). Wir freuen uns über Ihr Feedback! [Zurück zum Journal](https://www.punchcommerce.de/de/journal) #### Diese Beiträge könnten Sie auch interessieren - [Unser JTL-Plugin ist jetzt im JTL Extension Store verfügbar](https://www.punchcommerce.de/de/journal/2026/unser-jtl-plugin-ist-jetzt-im-jtl-extension-store-verfugbar "Zum Beitrag Unser JTL-Plugin ist jetzt im JTL Extension Store verfügbar") - [Neue Shopware-Integration: Kunden direkt aus PunchCommerce verknüpfen](https://www.punchcommerce.de/de/journal/2026/neue-shopware-integration-kunden-direkt-aus-punchcommerce-verknupfen "Zum Beitrag Neue Shopware-Integration: Kunden direkt aus PunchCommerce verknüpfen") - [Neu in PunchCommerce: Volle IDS-Connect-Unterstützung für alle Shopsysteme](https://www.punchcommerce.de/de/journal/2026/neu-in-punchcommerce-volle-ids-connect-unterstutzung-fur-alle-shopsysteme "Zum Beitrag Neu in PunchCommerce: Volle IDS-Connect-Unterstützung für alle Shopsysteme") Lust auf einen Test? Starten Sie die unverbindliche 30 Tage-Testphase. ------------------------------------------------------------------------ [ Jetzt PunchOut-Katalog anlegen ](https://www.punchcommerce.de/register) [ PunchCommerce® ist ein Produkt der ![Netzdirektion GmbH](https://www.punchcommerce.de/static/netzdirektion-logo.png "PunchCommerce® ist ein Produkt der netzdirektion | Gesellschaft für digitale Wertarbeit mbH") ](https://netzdirektion.de) [Feedback erwünscht - Ihre Meinung hilft uns, noch besser zu werden!](https://easy-feedback.de/umfrage/1883200/5FuM95 "Ihre Meinung hilft uns, noch besser zu werden!")