Páginas de Pagamento com a Sua Marca

Quando envia um link de pagamento a um hóspede, a página onde ele chega pode parecer parte da sua própria marca em vez de uma tela de cobrança genérica. A personalização funciona de duas formas:

• A página de pagamento hospedada: a página que a Argonautas Suite exibe para cada link de pagamento mostra o seu logotipo e a cor da marca.
• O seu próprio site: se tiver o seu próprio site, ele pode buscar os detalhes do pagamento através de uma API e exibir a sua própria página de pagamento, com o checkout processado pela Argonautas Suite.

Qual delas os seus hóspedes veem é definido por empresa, não por link. Os links de pagamento são criados com base no URL do Site da sua empresa (Configurações → Empresa) quando um está definido, e no endereço da Argonautas Suite quando não está. Se definir um URL do Site, o seu site precisa conseguir exibir links de pagamento (consulte o Passo 3). Consulte o suporte da Argonautas Suite antes de definir ou alterar isso.

Passo 1: Defina o Seu Logotipo e as Cores da Marca

O seu logotipo e as suas cores vêm da seção Identidade Visual da Empresa em Configurações → Empresa. Ela contém:

• Logotipo da Empresa: clique em Carregar Logotipo ("Recomendado: 400x100px, PNG ou SVG. Máx. 2MB.").
• Ícone da Empresa: clique em Carregar Ícone ("Recomendado: 200x200px, quadrado. Máx. 1MB.").
• Cores da Marca: Primária, Secundária, Destaque e Destaque Profundo, salvas com a barra Salvar Alterações da aba. "Estas cores aparecem em faturas, e-mails de confirmação e páginas voltadas ao hóspede." Deixe uma cor vazia, ou clique em Redefinir para o padrão, para usar o padrão da Argonautas Suite.

Na página de pagamento hospedada:

• O Logotipo da Empresa aparece no topo da página. Sem logotipo, o nome da sua empresa é exibido em seu lugar.
• A cor Primária é usada no cabeçalho colorido, nos valores, no botão Pagar Agora e nos links.
• A linha de contato ("Fale conosco em …") usa o seu E-mail de Contato Principal e o Telefone da Empresa em Configurações → Empresa.

As outras cores e o ícone não são usados na página de pagamento. O seu logotipo também aparece no cabeçalho dos e-mails que a Argonautas Suite envia aos hóspedes.

Passo 2: Adicione uma Folha de Estilos (Opcional)

Se o seu logotipo e a cor da marca não forem suficientes, por exemplo porque deseja fontes personalizadas ou alterações de layout, a página de pagamento pode carregar um arquivo CSS do seu próprio site.

Não há uma configuração para isso no aplicativo da Argonautas Suite. É configurado pelo suporte da Argonautas Suite mediante solicitação:

1. Publique uma folha de estilos no seu próprio site, por exemplo https://yourdomain.com/payment-page.css.
2. Certifique-se de que o URL do Site da sua empresa está definido em Configurações → Empresa. A folha de estilos deve estar exatamente no mesmo domínio do seu URL do Site. Por exemplo, uma folha de estilos em www.yourdomain.com é rejeitada se o seu URL do Site for https://yourdomain.com. Isso impede que as páginas sejam estilizadas a partir de um site que você não controla.
3. Envie o endereço completo da folha de estilos ao suporte da Argonautas Suite e solicite que ela seja adicionada como a folha de estilos da sua página de pagamento.

Uma vez configurada, cada página de pagamento adiciona uma classe branded ao corpo da página e carrega a sua folha de estilos. Coloque body.branded antes das suas regras para que elas afetem apenas esta página:

body.branded {
  font-family: "Your Font", sans-serif;
}
body.branded .pay-btn {
  background: #yourcolor;
}

O botão Pagar Agora tem a classe pay-btn. Sem uma folha de estilos, nenhum CSS extra é carregado, e a página usa apenas o seu logotipo e a cor Primária.

Passo 3 (Avançado): Exiba a Página de Pagamento no Seu Próprio Site

Se você administra o seu próprio site, ele pode exibir a página de pagamento por conta própria, para que o hóspede nunca saia do seu domínio. A Argonautas Suite fornece uma API JSON em /api/v1/payments/link/<token>/:

• Um GET retorna o estado do link de pagamento: ready, already_paid, cancelled, expired, no_payment_method ou invalid. Quando o link está ready, a resposta também contém o resumo da reserva (código de confirmação, primeiro nome do hóspede, propriedade, datas), a moeda, o valor devido, qualquer taxa de cartão e o total. Toda resposta também inclui o nome, o e-mail e o telefone da sua empresa.
• Um POST inicia o checkout para esse link. Ele pode incluir um return_url para enviar o hóspede de volta após o pagamento.

O seu site busca os dados, exibe a página de pagamento com o seu próprio design e envia o POST quando o hóspede estiver pronto para pagar. Por segurança, um return_url deve estar no mesmo domínio do seu URL do Site, ou a solicitação é recusada.

Os links de pagamento apontam para <o seu URL do Site>/pay/<token>/, portanto o seu site precisa servir esse caminho. Configure isso com os seus desenvolvedores web e o suporte da Argonautas Suite.

Perguntas Frequentes

De onde a página de pagamento obtém o meu logotipo? Do Logotipo da Empresa na seção Identidade Visual da Empresa em Configurações → Empresa. Não há um logotipo separado para páginas de pagamento.

Posso alterar a folha de estilos da página de pagamento sozinho? Não. O endereço da folha de estilos é definido pelo suporte da Argonautas Suite. Você pode alterar o conteúdo da folha de estilos no seu próprio site a qualquer momento, e a próxima página de pagamento que abrir usará a nova versão.

Posso ter folhas de estilos diferentes para páginas diferentes? Não, há uma folha de estilos por empresa, e ela só é carregada na página de pagamento. Coloque body.branded antes das suas regras para evitar que elas afetem qualquer outra coisa que use o mesmo arquivo.

Por que o endereço da minha folha de estilos foi rejeitado? Ele deve estar exatamente no mesmo domínio do seu URL do Site. Hospede a folha de estilos nesse domínio ou consulte o suporte sobre como alterar o endereço.

O que acontece se o meu site estiver fora do ar? A página de pagamento ainda carrega com o seu logotipo e a cor da marca, e o hóspede ainda pode pagar. Apenas o seu estilo extra estará ausente. A folha de estilos nunca bloqueia o checkout.

Por que a página diz "Pagamento com Cartão Indisponível"? A página de pagamento processa pagamentos com cartão através da PowerTranz, e a propriedade não tem um conector PowerTranz. A página exibe o seu e-mail de contato para que o hóspede possa perguntar sobre outras opções de pagamento. Consulte Conectores de Pagamento.

Preciso da API JSON para personalizar a página de pagamento? Não. A página hospedada atende à maioria das necessidades. Você só precisa da API se quiser que a página de pagamento apareça no seu próprio site.

Relacionado

• Guia de Configurações: Identidade Visual da Empresa: Como carregar o seu logotipo e definir as cores da marca.
• Usuários e Permissões: Quem na sua equipe pode alterar configurações.
• Configuração do Portal do Proprietário: Outros lugares onde a sua identidade visual aparece.