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

Introducción

El motor de reservas Plus de Cloudbeds permite utilizar un procesador de pagos personalizado o un flujo de trabajo con tarjetas de regalo mediante JavaScript personalizado. La opción de pago personalizada utiliza EventSystem del motor de reservas y la opción de pago Transferencia bancaria como base del flujo personalizado.

El motor de reservas alojado sigue siendo el entorno compatible para completar reservas con métodos de pago personalizados. Este artículo explica los requisitos de configuración, en qué puede ayudarte el equipo de soporte de Cloudbeds, qué aspectos siguen siendo responsabilidad del proveedor de pagos o del desarrollador y cómo utilizar los elementos integrados premium cuando un establecimiento quiere ofrecer una experiencia más inmersiva al iniciar la reserva desde su sitio web.

Índice

• A quién afecta y de qué manera
• Requisitos y alcance del soporte
• Usar métodos de pago personalizados con la experiencia inmersiva
• Configurar un procesador de pagos de terceros o un flujo de trabajo con tarjetas de regalo
• Probar un procesador de pagos personalizado y solucionar problemas

A quién afecta y de qué manera

Los flujos de trabajo de pago personalizados requieren tanto configuración en Cloudbeds como desarrollo de terceros. Usa esta tabla para identificar qué parte del proceso te corresponde.

Requisitos y alcance del soporte

Antes de implementar un procesador de pagos personalizado o un flujo de trabajo con tarjetas de regalo, confirma la configuración necesaria del motor de reservas y quién es responsable de cada parte de la implementación.

• Activa Transferencia bancaria como opción de pago para el motor de reservas en Cloudbeds PMS.
• Usa JavaScript personalizado con EventSystem del motor de reservas para registrar la opción de pago personalizada.
• Solo se puede integrar un procesador de pagos personalizado. El establecimiento no puede ofrecer Transferencia bancaria y un procesador de pagos personalizado como opciones independientes al mismo tiempo.
• Para permitir el uso de tarjetas de regalo, se requiere un campo personalizado del huésped en el que el huésped pueda ingresar el número de la tarjeta de regalo.
• Los métodos de pago personalizados solo son compatibles con entornos del motor de reservas alojado. No son compatibles con la experiencia inmersiva 2.0 completa del motor de reservas de Cloudbeds.
• Los pasos de implementación de este artículo se aplican únicamente al motor de reservas Plus.

Cómo puede ayudarte el equipo de soporte de Cloudbeds

El equipo de soporte de Cloudbeds puede ayudarte con la configuración necesaria en Cloudbeds para que tu proveedor pruebe su implementación. El equipo puede:

• Guiarte para crear un plan de tarifas de prueba con un código promocional para que el proveedor de pagos pueda revisar la consola del navegador. Usa una tarifa personalizada de USD 0,50 y habilita el plan de tarifas de prueba únicamente para la fuente Motor de reservas.
• Ayudarte a añadir los scripts personalizados proporcionados por tu proveedor del procesador de pagos al panel Personalizar del motor de reservas.

Para solucionar problemas avanzados o resolver consultas sobre la integración, el proveedor del procesador de pagos debe trabajar directamente con el equipo de Integraciones de Cloudbeds. Si el proveedor aún no es partner de Cloudbeds, pídele que envíe una solicitud mediante la página Conviértete en partner de Cloudbeds.

Usar métodos de pago personalizados con la experiencia inmersiva

Los métodos de pago personalizados no son compatibles con la experiencia inmersiva 2.0 completa del motor de reservas de Cloudbeds. Si quieres que el proceso de reserva comience en el sitio web de tu establecimiento, usa elementos integrados premium como punto de entrada y completa la reserva en el motor de reservas alojado.

Puedes usar elementos integrados premium en tu sitio web, como los widgets para varios establecimientos, de selección de fechas y de selección de habitaciones. Los huéspedes pueden interactuar con las funciones compatibles del widget en tu sitio y luego continuar al motor de reservas alojado por Cloudbeds para completar la reserva y utilizar la redirección de pago personalizada.

Configurar un procesador de pagos de terceros o un flujo de trabajo con tarjetas de regalo

La opción de pago personalizada debe registrarse mediante EventSystem del motor de reservas. La configuración que se describe a continuación abarca el registro de eventos en Cloudbeds y el evento de creación de reserva que utiliza la lógica de redirección del proveedor.

