Cómo añadir su propia pasarela de pagos al motor de reservas de Cloudbeds

Este artículo explica cómo añadir la opción para utilizar pasarelas de pago a su motor de reservas de Cloudbeds.

En caso de que la pasarela que usted utiliza no se encuentre dentro de la lista de pasarelas de pagos que aceptamos actualmente, este artículo le mostrará cómo agregar su propia pasarela de pagos a la página de su motor de reservas.

Antes de empezar
  • Una vez que se complete la reserva con su método de pago/pasarela personalizada, la última página de finalización de la reserva y el correo electrónico de confirmación mostrarán Transferencia bancaria como método de pago. Esto no se puede modificar de ninguna manera.
  • Dado que la pasarela de pagos personalizada no está integrada ni es compatible con el PMS de Cloudbeds, la confirmación de pago y la transacción no se actualizarán ni publicarán automáticamente en el Resumen de cuenta de la reserva. La propiedad deberá registrar manualmente el pago de la reserva.
  • La siguiente solución es para la pasarela de pago externa/personalizada que no está conectada al sistema PMS de Cloudbeds, lo que significa que no hay forma de confirmar el pago realizado. El personal de su alojamiento deberá confirmar esta información manualmente. Los huéspedes deberán realizar el pago en el enlace que aparecerá después de hacer clic en la imagen; y una vez realizado este pago, deberán salir de la ventana de pago y hacer clic en el botón Confirmar reserva para continuar.
Paso 1. Configure la opción de transferencias bancarias en el PMS de Cloudbeds

La pasarela de pago que se utilizará no figura en la sección de Tarjetas de crédito. Esta solución le mostrará cómo adaptar la opción de transferencia bancaria para redirigir a sus huéspedes a la pasarela de pagos.

Siga los pasos en este artículo.

1.1 Ingrese los datos de la pasarela de pagos
  1. Una vez que la opción Transferencia bancaria esté configurada correctamente en su PMS de Cloudbeds, haga clic en el icono de imagen dentro del editor de texto.
  2. Cargue la imagen de la pasarela de pagos en alguna plataforma para imágenes en línea. De esta forma, se podrá hacer clic sobre ella en el motor de reservas. Obtenga más información más aquí.
  3. En la ventana emergente, pegue el enlace que generó en el paso anterior.
  4. Haga clic en Insertar imagen.
  1. La imagen se mostrará en el campo de texto.
  2. Haga clic en Guardar en la parte inferior de la página y continúe con el siguiente paso.
1.2 Configure su política de depósito

El motor de reservas  solo mostrará la opción de transferencias bancarias si la política de depósito está configurada para cobrar cierto monto por adelantado.

Para configurar una política de depósito, siga las instrucciones que se detallan en esta guía.

Paso 2. Agregue los códigos de configuración a su motor de reservas en el PMS de Cloudbeds

Antes de acceder a la página de personalización, abra su pasarela de pagos y copie la URL (enlace) de la página de pago a la que se debe dirigir a los huéspedes. Esta información será necesaria para el pie de página personalizado de la página de Reservas de su hotel.

2.1 Personalice el pie de página de su motor de reservas
  1. En el menú de Configuración, vaya a Motor de reservas.
  2. Haga clic en Personalizar.
  3. Copie y pegue el siguiente código y cambie el texto ADD_YOUR_PAYMENT_GATEWAY_URL_HERE por la URL de la página de pago a la que desea redirigir a sus huéspedes.
<!-- ----------------  ---------------- Pop-up Payment Website  ----------------  ---------------- -->
<div id="popupmodal" class="modal fade" tabindex="-1" data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">X</button>
        <h2 class="modal-title">Make your payment and return to Complete Reservation</h2>
      </div>
      <div class="modal-body">
      <iframe src="ADD_YOUR_PAYMENT_GATEWAY_URL_HERE" width="100%" height="100%" scrolling="yes" class="iframe-class" frameborder="0"></iframe>
      </div>
      <div class="modal-footer">
      </div>
    </div>
  </div>
</div>  
<!-- ----------------  ---------------- Pop-up Payment Website Ends here ----------------  ---------------- -->
<style>
.modal-open .modal {
z-index: 99999;
margin: 2%;
}
@media (min-width: 767px) {
.modal-body { height: 500px; width: 500px;}
.modal-dialog { width: 500px; }
div.row.margin-top-10 > div > img { width: 100%; cursor: pointer; }
}
@media (max-width: 450px) {
.modal-body { height: 500px; width: 350px;}
.modal-dialog { width: 100%; }
div.row.margin-top-10 > div > img { width: 100%; cursor: pointer; }
}
</style>
<script> 
	 $('div.row.margin-top-10 > div > img').on('click', function(){
         $('#popupmodal').modal('show');
     });  
 </script>

Ejemplo

2.2 Personalice el encabezado de su motor de reservas

Copie y pegue este código en la sección del encabezado:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Click to copy
2.3 Sección de metaetiquetas personalizadas
  1. Pegue este código en el primer recuadro.
  2. Puede personalizar el texto resaltado con la información del método de pago de su propiedad.
  3. Guarde los cambios.
<style>
label[for=ebanking] > a {font-size: 0;}
label[for=ebanking] > a:after {content: 'Click on image to Pay Advance Amount and return to Complete Reservation '; font-size: 20px;}
div.payment_method div.creditcard_info.choose_bank div.row.ebanking-default-instruction div {
font-size: 0;
}
div.payment_method div.creditcard_info.choose_bank div.row.ebanking-default-instruction div:after {
content: 'We use Africa\'s leading online payment processor, Direct Pay Online. The payments made are safe and secure, in compliance to PCI DSS. Upon completion of payment, return to click on COMPLETE RESERVATION, submitting for confirmation';
font-size: 13px;
}
</style>
  • Si hay un apóstrofe en su texto (por ejemplo, antes de la «s» en Africa's, siempre agregue una barra inclinada hacia atrás (\) antes del apóstrofe para que el código pueda saltarse el apóstrofe y realizar los cambios.
  1. ¡Su pasarela de pagos ya está lista! El huésped podrá hacer clic en la imagen de su pasarela de pagos después de completar los detalles de la reserva y será redirigido para completar el pago en la URL configurada.

Si el huésped selecciona la opción de tarjeta de crédito a la izquierda, la información de la tarjeta de crédito se guardará y se mostrarán en la pestaña de la tarjeta de crédito de reserva como de costumbre y la propiedad deberá hacer el cobro de forma manual.

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 2 de 3

Comentarios

0 comentarios

Inicie sesión para dejar un comentario.