A Ventrata oferece uma solução de checkout simplificada que permite aos clientes
adicionar produtos selecionados a um carrinho de compras virtual e a seguir uma série de passos para concluir a compra.
A solução de checkout da Ventrata suporta dois modos:
Pop-up - abre numa nova janela sobre o seu site
Incorporado - exibe o checkout diretamente na página
Pop-up | Incorporado |
| 
|
Estrutura de Configuração
O checkout da Ventrata apresenta um fluxo de personalização sofisticado. Tem uma configuração global (abrangendo toda a apiKey) armazenada na nuvem, que serve como modelo para todos os checkouts futuros. Este modelo inclui configurações como cores, configuração do Google Analytics e mais, permitindo uma integração simples sem ajustes adicionais. Pode gerir estas configurações através do painel Ventrata ou via pedidos de suporte específicos do cliente.
A estrutura de configuração segue uma hierarquia em camadas, onde as configurações podem ser substituídas por configurações mais específicas. A ordem é a seguinte:
Cloud > Script Tag > Elemento especifico da página (por exemplo, botão, âncora)
Camada | Descrição |
| o modelo de configuração abrangente da apiKey para todos os checkouts futuros |
| o tag |
| Elementos individuais da página, como botões ou âncoras, podem acionar o checkout como um pop-up e carregar configurações como idioma, moeda e opções; essas configurações são especificadas no atributo
📗 DICA
|
📘 EXEMPLO
Imagine que a configuração da nuvem especifique uma cor de botão de #AE8173. Se uma página contiver a tag <script> com a cor de botão #820857, os pop-ups do checkout nessa página utilizarão essa cor em vez da definida na nuvem por defeito.
Agora, suponha que haja três botões pop-up nesta página, todos configurados com #820857. Se quiser personalizar apenas o terceiro botão com uma cor única, como #6FD316, pode especificar essa cor no atributo data-config para esse botão.
Consequentemente:
Os dois primeiros botões manterão a cor
#820857definida na tag<script>.O terceiro botão exibirá
#6FD316.Se remover a configuração de cor da tag
<script>, os dois primeiros botões voltarão para a cor da nuvem#AE8173, enquanto o terceiro botão permanece inalterado.
Integre o Ventrata Checkout
Abaixo estão os passos básicos para integrar o Ventrata Checkout, que, por defeito, opera no modo pop-up. Embora a maioria das configurações se apliquem a ambos os modos pop-up e incorporado, se você optar por implementar o modo incorporado, siga os passos para integrar o checkout no modo incorporado.
📒 NOTA
Cada camada do fluxo de configuração é opcional com exceção da apiKey. É necessária uma apiKey em pelo menos um elemento da página. Se não souber onde encontrá-la, consulte Localizar a API key para Web Checkout e MMB.
Adicionar <script> tag
Para integrar o checkout Ventrata, adicione a seguinte tag <script> às páginas HTML do seu site.
Produção
O script carregará a configuração da sua conta específica com o gateway de produção, portanto todos os pagamentos e pedidos serão registados como se fossem feitos por clientes.
<script src="https://cdn.checkout.ventrata.com/v3/production/ventrata-checkout.min.js" type="module" data-config='{"apiKey":"<YOUR_API_TOKEN>", "env": "live" }'></script>
Teste
O script carregará a configuração da sua conta específica num ambiente de teste.
<script src="https://cdn.checkout.ventrata.com/v3/production/ventrata-checkout.min.js" type="module" data-config='{"apiKey":"<YOUR_API_TOKEN>", "env": "test" }'></script>Atributo | Descrição |
| substitua |
|
📗 DICA Se o atributo "env" não for especificado na tag
|
O que é o atributo data-config
O atributo data-config na tag <script> ou num elemento (como um botão) é usado para passar configurações para o script de checkout da Ventrata. Ele ajuda a definir como o checkout se comporta, qual a chave API (ou seja, qual checkout) deve utilizar e em qual ambiente deve operar.
Analisando o atributo data-config
Analisando o atributo data-config
Aqui está um exemplo de script de checkout:
<script src="https://cdn.checkout.ventrata.com/v3/production/ventrata-checkout.min.js" type="module" data-config='{"apiKey":"<YOUR_API_TOKEN>", "env": "test" }'></script> <button ventrata-checkout data-config='{"productID": "<SPECIFIC_PRODUCT_ID"}'>
Click on me
</button>O script (
ventrata-checkout.min.js) carrega a funcionalidade de checkout da Ventrata.O atributo
data-configfornece a configuração necessária.O atributo botão (
<button ventrata-checkout>) atua como um acionador para o fluxo de checkout.
📒 NOTA
O elemento (um botão no exemplo acima), que aciona ou exibe o checkout, tem o seu próprio data-config. Use este data-config para definir que produtos serão exibidos no widget de checkout. Se não houver IDs de produtos, a lista completa de produtos do checkout será exibida.
Quando um usuário clica no botão,
o script de checkout da Ventrata lê o
data-config.Utiliza a chave API para buscar os produtos disponíveis.
Inicia o processo de checkout no ambiente especificado (
testneste caso).
Filtrar produtos
O volume e a complexidade dos produtos podem impactar significativamente o desempenho do checkout. Pode querer utilizar parâmetros específicos para filtrar que produtos aparecem no widget de checkout.
Para isso, adicione o objeto "products" após a sua "apiKey" na tag <script>. Em seguida, especifique o atributo usado para filtrar a lista de produtos no checkout.
📗 DICA
Saiba como implementar filtros de lista de produtos em combinação com a funcionalidade CalendarFirst aqui.
Exibir o checkout ao clicar no elemento ou ao disparar um evento
Pode configurar o checkout para exibir de duas maneiras:
Análise estática
Modo Pop-up: Use o atributo
ventrata-checkoutno elemento HTML.
Modo incorporado: Use o atributo
ventrata-embedded-widgetno HTML.
Execução dinâmica
Utilize a função global JavaScript
Ventrata.
📗 DICA
Para mais informações, consulte este artigo.
Entradas de configuração suportadas
As entradas de configuração são definições e parâmetros que determinam como o checkout opera e se comporta.
📗 DICA
Saiba mais na nossa lista de entradas de configuração suportadas.
Lista de funcionalidades do checkout
A Ventrata oferece funcionalidades específicas projetadas para facilitar o processo de compra e melhorar a experiência do usuário.
📗 DICA
Saiba mais na nossa lista de funcionalidades do checkout.
Lista de funcionalidades dos cartões-presente
Os cartões-presente normalmente têm um valor armazenado que pode ser gasto em várias transações até que o saldo seja esgotado, por exemplo, para uma experiência e/ou um item da loja de presentes.
Configure as propriedades básicas dos seus cartões-presente e aproveite os recursos que permitem oferecer cartões resgatáveis para qualquer produto ou vinculados a um produto pré-selecionado específico.
📗 DICA
Saiba mais no nosso artigo sobre os cartões-presente.
Lista de funcionalidades do seletor de opções
A funcionalidade Seletor de opções, juntamente com os seus sub-recursos, permite personalizar como as opções de produto e os idiomas dos comentários da viagem são apresentados. Com várias configurações, pode criar um esquema altamente personalizado.
📗 DICA
Saiba mais no nosso artigo sobre o seletor de opções recurso.
Temas de cor
O checkout Ventrata oferece dois modos básicos de cor: CLARO e ESCURO. Pode personalizar estes modos usando o atributo data-config no seu checkout.
Além disso, elementos específicos do seu checkout web podem ser configurados como um objeto JavaScript para personalização adicional.
📗 DICA
Saiba mais no nosso artigo sobre temas de cor.
Reserva múltipla
A reserva múltipla é um fluxo de aplicação onde os seus utilizadores podem adicionar vários produtos ao carrinho. Permite-lhe ter um fluxo de carrinho totalmente gerido através da nossa aplicação ou apenas fornecer uma ação de edição para reservas já criadas dentro da encomenda.
📗 DICA
Para uma descrição completa deste fluxo, consulte Reserva múltipla.
Gerir a minha reserva (Portal de check-in)
O atributo Check-in, também conhecido como Gerir a minha reserva (MMB), o portal que permite aos clientes reagendar, cancelar ou atualizar suas reservas, bem como resgatar vales de revendedores.
📗 DICA
Se pretender implementar uma página de check-in (Manage My Booking) no seu website, consulte Como implementar e utilizar o novo portal Manage My Booking (MMB).
Eventos personalizados
Integre a solução de checkout da Ventrata com aplicações externas usando eventos personalizados.
📗 DICA
Para uma lista completa de eventos personalizados, consulte este artigo.