Integrations-Checkliste
Befolgen Sie diese umfassende Checkliste, um Ihr Zonos-Dashboard-Konto einzurichten und Zonos Checkout in Ihre individuelle Website oder Plattform zu integrieren.
Zonos-Konto erstellen
Um zu beginnen, kontaktieren Sie bitte unser Vertriebsteam, um ein Konto zu erstellen und eine Vereinbarung zu unterzeichnen. Nach Unterzeichnung einer Vereinbarung erhalten Sie zwei Mikroeinzahlungen auf Ihr Konto, die verifiziert werden müssen.
Bitte senden Sie diese Mikroeinzahlungsbeträge per E-Mail an accounting@zonos.com mit Ihrer Dashboard-Store-ID (Ihren Vertriebsmitarbeiter in CC setzen).
Nach der Verifizierung werden Ihre Bankdaten unter Dashboard -> Einstellungen -> Abrechnung angezeigt.
Dashboard- und Checkout-Einstellungen konfigurieren
Nach Erstellung Ihres Zonos-Kontos müssen Sie Einstellungen im Dashboard konfigurieren, damit Checkout ordnungsgemäß mit Ihrem Shop funktioniert. Dieser Abschnitt behandelt alle wesentlichen Dashboard-Konfigurationen.
Auszahlungen einrichten
Verbinden Sie ein Bankkonto, um rechtzeitige Auszahlungen von Checkout zu erhalten. Auszahlungen werden täglich mit einer Verzögerung von 2 Tagen ab dem erfassten Zahlungseingang verarbeitet. Befolgen Sie dazu diese Schritte:
- Navigieren Sie zu Dashboard -> Einstellungen -> Checkout-Einstellungen .
- Klicken Sie auf Bankkonto hinzufügen
- Sie werden zu einem Stripe-Portal weitergeleitet, um die Einrichtung abzuschließen und folgende Informationen anzugeben:
- Bankkontoinformationen.
- Unternehmens-EIN.
- Social Security Number eines Unternehmensinhabers mit 25 %. Weitere Details, warum dies erforderlich ist, finden Sie in Stripes Dokumentation.
Hinweis: Wenn Sie Ihren Auszahlungsplan aktualisieren müssen, kontaktieren Sie bitte support@zonos.com
Zugelassene Domains einrichten
Das Zonos-JS-Skript benötigt aus Sicherheitsgründen eine Liste zugelassener Domains. Dies verhindert, dass nicht autorisierte Websites das Skript laden, und stellt sicher, dass es nur auf Ihren genehmigten Domains ausgeführt wird. Ohne diese Konfiguration gibt das Skript Berechtigungsfehler zurück.
So richten Sie dies ein:
- Navigieren Sie zu Dashboard -> Einstellungen -> Checkout-Einstellungen
- Fügen Sie unter URLs Ihre vollständige Domain und alle Subdomains hinzu, auf denen Checkout verwendet wird. Wenn Ihre Domain beispielsweise
example.comist, sollten Sieexample.comundtest.example.comhinzufügen.
Branding-Einstellungen anpassen
Konfigurieren Sie Ihre Branding-Einstellungen im Dashboard passend zum Erscheinungsbild Ihres Shops.
Befolgen Sie dazu diese Schritte:
- Navigieren Sie zu Dashboard -> Einstellungen -> Checkout-Einstellungen -> Branding
- Konfigurieren Sie folgende Einstellungen:
- Logo.
- Marken- und Akzentfarbe.
- Theme, Stil und Schriftart.
Weitere Informationen zu Branding-Einstellungen finden Sie in unserer Dokumentation.
Versandcarrier verbinden
Um Versand beim Checkout anzubieten, müssen Sie einen Versandcarrier mit Ihrem Zonos-Konto verbinden. So können Sie bestimmte Versandservice-Level beim Checkout aktivieren.
So verbinden Sie einen Versandcarrier:
- Navigieren Sie zu Dashboard -> Einstellungen -> Versand -> Tarife
- Klicken Sie auf Carrier hinzufügen
- Befolgen Sie die Carrier-Einrichtungsanweisungen.
Weitere Details zum Verbinden von Carrier-Konten finden Sie in unserer Dokumentation.
Versandzonen einrichten
Versandzonen ermöglichen es Ihnen zu konfigurieren, welche Versandcarrier und Service-Level für verschiedene Regionen der Welt verfügbar sind.
So richten Sie Versandzonen ein:
- Navigieren Sie zu Dashboard -> Einstellungen -> Versand -> Standorte
- Klicken Sie auf Neue Zone
- Geben Sie einen Zonennamen ein und wählen Sie die Länder aus, in die Sie versenden möchten.
- Wählen Sie den Carrier und das Service-Level, das Sie anbieten möchten.
Weitere Details zu Versandzonen finden Sie in unserer Dokumentation.
Fallback-Ursprungsland und HS-Code einrichten
Ursprungsland und HS-Code werden zur Berechnung genauer Zölle und Steuern verwendet.
Wenn Sie kein spezifisches Ursprungsland oder keinen HS-Code angeben, verwenden wir die im Dashboard eingerichteten Fallbacks.
So legen Sie Ihr Fallback-Ursprungsland und den HS-Code fest:
- Navigieren Sie zu Dashboard -> Einstellungen -> Versand -> Catalog.
- Wählen Sie für das Ursprungsland das Land, in dem die Mehrheit Ihrer Produkte hergestellt wird.
- Geben Sie für den HS-Code den HS-Code Ihres häufigsten Produkts ein. Wenn Sie keinen HS-Code haben, navigieren Sie zu Classify im Dashboard und geben Sie Name und Beschreibung Ihres Produkts ein, um einen genauen HS-Code zu generieren.
Zonos-JS-Snippet installieren
Das Zonos-JS-Snippet ist eine clientseitige JavaScript-Integration, die globale Checkout-Funktionalität auf Ihrer Website ermöglicht. Es dient als Brücke zwischen Ihrer E-Commerce-Plattform und Zonos-Diensten und übernimmt:
- Checkout-Erlebnis: Rendert die Checkout-Oberfläche und verarbeitet Zahlungen.
- Standortdienste: Erkennt den Standort des Besuchers und verwaltet die Währungsumrechnung.
- Warenkorb-Integration: Verbindet sich mit Ihrem bestehenden Warenkorb- und Bestellsystem.
- Sicherheit: Validiert Domains und authentifiziert API-Anfragen.
Das Snippet wird asynchron geladen, um die Leistung Ihrer Website nicht zu beeinträchtigen. Es initialisiert mit den API-Anmeldedaten Ihres Shops und verarbeitet alle clientseitigen Interaktionen sicher. Die Implementierung ist unaufdringlich gestaltet und erfordert minimale Änderungen an Ihrem bestehenden Checkout-Ablauf.
Unten finden Sie ein vollständiges Beispiel mit Skript-Laden, Initialisierung und Event-Handling als Referenz für die Checkout-Integration.
(async function () { const timestamp = new Date().getTime(); const zonosScript = document.querySelector( `script[src*="https://cdn.jsdelivr.net/npm/@zonos/elements/dist/scripts/loadZonos.js"]`, ); if (!zonosScript) { const script = document.createElement('script'); script.src = `https://cdn.jsdelivr.net/npm/@zonos/elements/dist/scripts/loadZonos.js?timestamp=${timestamp}`; script.addEventListener('load', () => { window..({ : { : () => { { : , }; }, : , }, : { : , : { .(); }, }, : , : , }); }); ..(script); } })();Hinweis: Ersetzen Sie die Platzhalterwerte (storeId, zonosApiKey, Selektoren usw.) durch Ihre tatsächlichen Werte aus Ihrem Zonos Dashboard.
Browser-Caching behandeln
Wir empfehlen, einen Zeitstempel oder eine andere eindeutige Kennung an die URL anzuhängen, damit das Skript nicht vom Browser zwischengespeichert wird. So wird sichergestellt, dass immer die neueste Version des Skripts geladen wird. Dies ist in Zeile 10 des vollständigen Beispiels gezeigt.
script.src = `https://cdn.jsdelivr.net/npm/@zonos/elements/dist/scripts/loadZonos.js?timestamp=${timestamp}`;Zonos-JS-Snippet authentifizieren
Nachdem Sie das Zonos-JS-Skript geladen haben, müssen Sie es authentifizieren, indem Sie einen öffentlichen Zonos-API-Schlüssel und eine Store-ID an die Zonos.init-Funktion übergeben. Der öffentliche API-Schlüssel zur Authentifizierung von Checkout ist als veröffentlichbar konzipiert und kann sicher im Frontend-Code verwendet werden, ohne sensible Informationen preiszugeben.
Um Ihre Store-ID und Ihren API-Schlüssel zu finden, navigieren Sie zu Dashboard -> Einstellungen -> Integrationen. Verwenden Sie keinen Secret API key, da dieser nicht für Frontend-Code vorgesehen ist. Dies ist in den Zeilen 29 und 30 des vollständigen Beispiels gezeigt.
Zonos.init({ // ... other fields zonosApiKey: 'Your API KEY', // Replace with your actual API key (found in Dashboard) storeId: 'Your STORE ID', // Replace with your actual store ID (found in Dashboard) // ... other fields});Content Security Policy (CSP) aktualisieren
Wenn Ihre Website eine Content Security Policy setzt, fügen Sie die unten stehenden Domains zu den entsprechenden CSP-Direktiven hinzu. Diese Richtlinie gilt sowohl für Checkout als auch für Hello – das Zonos-Snippet lädt Skripte, Stylesheets, Schriftarten, Bilder und stellt Netzwerkanfragen. Wenn eine dieser Ressourcen blockiert wird, funktioniert der Checkout-Ablauf oder die Hello-Anzeige nicht. Die style-src-Liste gilt auch für style-src-elem.
Hinweis: Überspringen Sie diesen Schritt, wenn Ihre Website keinen CSP-Header sendet. Nur Händler, die eine benutzerdefinierte CSP auf ihren Seiten erzwingen, müssen sie aktualisieren.
cdn.jsdelivr.net/npm/@zonoscdnjs.cloudflare.com/ajax/libs/zonos-elementsunpkg.com/@zonos/elementsjs.zonos.com*.js.zonos.comzonos-store-assets.s3.amazonaws.comjs.stripe.coma.stripecdn.comb.stripecdn.comc.stripecdn.comcheckout.stripe.comf.stripecdn.comhcaptcha.comhooks.stripe.comm.stripe.comm.stripe.networkpay.stripe.compayments.stripe.comq.stripe.comr.stripe.comHello einrichten
Hello ist bei Verwendung von Checkout erforderlich.
Hello ist dafür verantwortlich, den Standort, die Sprache und die Währung des Besuchers zu erkennen und die entsprechenden Informationen anzuzeigen. Sie können alle Hello-Einstellungen im Dashboard oder im Zonos-JS-Skript konfigurieren. Wenn Sie Hello bereits im Dashboard konfiguriert haben, lädt das Skript diese Einstellungen und verwendet sie. Wenn Sie Werte in der helloSettings-Eigenschaft der Zonos.init-Funktion angeben, verwendet das Skript stattdessen diese Werte, wie unten gezeigt.
Währungsumrechnung in Hello im JS-Skript konfigurieren
Hello verwendet CSS-Selektoren, um Elemente auf Ihrer Website zu identifizieren, die Währungsinformationen anzeigen. Übergeben Sie diese Selektoren an die helloSettings.currencyElementSelector-Eigenschaft der Zonos.init-Funktion, damit Hello die korrekte Währung des internationalen Käufers erkennen und anzeigen kann.
Sie können hier jeden gültigen CSS-Selektor verwenden, z. B. #price, .price, um mehrere verschiedene Elemente auszuwählen. Dies ist in den Zeilen 23 und 24 des vollständigen Beispiels gezeigt.
Zonos.init({ // ... other fields helloSettings: { currencyElementSelector: '.price', // Replace with your actual selector }, // ... other fields});Hello beim Seitenladen automatisch öffnen
Standardmäßig öffnet sich Hello nur, wenn der Besucher auf die Flaggen-Schaltfläche klickt. Wenn Sie Hello beim Laden der Seite automatisch öffnen möchten, können Sie die Zonos.openHelloDialog()-Funktion aufrufen, sobald das Zonos-Skript geladen wurde. Dies ist in den Zeilen 25 und 26 des vollständigen Beispiels gezeigt.
.({ : { : { .(); }, },});Länder-Anzeigeregeln im Dashboard konfigurieren
Steuern Sie im Dashboard, welche Käuferländer Hello sehen und welche Länder im Länderauswahl-Dropdown erscheinen. Navigieren Sie zu Dashboard -> Einstellungen -> Hello und suchen Sie den Abschnitt Country display rules.
Widget-Sichtbarkeit
Steuern Sie, welche Käuferländer das Hello-Widget sehen. Wählen Sie eine der Basisregeln und verwenden Sie dann die Listen Always show und Never show, um bestimmte Länder zu überschreiben.
- All countries – Jedes Land, das Hello unterstützt.
- Only shippable countries – Länder, in die Sie aus Ihren Versandeinstellungen versenden.
- Always show – Länder, die immer erscheinen, auch wenn die Basisregel sie ausschließt.
- Never show – Länder, die nie erscheinen, auch wenn die Basisregel sie einschließt.

Länderauswahl
Steuern Sie, welche Länder im Hello-Länderauswahl-Dropdown erscheinen, mit denselben Basisregeln plus Always show- und Never show-Überschreibungen.

Checkout einrichten
Checkout ermöglicht es dem Kunden, Versand- und Rechnungsinformationen einzugeben, Landed Cost zu berechnen, Zahlungen einzuziehen und die Bestellung abzuschließen.
Checkout teilt kontextuelle Daten mit Hello, wie Standort, Sprache und Währung des Besuchers. So bleibt das Kundenerlebnis über den gesamten Einkaufsprozess hinweg konsistent.
Sie können alle Checkout-Einstellungen sowohl im Dashboard als auch im Zonos-JS-Skript konfigurieren. Wenn Sie Checkout bereits im Dashboard konfiguriert haben, lädt das Skript diese Einstellungen und verwendet sie. Wenn Sie Werte in der checkoutSettings-Eigenschaft der Zonos.init-Funktion angeben, verwendet das Skript stattdessen diese Werte.
Schaltfläche „Bestellung aufgeben“ im JS-Skript konfigurieren
Das Zonos-JS-Skript erkennt internationale Käufer automatisch und leitet sie zum Checkout-Ablauf weiter. Sie müssen jedoch die Schaltfläche „Bestellung aufgeben“ auf Ihrer Plattform so konfigurieren, dass beim Klick Checkout geöffnet wird. Dies erfolgt durch Übergabe eines CSS-Selektors an die checkoutSettings.placeOrderButtonSelector-Eigenschaft der Zonos.init-Funktion.
Wenn Sie mehrere Schaltflächen zum Aufgeben einer Bestellung haben, übergeben Sie einen Selektor für jede Schaltfläche. Beispiel: #placeOrder, .place-order.
Dies ist in Zeile 21 des vollständigen Beispiels gezeigt.
Zonos.init({ // ... other fields checkoutSettings: { // ... other fields placeOrderButtonSelector: '#placeOrder', // Replace with your actual selector(s) },});Warenkorbdetails sicher serverseitig erstellen
Um die Warenkorbdetails dem Kunden anzuzeigen, müssen Sie eine serverseitige Funktion erstellen, die die Zonos-API aufruft, um einen Warenkorb zu erstellen, und dann die Warenkorb-ID an Ihr Frontend zurückgeben. So werden Warenkorbdetails nicht dem Kunden in manipulierbarer Form preisgegeben.
Ihr Backend-API-Aufruf verwendet ein geheimes GraphQL-Credential-Token, das sich vom öffentlichen Token unterscheidet, mit dem Sie das Zonos-JS-Skript authentifizieren. Dieses Token finden Sie unter Dashboard -> Einstellungen -> Integrationen. Das geheime Token muss als Header in Ihrem API-Aufruf übergeben werden.
Die cartCreate-Mutation akzeptiert eine Liste von Artikeln, die gemäß dem Warenkorb-Artikelschema formatiert sein sollten.
// Create new cart from serversideasync function createCart() { /** * Full cart mutation schema: https://zonos.com/developer/mutations/cartCreate * */ const graphql = JSON.stringify({ query: `mutation cartCreate($input: CartCreateInput!){ cartCreate(input: $input) { id adjustments { amount currencyCode description productId sku type } items { id name amount currencyCode quantity sku description metadata { key value } } metadata { key value } }}`, variables: { /** * input for the cartCreate is this schema https://zonos.com/developer/types/CartCreateInput */ input: { /** * Cart adjustment input: https://zonos.com/developer/types/CartAdjustmentInput */ adjustments: [ { amount: -10, currencyCode: 'USD', /** * Enum value: https://zonos.com/developer/types/CartAdjustmentType */ type: 'CART_TOTAL', }, ], /** * Cart item input: https://zonos.com/developer/types/ItemInput */ items: [ { name: 'Item 1', amount: 150.99, currencyCode: 'USD', description: 'Item 1 description', quantity: 2, }, ], /** * Cart metadata input: https://zonos.com/developer/types/CartMetadataInput */ metadata: [ { : , : , }, ], }, }, }); response = (, { : , : { : , : , }, : graphql, }); { data } = response.(); data..; }Wir empfehlen, einen API-Endpunkt auf Ihrer Serverseite zu erstellen und diesen Endpunkt dann aus Ihrer Frontend-JS-Integration aufzurufen, wie im nächsten Schritt beschrieben.
Warenkorb-ID über Frontend an Checkout übergeben
Sobald Sie serverseitig einen Warenkorb erstellt haben, müssen Sie die Warenkorb-ID an das Zonos-JS-Skript übergeben. Dies erfolgt über den createCartId-Callback, der Teil der Zonos.init-Funktion ist. Checkout ruft die Warenkorbdetails dann sicher von Zonos ab, wenn es geöffnet wird, und verhindert so Manipulationen am Warenkorb. Siehe das Codebeispiel unten.
Der Wert von createCartId darf kein statischer Wert sein, er muss eine Funktion sein.
Zonos.init({ // ... other fields checkoutSettings: { // Replace with your actual selector(s) createCartId: async () => { const response = await fetch('https://api.merchant.com/api/get-cart', { method: 'POST', headers: { 'Content-Type': 'application/json', }, }); const json = await response.json(); return json.id; // Only need to return the cart ID }, },});(Optional) Hinweis unter Bestellsumme anzeigen
Wenn Sie eine kurze, dynamische Nachricht in Checkout anzeigen müssen – beispielsweise eine regulatorische Offenlegung, wenn ein bestimmtes Produkt im Warenkorb ist – können Sie ein customMessage-Array aus dem createCartId-Callback zurückgeben. Jeder Eintrag im Array wird in einer eigenen Zeile eines einzelnen Info-Banners direkt unter Order total gerendert.
Markdown-Link-Syntax – [Link-Text] gefolgt von (https://example.com) – wird als Anker-Tag gerendert, sodass Käufer durchklicken können. Einfache https://-URLs im Text werden ebenfalls automatisch verlinkt. Alles andere wird als Klartext gerendert, sodass HTML in den Strings escaped statt ausgeführt wird.
Pro Checkout wird nur ein Banner angezeigt, unabhängig davon, wie viele Zeilen Sie übergeben.
Zonos.init({ // ... other fields checkoutSettings: { createCartId: async () => { const response = await fetch( 'https://api.merchant.com/api/get-zonos-cart', { method: 'POST', headers: { 'Content-Type': 'application/json', }, }, ); const json = await response.json(); return { cartId: json.id, // Each item is rendered on a new line of the same info banner. // Markdown links `[text](url)` become `<a>` tags. customMessage: [ 'Some items in your cart are subject to California regulations.', 'Please review the required notice [here](https://oag.ca.gov/prop65).', ], }; }, },});Hinweis: Der Nachrichtentext wird als Klartext gerendert – HTML-Tags in den Strings werden escaped, sodass nur die Markdown-Link-Syntax interpretiert wird. Entscheiden Sie serverseitig anhand des Warenkorbinhalts, ob
customMessageenthalten sein soll, damit das Banner nur erscheint, wenn es relevant ist.
(Optional) Zonos Checkout programmatisch auslösen
Wenn Sie individuelle Logik haben und Zonos Checkout programmatisch auslösen müssen, können Sie die Zonos.triggerCheckoutInternational()-Funktion verwenden, um das Zonos-Checkout-Fenster zu öffnen, nachdem Zonos initialisiert wurde. Dies ruft den in Zonos.init oben definierten createCartId-Callback auf und öffnet das Zonos-Checkout-Fenster.
// For example: During your domestic checkout flow, trigger Zonos checkout when the user selects a non-domestic country (e.g., not "US")const domesticCountry = 'US';document.querySelector('.country-select').addEventListener('change', e => { const country = e.target.value; if (country !== domesticCountry) { Zonos.triggerCheckoutInternational(); }});(Optional) Selektor für dauerhaftes Auslösen von Zonos Checkout
Wenn Sie den Checkout-Prozess für inlandische und internationale Käufer trennen möchten, können Sie eine Schaltfläche „International checkout“ zu Ihrer Website hinzufügen. Anstatt Zonos Checkout manuell mit Zonos.triggerCheckoutInternational auszulösen, können Sie Zonos.init mit dem entsprechenden Selektor konfigurieren. Der Selektor ist deaktiviert, bis Zonos initialisiert ist; beim Klick auf die Schaltfläche wird Zonos Checkout automatisch ausgelöst. Dies ruft den in Zonos.init definierten createCartId-Callback auf und öffnet das Zonos-Checkout-Fenster.
Zonos.init({ // ... other fields checkoutSettings: { // ... other fields alwaysTriggerInternationalCheckoutSelector: '#trigger-zonos-checkout', // Replace with your actual selector, button bound to this selector will always trigger Zonos checkout },});(Optional) Checkout-Funnel mit GA4 oder Facebook Pixel verfolgen
Zonos Checkout kann den vollständigen Checkout-Funnel an Ihre bestehenden Analytics-Tools weiterleiten. Für jeden Schritt sendet Zonos:
- Das ursprüngliche
zonos-checkout-...-Event an GA4 (viagtag('event', ...)) und an Meta als Custom Event (viafbq('trackCustom', ...)). - Das passende Standard-Event an Meta, wenn eines existiert –
InitiateCheckout,AddPaymentInfoundPurchase– damit Metas integrierte Optimierung und Conversion-Reporting out of the box funktionieren.
Wie Events Ihre Anbieter erreichen, hängt davon ab, wie Checkout auf Ihrer Website gerendert wird. Wählen Sie den Pfad, der zu Ihrer Integration passt.
Native Integration (Checkout wird direkt auf Ihrer Website gerendert)
Wenn das <zonos-checkout>-Custom-Element auf Ihrer eigenen Seite eingebunden ist (Standard für die oben beschriebene Zonos-JS-Skript-Integration), sind window.gtag und window.fbq der Seite bereits verfügbar. Zonos ruft sie direkt auf – kein Relay oder Pixel-ID-Handoff erforderlich.
Einrichtung:
- Stellen Sie sicher, dass Ihre Seite bereits den GA4-Basis-Tag und/oder den Meta-Pixel-Basiscode geladen hat (wie bei jeder anderen Seite Ihrer Website).
- Aktivieren Sie die gewünschten Anbieter im Zonos Dashboard unter Checkout-Einstellungen → Tracking (Google Analytics, Facebook Pixel oder beides).
Das war's. Kein Relay-Skript, kein customHTML, keine zusätzlichen IDs – Zonos erkennt gtag / fbq auf der Seite und feuert Events direkt ab.
Iframe-Integration (Legacy-Checkout-Iframe auf iglobalstores.com)
Wenn Checkout in einem Iframe auf einer anderen Origin gehostet wird, kann es gtag / fbq Ihrer Seite nicht direkt erreichen. Zonos veröffentlicht ein kleines Relay-Skript – analyticsRelayOnInit.js – das auf postMessage-Events aus dem Checkout-Iframe lauscht und sie an die Anbieter auf Ihrer Seite weiterleitet. Ein einzelnes Relay verarbeitet GA4 und Facebook Pixel gleichzeitig.
Einrichtung:
- Aktivieren Sie die gewünschten Anbieter im Zonos Dashboard unter Checkout-Einstellungen → Tracking.
- Fügen Sie den GA4-Basis-Tag und/oder den Meta-Pixel-Basiscode zum
<head>der Seite hinzu, die das Checkout-Iframe hostet. - Fügen Sie das Relay-Skript nach den Anbieter-Tags hinzu:
async src="https://cdn.jsdelivr.net/npm/@zonos/elements/dist/scripts/analyticsRelayOnInit.js">- Übergeben Sie die entsprechenden IDs über Ihr Checkout-
customHTML, damit das Relay weiß, gegen welche Property bzw. welchen Pixel es feuern soll:
window.Zonos.googleAnalyticId = 'G-XXXXXXXXXX'; window.Zonos.facebookPixelId = 'YOUR_PIXEL_ID';Schritt-für-Schritt-Iframe-Anweisungen, die vollständige Event-Referenz (einschließlich purchase / Purchase-Payload-Mapping) und Debugging-Tipps finden Sie hier:
Bestellverfolgung und -status mit Dashboard synchronisieren
Um Bestellungen zwischen Ihrem System und Zonos Dashboard zu synchronisieren, implementieren Sie diese API-Aufrufe und Webhooks:
Erforderliche Mutationen
| Mutation↕ | Beschreibung↕ |
|---|---|
orderUpdateAccountOrderNumber | Synchronisiert Ihre native Kontonummer mit Dashboard. Docs → |
orderAddTrackingNumber | Nur erforderlich, wenn Sie Etiketten nicht im Dashboard drucken. Stellt sicher, dass die Sendungsverfolgung im Dashboard angezeigt wird, damit Zonos Ihre Landed-Cost-Berechnungen garantieren kann. Docs → |
Erforderliche Webhooks
Integration testen
Bevor Sie Ihre Checkout-Integration live schalten, ist es wichtig, alle Aspekte der Integration gründlich zu testen, um ein reibungsloses Kundenerlebnis sicherzustellen. Dazu gehören Tests des Checkout-Ablaufs, der Zahlungsabwicklung, der Bestellerstellung und der Webhook-Funktionalität.
Befolgen Sie unseren Testleitfaden, um zu überprüfen, ob Ihre Integration korrekt funktioniert, und um Probleme zu identifizieren und zu beheben, bevor Sie in die Produktion gehen.
Häufige Fragen
Nachfolgend finden Sie einige häufige Fragen zum Integrationsprozess.
Wie behandelt Zonos die Bestellbestätigung?
Konfigurieren Sie das Erlebnis nach dem Kauf unter Dashboard -> Einstellungen -> Checkout-Einstellungen unter Success page type. Drei Optionen stehen zur Verfügung:
- Show Zonos success page (Standard, empfohlen) – Zonos zeigt nach der Bestellung eine integrierte Dankeseite an. Die Seite wird immer angezeigt, auch wenn der Import der Bestellung in Ihr System fehlschlägt, sodass der Käufer immer eine Bestätigung erhält.
- Redirect to a success page – Zonos wartet auf einem kurzen „Order complete“-Bildschirm, bis die Bestellung erstellt wurde, und leitet dann zu Ihrer konfigurierten Erfolgs-URL mit
zOrderNumber(undorderIdfür Legacy-Warenkörbe) als Query-Parameter weiter. - Close the checkout modal – Zonos schließt sein Modal, sobald die Zahlung erfasst wurde. Wenn Sie auch eine Erfolgs-URL konfigurieren, leitet Zonos sofort nach der Zahlungserfassung durch Stripe zu dieser URL weiter – ohne auf die Bestellerstellung zu warten – und hängt
zonosCheckoutSessionIdals Query-Parameter an. Verwenden Sie diese Option, wenn Sie die schnellste Rückgabe zu Ihrer eigenen Erfolgsseite wünschen.
Bestellung über zonosCheckoutSessionId nachschlagen
Wenn Sie Close the checkout modal mit einer Redirect-URL verwenden, kann es einige Sekunden dauern, bis die Bestellung nach dem Redirect an die Checkout-Session angehängt wird. Lesen Sie zonosCheckoutSessionId aus der URL und pollen Sie die checkoutSession-GraphQL-Abfrage von Ihrem Server mit Ihrem geheimen Credential-Token, bis die Bestellung bereit ist. Rufen Sie dies niemals vom Browser aus auf – das geheime Credential-Token muss serverseitig bleiben.
query getCheckoutSession($id: String!checkoutSession )orderidSenden Sie die Abfrage an https://api.zonos.com/graphql mit Ihrem geheimen Credential-Token aus Dashboard -> Einstellungen -> Integrationen als credentialToken-Request-Header.
Kann ich benachrichtigt werden, wenn eine Bestellung erstellt wird?
Ja. Wenn Sie Benachrichtigungen erhalten möchten, wenn eine Bestellung erstellt wird, können Sie im Dashboard unter dem Abschnitt E-Mail der Checkout-Einstellungen die E-Mail-Adressen der Teammitglieder eingeben, die bei Erstellung, Versand oder Stornierung einer Bestellung benachrichtigt werden sollen.
Individuelle Integration
Erstellen Sie eine End-to-End-Checkout-Integration für Ihre individuelle Website.