Paso 1: Añadir el JavaScript personalizado a la pestaña Personalizar

1. Abre el Menú de cuenta y ve a Configuración > Motor de reservas.
2. Haz clic en Personalizar.
3. Añade 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 emite cuando el motor de reservas está listo para activar y escuchar eventos. El script también debe emitir el evento custom-payment-option-change para que el motor de reservas pueda registrar la opción de pago personalizada.

<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.",
  });
});
</script>

Paso 2: Registrar la opción de pago personalizada con EventSystem

Usa eventSystem.dispatchEvent() para emitir el evento custom-payment-option-change con los datos necesarios de la opción de pago:

• id [string]: Obligatorio. El valor debe tener una longitud mayor que 0 y ser válido para usarse como identificador CSS. No uses espacios, puntos y coma ni caracteres especiales que no sean válidos en los selectores CSS. Se recomienda el formato kebab-case. Reemplaza %PAYMENT_OPTION_ID% por el identificador del procesador de pagos personalizado.
• instructions [string]: Opcional. Muestra instrucciones o una descripción cuando el huésped expande la opción de pago personalizada. Usa este valor como texto predeterminado cuando no personalices el texto de cada idioma mediante CSS.
• name [string]: Obligatorio. El valor debe tener una longitud mayor que 0.

Después de guardar los cambios, abre el motor de reservas alojado y prueba el proceso para completar la reserva. El paso de pago puede abrirse en una ventana emergente o modal independiente, en lugar de aparecer integrado en la página de la reserva. En cualquier caso, la opción de pago personalizada debe registrarse mediante EventSystem del motor de reservas.

La siguiente imagen muestra la ventana de pago del motor de reservas alojado con los métodos de pago disponibles después de que el huésped avanza en el proceso para completar la reserva.

Paso 3: Gestionar el evento de creación de reserva y la redirección al proveedor

Cuando un huésped hace 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. El script personalizado del proveedor puede escuchar el evento reservation-created, utilizar los datos de la reserva y redirigir al huésped a la pasarela de pagos de terceros para completar el pago.

eventSystem.addEventListener('reservation-created', (data) = {
  // Your code to execute after a booking is created...
})

Usa EventSystem del motor de reservas para los eventos de registro y de creación de reserva. No dependas únicamente de los detectores de clics específicos de una página, de los clics en botones de acordeón ni de los selectores de la interfaz de usuario para determinar si se seleccionó la opción de pago personalizada.

Expande las siguientes secciones de referencia avanzada si necesitas información sobre la personalización opcional de la etiqueta, las instrucciones o el ícono, o sobre los datos de la reserva.

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

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

// To hide the default SVG icon
[data-id="%PAYMENT_OPTION_ID%-icon"] svg {
  display: none;
}

// To customize the icon by setting it as a background image
[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,>

Probar un procesador de pagos personalizado y solucionar problemas

Usa un flujo de prueba controlado en el motor de reservas cuando tu proveedor de pagos necesite revisar el comportamiento en la consola del navegador o validar su lógica de redirección. El equipo de soporte de Cloudbeds puede ayudarte con la configuración de prueba en Cloudbeds, pero el proveedor de pagos sigue siendo responsable del código de la pasarela de pagos personalizada y de solucionar los problemas del lado del proveedor.

Crear un plan de tarifas de prueba para que el proveedor solucione problemas

El equipo de soporte de Cloudbeds puede guiarte para crear un plan de tarifas temporal con un código promocional para hacer pruebas. Usa una tarifa personalizada de USD 0,50 y habilita el plan de tarifas únicamente para la fuente Motor de reservas. Así, tu proveedor de pagos podrá reproducir el proceso para completar la reserva y revisar la consola del navegador.

Expande el problema que corresponda al comportamiento que observas.

Artículos relacionados

Ahora que conoces la configuración compatible para pagos personalizados y las responsabilidades de cada parte, consulta estos recursos para conocer otras funciones del motor de reservas Plus y la configuración compatible de la experiencia inmersiva:

• Motor de reservas Plus de Cloudbeds: información y activación
• Configurar y personalizar la experiencia inmersiva 2.0 del motor de reservas de Cloudbeds