Benutzerdefinierte Zahlungs-Gateways und Geschenkkarten-Zahlungen in der Buchungsmaschine Plus einrichten

Einführung

Cloudbeds Booking Engine Plus unterstützt benutzerdefinierte Zahlungs-Gateways oder Geschenkkarten-Workflows über benutzerdefiniertes JavaScript. Die benutzerdefinierte Zahlungsoption verwendet das Booking Engine EventSystem und die Zahlungsoption Banküberweisung als Grundlage für den individuellen Ablauf.

Die gehostete Buchungsmaschine bleibt die unterstützte Checkout-Umgebung für benutzerdefinierte Zahlungsmethoden. Dieser Artikel erklärt die Einrichtungsvoraussetzungen, wobei der Cloudbeds-Support helfen kann, welche Aufgaben beim Zahlungsanbieter oder Entwickler verbleiben und wie Premium-Einbettungen genutzt werden können, wenn eine Unterkunft ein intensiveres Website-Einstiegserlebnis wünscht.

Inhaltsverzeichnis

• Wer davon betroffen ist und wie
• Voraussetzungen und Support-Grenzen
• Benutzerdefinierte Zahlungsmethoden mit dem immersiven Erlebnis verwenden
• Ein Drittanbieter-Zahlungs-Gateway oder Geschenkkarten-Workflow einrichten
• Ein benutzerdefiniertes Zahlungs-Gateway testen und Fehler beheben

Wer davon betroffen ist und wie

Benutzerdefinierte Zahlungs-Workflows erfordern sowohl Cloudbeds-Konfiguration als auch Drittanbieter-Entwicklung. Verwenden Sie diese Tabelle, um zu erkennen, welcher Teil des Prozesses für Sie relevant ist.

Voraussetzungen und Support-Grenzen

Bevor Sie ein benutzerdefiniertes Zahlungs-Gateway oder einen Geschenkkarten-Workflow implementieren, bestätigen Sie die erforderlichen Einstellungen der Buchungsmaschine und wer für jeden Teil der Implementierung verantwortlich ist.

• Aktivieren Sie Banküberweisung als Zahlungsoption für die Buchungsmaschine im Cloudbeds PMS.
• Verwenden Sie benutzerdefiniertes JavaScript mit dem Buchungsmaschinen-EventSystem, um die benutzerdefinierte Zahlungsoption zu registrieren.
• Es kann nur ein benutzerdefiniertes Zahlungs-Gateway integriert werden. Die Unterkunft kann Banküberweisung und ein benutzerdefiniertes Zahlungs-Gateway nicht gleichzeitig als separate Optionen anbieten.
• Die Unterstützung von Geschenkkarten erfordert ein benutzerdefiniertes Gästefeld, in das der Gast die Geschenkkartennummer eingeben kann.
• Benutzerdefinierte Zahlungsmethoden werden nur in gehosteten Buchungsmaschinen-Umgebungen unterstützt. Sie werden in der vollständigen Cloudbeds Booking Engine Immersive Experience 2.0 nicht unterstützt.
• Die Implementierungsschritte in diesem Artikel gelten nur für die Buchungsmaschine Plus.

Wie der Cloudbeds-Support helfen kann

Der Cloudbeds-Support kann bei der Cloudbeds-seitigen Einrichtung helfen, die Ihr Anbieter für Tests benötigt. Der Support kann:

• Sie bei der Erstellung eines Test-Ratenplans mit Promo-Code anleiten, damit der Zahlungsanbieter die Browser-Konsole überprüfen kann. Verwenden Sie einen benutzerdefinierten Tarif von 0,50 USD und machen Sie den Test-Ratenplan nur für die Buchungsmaschinen-Quelle verfügbar.
• Sie dabei unterstützen, benutzerdefinierte Skripte, die Ihr Zahlungs-Gateway-Anbieter bereitstellt, im Customize-Panel der Buchungsmaschine hinzuzufügen.

Für erweiterte Fehlerbehebung oder Integrationsfragen muss der Zahlungs-Gateway-Anbieter direkt mit dem Cloudbeds-Integrations-Team zusammenarbeiten. Wenn der Anbieter noch kein Cloudbeds-Partner ist, bitten Sie ihn, sich über die Partner mit Cloudbeds-Seite zu bewerben.

Benutzerdefinierte Zahlungsmethoden mit der Immersive Experience verwenden

Benutzerdefinierte Zahlungsmethoden werden in der vollständigen Cloudbeds Booking Engine Immersive Experience 2.0 nicht unterstützt. Wenn Sie den Beginn der Buchungsreise auf der Website Ihrer Unterkunft beibehalten möchten, verwenden Sie Premium-Einbettungen als Einstiegspunkt und schließen Sie die Buchung auf der gehosteten Buchungsmaschine ab.

