Soporte para pasarelas de pago personalizadas y tarjetas de regalo en el motor de reservas Plus

1. Ve a la página Configuración del menú de tu Cuenta y haz clic en la sección Motor de reservas
2. Haz clic en Personalizar
3. Agrega el JavaScript personalizado al campo JavaScript
4. Haz clic en Guardar

El JavaScript personalizado debe suscribirse al evento on-booking-engine-ready. Este evento se dispara cuando el Motor de reservas está listo para activar y escuchar eventos.

El script también debe disparar el evento custom-payment-option-change para notificar al Motor de reservas que hay una opción de pago personalizada disponible.

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

eventSystem.dispatchEvent("custom-payment-option-change", {
id: "%PAYMENT_OPTION_ID%",
instructions: "Your default text for the instructions goes here.",
name: "Your default text for the label goes here.",
});
});

Usa eventSystem.dispatchEvent() para disparar el evento custom-payment-option-change con la siguiente carga útil:

• id [string]: Obligatorio. Debe tener una longitud mayor que 0 y debe ser válido para usarse como ID de CSS. No uses espacios, puntos y coma ni caracteres especiales que no sean válidos en selectores CSS. El formato sugerido es kebab-case. Reemplaza %PAYMENT_OPTION_ID% por el ID de la pasarela de pago personalizada. Este ID también se usa en selectores CSS para personalizar la interfaz de usuario.
• instructions [string]: Opcional. Muestra instrucciones o una descripción cuando el huésped expande la opción de pago personalizada, que se muestra como un acordeón. Este valor debe definirse si la propiedad quiere mostrar ese texto, y funcionará como respaldo si el texto específico por idioma no se personaliza con CSS.
• name [string]: Obligatorio. Debe tener una longitud mayor que 0.

• Puedes especificar textos por idioma para las etiquetas:

html[lang="%LANG%"] [data-id="%PAYMENT_OPTION_ID%-name"]::before {
  content: "Your lang-specific text for the label goes here.";
}

• Las instrucciones también se pueden configurar por idioma:

html[lang="%LANG%"] [data-id="%PAYMENT_OPTION_ID%-instructions"]::before {
  content: "Your lang-specific text for the instructions goes here.";
}

• Además, puedes agregar un logo/ícono personalizado:

// Para ocultar el ícono SVG predeterminado
[data-id="%PAYMENT_OPTION_ID%-icon"] svg {
  display: none;
}

// Para personalizar el ícono configurándolo como imagen de fondo
[data-id="%PAYMENT_OPTION_ID%-icon"] {
background-image: url(PAYMENT_OPTION_ICON_URL);
background-size: cover;
background-position: center;
width: 40px;
height: 40px;
}

• En este punto, habrás agregado y personalizado la opción de pago para usar la opción de pago personalizada. Cuando un huésped realiza una reserva con la opción de pago personalizada, la reserva se crea en Cloudbeds PMS con un método de pago de banca electrónica, y Cloudbeds no cobra ningún pago.
• Mediante EventSystem, puedes escuchar el evento reservation-created  para obtener los datos de la reserva creada y redirigir al usuario a la pasarela de pago para completar el pago en integraciones con pasarelas de pago de terceros.

eventSystem.addEventListener('reservation-created', (data) = {
// Tu código para ejecutar después de que se crea una reserva...
})

• Los datos expuestos por el evento reservation-created tienen la siguiente estructura:

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;
state?: string;
total_tax?: number;
widget_property?: number;
};

Revisa lo siguiente:

• Confirma que la opción de transferencia bancaria esté habilitada en Cloudbeds PMS.
• Confirma que el JavaScript personalizado se haya agregado a la pestaña Personalizar del Motor de reservas.
• Confirma que la carga útil del evento custom-payment-option-change incluya un id y un name válidos.
• Confirma que el id no incluya espacios, puntos y coma ni caracteres de selectores CSS no válidos.
• Confirma que solo haya una pasarela de pago personalizada configurada.

Si la carga útil del evento no cumple todos los requisitos, la opción de pago personalizada no se registrará y la opción de transferencia bancaria seguirá apareciendo.

Revisa lo siguiente:

• Confirma que el script personalizado escuche el evento reservation-created.
• Confirma que el script no dependa únicamente de listeners de clics específicos de una página, clics en botones de acordeón o selectores de la interfaz de usuario.
• Confirma que la URL de la pasarela de pago de terceros y los parámetros de redirección sean válidos.

Cloudbeds puede confirmar el comportamiento esperado del Motor de reservas. Los cambios en el JavaScript personalizado deben ser realizados por el desarrollador web, revendedor o socio de integración de la propiedad.