Prise en charge des passerelles de paiement personnalisées et des Cartes cadeau dans le moteur de réservation Plus

1. Accède à la page Paramètres du menu Compte et clique sur la section Moteur de réservation
2. Clique sur Personnaliser
3. Ajoute le JavaScript personnalisé dans le champ JavaScript
4. Clique sur Enregistrer

Le JavaScript personnalisé doit s’abonner à l’événement on-booking-engine-ready. Cet événement est déclenché lorsque le moteur de réservation est prêt à émettre et écouter des événements.

Le script doit également déclencher l’événement custom-payment-option-change pour informer le moteur de réservation qu’une option de paiement personnalisée est disponible.

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

  eventSystem.dispatchEvent("custom-payment-option-change", {
    id: "%PAYMENT_OPTION_ID%",
    instructions: "Ton texte par défaut pour les instructions va ici.",
    name: "Ton texte par défaut pour le libellé va ici.",
  });
});
</script>

Utilisez eventSystem.dispatchEvent() pour déclencher l'événement custom-payment-option-change avec la charge utile suivante :

• id [string] : Obligatoire. Doit avoir une longueur supérieure à 0 et être valide pour être utilisé comme un identifiant CSS. N'utilisez pas d'espaces, de points-virgules ou de caractères spéciaux non valides dans les sélecteurs CSS. Le format suggéré est kebab-case. Remplacez %PAYMENT_OPTION_ID% par l'identifiant de la passerelle de paiement personnalisée. Cet identifiant est également utilisé par les sélecteurs CSS pour personnaliser l'interface utilisateur.
• instructions [string] : Facultatif. Affiche des instructions ou une description lorsque le client développe l'option de paiement personnalisée (déployée en accordéon). Cette valeur doit être définie si l'établissement souhaite afficher ce texte et servira de solution de secours si le texte spécifique à la langue n'est pas personnalisé via CSS.
• name [string] : Obligatoire. Doit avoir une longueur supérieure à 0.

• Vous pouvez spécifier des textes basés sur la langue pour les libellés :

html[lang="%LANG%"] [data-id="%PAYMENT_OPTION_ID%-name"]::before {
  content: "Votre texte spécifique à la langue pour le libellé ici.";
}

• Les instructions peuvent également être configurées en fonction de la langue :

html[lang="%LANG%"] [data-id="%PAYMENT_OPTION_ID%-instructions"]::before {
  content: "Votre texte spécifique à la langue pour les instructions ici.";
}

• Et vous pouvez aussi ajouter un logo/icône personnalisé :

// Pour masquer l'icône SVG par défaut
[data-id="%PAYMENT_OPTION_ID%-icon"] svg {
  display: none;
}

// Pour personnaliser l'icône en la définissant comme image de fond
[data-id="%PAYMENT_OPTION_ID%-icon"] {
  background-image: url(PAYMENT_OPTION_ICON_URL);
  background-size: cover;
  background-position: center;
  width: 40px;
  height: 40px;
}

• À ce stade, vous avez ajouté et personnalisé l'option de paiement pour utiliser l'option de paiement personnalisée. Lorsqu'un client effectue une réservation en utilisant cette option, la réservation sera créée dans le PMS Cloudbeds avec un mode de paiement par e-banking, et aucun paiement ne sera collecté par Cloudbeds.
• En utilisant le EventSystem, vous pouvez écouter l'événement reservation-created pour obtenir les données concernant la réservation créée et rediriger l'utilisateur vers la passerelle de paiement afin de finaliser le paiement (pour les intégrations avec des passerelles de paiement tierces).

eventSystem.addEventListener('reservation-created', (data) = {
  // Votre code à exécuter après la création d'une réservation...
})

• Les données exposées par l'événement reservation-created ont la forme suivante :

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: number; amount: number; bookedid: string[]; kids: number; name: string; packageid?: string; packagename?: string; picture?: string; price?: string; rateid: string; roomid: string; unit?: string }>;
  state?: string;
  total_tax?: number;
  widget_property?: number;
};</string,>

Vérifiez les points suivants :

• Confirmez que l’option Virement bancaire est activée dans le PMS Cloudbeds.
• Confirmez que le JavaScript personnalisé est ajouté dans l’onglet Personnalisation du moteur de réservation.
• Confirmez que la charge utile de l’événement custom-payment-option-change inclut un id et un nom valides.
• Confirmez que l’id ne contient pas d’espaces, de points-virgules ou de caractères invalides pour un sélecteur CSS.
• Confirmez qu’une seule passerelle de paiement personnalisée est configurée.

Si la charge utile de l’événement ne remplit pas toutes les conditions, l’option de paiement personnalisée ne sera pas enregistrée et l’option Virement bancaire continuera de s’afficher.

Vérifiez les points suivants :

• Confirmez que le script personnalisé écoute l’événement reservation-created.
• Confirmez que le script ne dépend pas uniquement des écouteurs de clic spécifiques à une page, des clics sur les boutons d’accordéon ou des sélecteurs d’interface utilisateur.
• Confirmez que l’URL de la passerelle de paiement tierce et les paramètres de redirection sont valides.

Cloudbeds peut confirmer le comportement attendu du moteur de réservation. Les modifications JavaScript personnalisées doivent être réalisées par le développeur web, le revendeur ou le partenaire d’intégration de l’établissement.