Sie können Premium-Einbettungen wie die Multi-Unterkunft-, Datums-Auswahl- und Zimmer-Auswahl-Widgets auf Ihrer Website verwenden. Gäste können mit der unterstützten Widget-Erfahrung auf Ihrer Seite interagieren und dann zur von Cloudbeds gehosteten Buchungsmaschine wechseln, um die Reservierung abzuschließen und die benutzerdefinierte Zahlungsweiterleitung zu nutzen.

Einrichtung eines Drittanbieter-Zahlungs-Gateways oder Geschenkkarten-Workflows

Die benutzerdefinierte Zahlungsoption muss über das EventSystem der Buchungsmaschine registriert werden. Die folgende Einrichtung umfasst die Ereignisregistrierung auf Cloudbeds-Seite und das Reservierungs-erstellte Ereignis, das von der Weiterleitungslogik eines Anbieters verwendet wird.

Schritt 1: Fügen Sie das benutzerdefinierte JavaScript auf der Registerkarte Anpassen hinzu

1. Öffnen Sie das Kontomenü und gehen Sie zu Einstellungen > Buchungsmaschine.
2. Klicken Sie auf Anpassen.
3. Fügen Sie das benutzerdefinierte JavaScript in das Feld JavaScript ein.
4. Klicken Sie auf Speichern.

Das benutzerdefinierte JavaScript muss sich auf das Ereignis on-booking-engine-ready abonnieren. Dieses Ereignis wird ausgelöst, wenn die Buchungsmaschine bereit ist, Ereignisse auszulösen und zu empfangen. Das Skript muss außerdem das Ereignis custom-payment-option-change auslösen, damit die Buchungsmaschine die benutzerdefinierte Zahlungsoption registrieren kann.

<script>
window.addEventListener('on-booking-engine-ready', (e) => {
  const { eventSystem } = e.detail;

  eventSystem.dispatchEvent("custom-payment-option-change", {
    id: "%PAYMENT_OPTION_ID%",
    instructions: "Ihr Standardtext für die Anweisungen steht hier.",
    name: "Ihr Standardtext für die Bezeichnung steht hier.",
  });
});
</script>

Schritt 2: Registrieren Sie die benutzerdefinierte Zahlungsoption im EventSystem

Verwenden Sie eventSystem.dispatchEvent(), um das Ereignis custom-payment-option-change mit den erforderlichen Details zur Zahlungsoption auszulösen:

• id [string]: Erforderlich. Der Wert muss eine Länge größer als 0 haben und für die Verwendung als CSS-ID gültig sein. Verwenden Sie keine Leerzeichen, Semikolons oder Sonderzeichen, die in CSS-Selektoren ungültig sind. Das empfohlene Format ist kebab-case. Ersetzen Sie %PAYMENT_OPTION_ID% durch die ID des benutzerdefinierten Zahlungs-Gateways.
• instructions [string]: Optional. Zeigt Anweisungen oder eine Beschreibung an, wenn der Gast die benutzerdefinierte Zahlungsoption erweitert. Verwenden Sie diesen Wert als Standardtext, wenn sprachspezifische Texte nicht mit CSS angepasst wurden.
• name [string]: Erforderlich. Der Wert muss eine Länge größer als 0 haben.

Nachdem Sie die Änderungen gespeichert haben, öffnen Sie die gehostete Buchungsmaschine und testen Sie den Check-out. Der Zahlungsschritt kann in einem separaten Pop-up oder Modal geöffnet werden, anstatt inline auf der Reservierungsseite zu erscheinen. Die benutzerdefinierte Zahlungsoption muss dennoch über das EventSystem der Buchungsmaschine registriert werden.

Die folgende Abbildung zeigt das gehostete Zahlungsfenster mit den verfügbaren Zahlungsmethoden, nachdem der Gast den Check-out fortgesetzt hat.

Schritt 3: Behandeln Sie das Ereignis reservation-created und die Weiterleitung zum Anbieter

Wenn ein Gast eine Reservierung mit der benutzerdefinierten Zahlungsoption vornimmt, wird die Reservierung im Cloudbeds PMS mit der Zahlungsmethode E-Banking erstellt, und es wird keine Zahlung von Cloudbeds eingezogen. Das benutzerdefinierte Skript des Anbieters kann auf das Ereignis reservation-created hören, die Reservierungsdaten verwenden und den Gast zum Drittanbieter-Zahlungsgateway weiterleiten, um die Zahlung abzuschließen.

eventSystem.addEventListener('reservation-created', (data) = {
  // Dein Code, der nach der Erstellung einer Buchung ausgeführt wird...
})

