Suporte para cartões presente e processador de pagamentos personalizado no Motor de Reservas Plus

1. Vá para a página Configurações do seu Menu de Conta e clique na seção Motor de Reservas;
2. Clique em Personalização;
3. No campo de Código JavaScript, inscreva-se no evento "on-booking-engine-ready" (que será enviado quando o Motor de Reservas estiver pronto para começar a acionar e detectar eventos) e notifique o Motor de Reservas sobre o uso de uma opção de pagamento personalizada usando o EventSystem:
4. Clique em Salvar.

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 o rótulo vai aqui.",
});
});

• Use eventStytem.dispatch() para enviar o evento "custom-payment-option-change" com o seguinte conteúdo:

  • id [string] deve ser definida com um comprimento maior que 0 e válida para usar como um id CSS (sem espaços, sem ponto e vírgula, etc.). Formato de id sugerido: kebab-case. Substitua %PAYMENT_OPTION_ID% pela id que deseja usar para seu processador de pagamento personalizado, esta id é o valor a ser usado pelos seletores CSS para personalizar a interface do usuário.

  • instructions [string] opcional - para mostrar instruções (ou uma descrição) quando o usuário clica na opção de pagamento personalizada (expandida como um acordeão). Este valor precisa ser definido se a propriedade deseja mostrar esse texto e atuará como um fallback se não for personalizado com CSS para idiomas específicos.

  • name [string] deve ser definido com um comprimento maior que 0.

• Importante: Se o conteúdo do evento não atender a todos os requisitos, a Opção de Pagamento Personalizada não será registrada e a opção de Transferência Bancária ainda será exibida. Salve as alterações no myfrontdesk e acesse o Motor de Reservas, você verá seu processador de pagamento personalizado como uma opção de pagamento na página de Pagamento e mostrará um ícone de cartão padrão. Você pode adicionar CSS personalizado para personalizar a aparência da Opção de Pagamento Personalizada adicionando meta tags personalizadas no PMS da Cloudbeds.

• Você pode especificar textos baseados no idioma para os rótulos:

html[lang="%LANG%"] [data-id="%PAYMENT_OPTION_ID%-name"]::before {
content: "Seu texto específico do idioma para o rótulo 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 do idioma para as 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 faz uma reserva usando a Opção de Pagamento Personalizada, a reserva será criada no myfrontdesk com um método de pagamento por e-banking, e nenhum pagamento será coletado por nós.
• Usando o EventSystem, você pode capturar o evento reservation-created para obter os dados sobre a reserva criada e redirecionar o usuário para o processador de pagamento a fim de completar o pagamento (para integrações com processadores de pagamento de terceiros).

eventSystem.addEventListener('reservation-created', (data) = {
// Seu código para executar após uma reserva ser criada...
})

• Os dados expostos pelo evento "purchase-made" possuem 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<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,>