Información general
El Motor de reservas Plus de Cloudbeds ahora permite la integración de una pasarela de pagos personalizada o admite pagos con tarjeta regalo, lo que brinda una mayor flexibilidad en la gestión de las opciones de pago.
Otras características incluyen:
- Integración de pasarela de pagos personalizada utilizando la opción de transferencia bancaria
- Soporte para tarjetas regalo con campos personalizados para huéspedes
Información importante
- Las propiedades deben habilitar la opción de transferencia bancaria en su PMS de Cloudbeds para añadir una pasarela de pagos personalizada al Motor de reservas Plus.
- Se requiere un JavaScript personalizado para activar un evento que notifique al Motor de reservas sobre la pasarela de pagos personalizada.
- Solo se puede integrar una (1) pasarela de pagos personalizada, lo que significa que las propiedades no pueden ofrecer simultáneamente transferencia bancaria y pasarela de pagos personalizada.
- El soporte para tarjetas regalo requiere añadir un campo personalizado para huéspedes para ingresar los números de tarjeta regalo.
- Las instrucciones a continuación se aplican únicamente al Motor de reservas Plus. Las propiedades que utilicen la versión antigua del Motor de reservas de Cloudbeds deben seguir estas instrucciones.
🚩Antes de comenzar
- Nota: Los pasos proporcionados aquí son un recurso informativo adicional para aquellos que ya están familiarizados con HTML y CSS; solo se sugieren para desarrolladores web experimentados.
- Es posible que el código se vuelva obsoleto y requiera trabajo adicional.
- Cloudbeds no ofrece asistencia con la creación de un widget de reservas en grupo, personalización del motor de reservas o diseño/desarrollo de sitios web de hoteles.
- Si no tienes un sitio web y deseas uno, consulta este artículo.
- Si ya tienes un sitio web, te recomendamos que contactes a tu diseñador web o desarrollador web para instalar nuestro motor de reservas
- Para añadir una opción de pago personalizada, las propiedades necesitan tener un JavaScript personalizado para utilizar el EventSystem que el Motor de reservas expone para habilitar la opción de pago personalizada.
Añadir pasarelas de pagos de terceros y tarjetas regalo al Motor de reservas de Cloudbeds
- Ve a la página de Configuración de tu Menú de Cuenta y haz clic en la sección Motor de Reservas
- Haz clic en Personalizar
- Añade el siguiente código al campo de JavaScript para suscribirte al evento on-booking-engine-ready (que se activará una vez que el Motor de Reservas esté listo para comenzar a desencadenar y escuchar eventos) y notificar al Motor de Reservas sobre el uso de una opción de pago personalizada utilizando el EventSystem con el siguiente código
- Haz clic en Guardar
<script>
window.addEventListener('on-booking-engine-ready', (e) => {
const { eventSystem } = e.detail;
eventSystem.dispatchEvent("custom-payment-option-change", {
id: "%PAYMENT_OPTION_ID%",
instructions: "Tu texto predeterminado para las instrucciones va aquí.",
name: "Tu texto predeterminado para la etiqueta va aquí.",
});
});
</script>
-
Usa eventStytem.dispatch() para despachar el evento custom-payment-option-change con la siguiente carga útil:
-
id [string] debe estar definido con una longitud mayor que 0, y válido para usar como un id de CSS (sin espacios, sin punto y coma, etc.). Formato de id sugerido: kebab-case. Reemplaza %PAYMENT_OPTION_ID% con el id que deseas usar para tu pasarela de pagos personalizada, este id es el valor que se utilizará en los selectores de CSS para personalizar la interfaz de usuario.
-
instructions [string] opcional - para mostrar instrucciones (o una descripción) cuando el usuario hace clic en la opción de pago personalizada (expandida como un acordeón). Este valor necesita estar definido si la propiedad desea mostrar ese texto y actuará como un valor predeterminado si no se personaliza con CSS para idiomas específicos.
-
name [string] debe estar definido con una longitud mayor que 0.
-
-
Importante:
-
Si la carga útil del evento no cumple con todos los requisitos, la Opción de Pago Personalizada no se registrará, y la opción de Transferencia Bancaria seguirá mostrándose.
-
Guarda los cambios en Cloudbeds PMS y accede al Motor de Reservas. En la página de pago, tu pasarela de pagos personalizada se mostrará como una opción de pago, con un ícono de tarjeta predeterminado.
-
Puedes añadir CSS personalizado para personalizar cómo se ve la Opción de Pago Personalizada agregando metaetiquetas personalizadas en Cloudbeds PMS.
-
- Puedes especificar textos basados en idioma para las etiquetas:
html[lang="%LANG%"] [data-id="%PAYMENT_OPTION_ID%-name"]::before {
content: "Tu texto específico para la etiqueta en tu idioma va aquí.";
}
- Instrucciones también pueden configurarse basadas en idioma:
html[lang="%LANG%"] [data-id="%PAYMENT_OPTION_ID%-instructions"]::before {
content: "Tu texto específico para las instrucciones en tu idioma va aquí.";
}
- Y también puedes añadir un logo/ícono personalizado:
// Para ocultar el ícono SVG predeterminado
[data-id="%PAYMENT_OPTION_ID%-icon"] svg {
display: none;
}
// Para personalizar el ícono estableciéndolo como una 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, has añadido y personalizado la opción de pago para usar la Opción de Pago Personalizada. Cuando un huésped realiza una reserva utilizando la Opción de Pago Personalizada, la reserva se creará en Cloudbeds PMS con un método de pago de banca electrónica, y no se recogerá ningún pago por nuestra parte.
- Usando el EventSystem, puedes escuchar el evento reservation-created para obtener los datos sobre la reserva creada y redirigir al usuario a la pasarela de pagos para completar el pago (para integraciones con pasarelas de pagos de terceros).
eventSystem.addEventListener('reservation-created', (data) = {
// Tu código a 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<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,>
Comentarios
Inicie sesión para dejar un comentario.