Verwenden Sie das EventSystem der Buchungsmaschine für die Registrierung und das Ereignis reservation-created. Verlassen Sie sich nicht ausschließlich auf seitenbezogene Klick-Listener, Akkordeon-Button-Klicks oder UI-Selektoren, um festzustellen, ob die benutzerdefinierte Zahlungsoption ausgewählt wurde.

Erweitern Sie die untenstehenden erweiterten Referenzabschnitte, wenn Sie optionale Details zu Bezeichnungen, Anweisungen, Symbolen oder Reservierungsdaten benötigen.

html[lang="%LANG%"] [data-id="%PAYMENT_OPTION_ID%-name"]::before {
  content: "Hier steht dein sprachspezifischer Text für die Bezeichnung.";
}

html[lang="%LANG%"] [data-id="%PAYMENT_OPTION_ID%-instructions"]::before {
  content: "Hier steht dein sprachspezifischer Text für die Anweisungen.";
}

// Um das standardmäßige SVG-Symbol auszublenden
[data-id="%PAYMENT_OPTION_ID%-icon"] svg {
  display: none;
}

// Um das Symbol anzupassen, indem du es als Hintergrundbild festlegst
[data-id="%PAYMENT_OPTION_ID%-icon"] {
  background-image: url(PAYMENT_OPTION_ICON_URL);
  background-size: cover;
  background-position: center;
  width: 40px;
  height: 40px;
}

interface CreatedReservation {
  booking_id?: `${number}`;
  booking_total?: number;
  checkin_date?: string;
  checkout_date?: string;
  city?: string;
  currency_code?: string;
  hotel_name?: string;
  real_booking_total?: number;
  resRooms?: {
    adults: `${number}`;
    id: `${number}`;
    kids: `${number}`;
    package: `${number}`;
    package_name: string | null;
    rate_id: `${number}`;
    room_total: `${number}`;
    room_type_id: `${number}`;
    room_type_name: string;
    room_type_photos: ({
      TYPE?: string;
      alt: string;
      cropParam: string | null;
      croppedImage: string;
      fullPath: string;
      galleryPath?: string | null;
      id: string;
      imageHeight: string;
      imageWidth: string;
      mime?: string;
      originalName: string;
      ownerId?: string;
      ownerType?: string;
      parentId: string;
      path: string;
      section?: string;
      size?: string;
      thumbPath: string;
      uploadedAt?: string;
      utype?: string;
    } & {
      featured: number;
      featuredPath: string | null;
    })[];
  }[];
  rooms?: Record<string, {="{" adults:="adults:" number;="number;" amount:="amount:" bookedid:="bookedId:" string[];="string[];" kids:="kids:" name:="name:" string;="string;" packageid?:="packageId?:" packagename?:="packageName?:" picture?:="picture?:" price?:="price?:" rateid:="rateId:" roomid:="roomId:" unit?:="unit?:" }="}">;
  state?: string;
  total_tax?: number;
  widget_property?: number;
};</string,>

Testen und Fehlerbehebung eines benutzerdefinierten Zahlungs-Gateways

Nutzen Sie einen kontrollierten Testablauf in der Buchungsmaschine, wenn Ihr Zahlungsanbieter das Verhalten der Browser-Konsole prüfen oder die Weiterleitungslogik validieren muss. Der Cloudbeds-Support kann bei der Einrichtung des Tests auf Cloudbeds-Seite helfen, aber der Zahlungsanbieter bleibt für den benutzerdefinierten Gateway-Code und die Fehlerbehebung auf Anbieterseite verantwortlich.

Erstellen Sie einen Test-Ratenplan für die Fehlerbehebung durch den Anbieter

Der Cloudbeds-Support kann Sie dabei unterstützen, einen temporären Ratenplan mit einem Promo-Code zum Testen zu erstellen. Verwenden Sie einen benutzerdefinierten Tarif von 0,50 USD und machen Sie den Ratenplan nur für die Buchungsmaschine verfügbar, damit Ihr Zahlungsanbieter den Check-out-Prozess reproduzieren und die Browser-Konsole überprüfen kann.

Erweitern Sie das Problem, das dem von Ihnen beobachteten Verhalten entspricht.

Verwandte Artikel

Jetzt, da Sie die unterstützte Einrichtung der benutzerdefinierten Zahlung und die Eigentumsgrenzen verstehen, sehen Sie sich diese Ressourcen für umfassendere Funktionen der Buchungsmaschine Plus und die unterstützte Immersive-Experience-Konfiguration an:

• Cloudbeds Booking Engine Plus – Übersicht und Aktivierung
• Cloudbeds Booking Engine Immersive Experience 2.0 einrichten und anpassen