Motor de Reservas Plus: Suporte a vales-presente e gateway de pagamento personalizado

1. Vá para a página de Configuraçõesem seu menu da Contae clique na seção do Motor de Reservas;
2. Clique em Personalizar;
3. Adicione o código JavaScript personalizado no campo JavaScript;
4. Clique em Salvar.

O códigoJavaScript personalizado deve se inscrever no evento on-booking-engine-ready. Esse evento é disparado quando o Motor de Reservas está pronto para ativar e monitorar eventos.

O script também deve disparar o evento custom-payment-option-change para notificar o Motor de Reservas que uma opção de pagamento personalizada está disponível.

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

  eventSystem.dispatchEvent("custom-payment-option-change", {
    id: "%PAYMENT_OPTION_ID%",
    instructions: "Seu texto padrão para as instruções vai aqui.",
    name: "Seu texto padrão para a etiqueta vai aqui.",
  });
});
</script>

Use eventSystem.dispatchEvent() para disparar o evento custom-payment-option-change com a seguinte carga:

• id [string]:Obrigatório. Deve ter comprimento maior que 0 e ser válido para uso como um id CSS. Não use espaços, pontos e vírgulas ou caracteres especiais que não sejam válidos em seletores CSS. O formato sugerido é kebab-case. Substitua %PAYMENT_OPTION_ID% pelo id do processador de pagamento personalizado. Esse id também é usado pelos seletores CSS para personalizar a interface.
• instructions [string]:Opcional. Exibe instruções ou uma descrição quando o hóspede expande a opção de pagamento personalizada (expandida como um acordeão). Esse valor precisa ser definido se a propriedade quiser mostrar esse texto e servirá como fallback caso o texto específico do idioma não seja personalizado via CSS.
• name [string]:Obrigatório. Deve ter comprimento maior que 0.

• Você pode especificar textos baseados no idioma para as etiquetas:

html[lang="%LANG%"] [data-id="%PAYMENT_OPTION_ID%-name"]::before {
  content: "Seu texto específico para o idioma da etiqueta vai aqui.";
}

• Instruções também podem ser configuradas com base no idioma:

html[lang="%LANG%"] [data-id="%PAYMENT_OPTION_ID%-instructions"]::before {
  content: "Seu texto específico para o idioma das instruções vai aqui.";
}

• E você também pode adicionar um logotipo/ícone personalizado:

// Para ocultar o ícone SVG padrão
[data-id="%PAYMENT_OPTION_ID%-icon"] svg {
  display: none;
}

// Para personalizar o ícone definindo-o como uma imagem de fundo
[data-id="%PAYMENT_OPTION_ID%-icon"] {
  background-image: url(PAYMENT_OPTION_ICON_URL);
  background-size: cover;
  background-position: center;
  width: 40px;
  height: 40px;
}

• Neste ponto, você adicionou e personalizou a opção de pagamento para usar a Opção de Pagamento Personalizada. Quando um hóspede fizer uma reserva usando a Opção de Pagamento Personalizada, a reserva será criada no PMS da Cloudbeds com uma forma de pagamento e-banking, e nenhum pagamento será coletado pela Cloudbeds.
• Usando o EventSystem, você pode escutar o evento reservation-createdpara obter os dados sobre a reserva criada e redirecionar o usuário para o processador de pagamentos para completar o pagamento (para integrações com processadores de pagamentos de terceiros).

eventSystem.addEventListener('reservation-created', (data) = {
  // Seu código para executar após a criação da reserva...
})

• Os dados expostos pelo evento reservation-created têm a seguinte estrutura:

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;
};

Verifique o seguinte:

• Confirme que a opção Transferência Bancária esteja habilitada no PMS da Cloudbeds.
• Confirme que o. código JavaScript personalizado foi adicionado na guia "Personalizar" do Motor de Reservas.
• Confirme que a carga do evento custom-payment-option-change inclui uma id e nome válidos.
• Confirme que a id não contém espaços, ponto e vírgula ou caracteres inválidos para seletor CSS.
• Confirme que apenas um processador de pagamentos personalizado está configurado.

Se a carga do evento não atender a todos os requisitos, a opção de pagamento personalizada não será registrada, e a opção Transferência Bancária continuará a ser exibida.

Verifique o seguinte:

• Confirme que o script personalizado escuta o evento reservation-created.
• Confirme que o script não depende apenas de monitores de clique específicos da página, cliques em botões de acordeão ou seletores da interface.
• Confirme que a URL do processador de pagamentos Terceiro e os parâmetros de redirecionamento são válidos.

A Cloudbeds pode confirmar o comportamento esperado do Motor de Reservas. Alterações no código JavaScript personalizado devem ser feitas pelo desenvolvedor web da propriedade, revendedor ou parceiro de integração.