Páginas de Pagamento Personalizadas

Quando você envia um link de pagamento a um hóspede, a página em que ele cai pode parecer uma extensão da sua marca em vez de uma tela genérica de cobrança. A personalização funciona de duas formas:

• A página de pagamento hospedada -- seu logotipo e suas cores são aplicados na página que o Argonautas serve em app.argonautas.pro/pay/....
• Seu próprio site -- se você tem um site personalizado, ele pode buscar os dados de pagamento via API e renderizar a própria página, com o checkout retornando ao Argonautas.

Os dois modos usam o mesmo link de pagamento, então a escolha é por empresa, não por link.

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

As cores e o logotipo são obtidos em Configurações > Marca. Eles definem:

• A cor dos botões e destaques na página de pagamento hospedada.
• O logotipo do cabeçalho na página de pagamento e nos e-mails de confirmação.
• As cores usadas no portal do proprietário e em qualquer comunicação do portal do hóspede.

Atualize uma vez e a alteração se aplica em todos os lugares onde sua marca aparece.

Passo 2: Adicione uma Folha de Estilos (Opcional)

Se as cores da marca não forem suficientes -- você quer fontes personalizadas, ajustes de layout ou uma identidade visual mais elaborada -- pode hospedar um arquivo CSS no seu próprio site e apontar o Argonautas para ele.

1. Publique uma folha de estilos no seu próprio domínio. O caminho comum é https://seudominio.com/payment-page.css.
2. Abra Configurações > Marca > Site Público.
3. Insira a URL completa em URL do CSS da página de pagamento. A URL precisa estar no mesmo domínio definido como URL do site público -- isso evita estilos acidentais ou maliciosos entre domínios.
4. Salve.

Quando um hóspede abre um link de pagamento, o Argonautas adiciona uma classe branded no body da página e inclui uma tag <link> apontando para o seu CSS. Você pode mirar body.branded na sua folha de estilos para escopo limpo das suas sobrescritas:

body.branded {
  font-family: "Sua Fonte", sans-serif;
}
body.branded .pay-button {
  background: #suacor;
}

Se a URL ficar em branco, nenhuma folha de estilo extra é carregada e a página usa apenas as cores da marca e o logotipo.

Passo 3 (Avançado): Renderizar o Pagamento no seu Próprio Site

Para empresas com um site completo de marketing ou associação, o mesmo link de pagamento pode ser servido a partir da sua URL. O Argonautas expõe uma API JSON em /api/v1/payments/link/<token>/:

• Um GET retorna o resumo da reserva, o valor a pagar, a moeda e o estado atual do pagamento (pronto, sucesso, falhou, expirou).
• Um POST inicia o checkout para esse link com a URL de retorno que você especificar.

Seu site busca os dados, renderiza uma página de pagamento usando seu próprio design system e envia o POST quando o hóspede está pronto para pagar. Do ponto de vista do hóspede, ele nunca sai do seu domínio. A página hospedada em app.argonautas.pro continua disponível como fallback se quiser enviar o mesmo link para lá diretamente.

A API JSON aplica uma lista de URLs de retorno permitidas baseada na sua URL do site público para evitar abusos de redirecionamento aberto. Faça isso com seus desenvolvedores; nossa equipe de integração pode fornecer código de exemplo.

Perguntas Comuns

De onde a página de pagamento pega o logotipo? Do mesmo logotipo que você enviou em Configurações > Marca > Logotipo. Não há um logotipo separado para páginas de pagamento.

Posso ter folhas de estilo diferentes para páginas diferentes? A URL do CSS é por empresa. Para estilizar outras páginas de forma diferente, escope as regras CSS com seletores de classe que só se aplicam à página de pagamento (body.branded é adicionado apenas na página de pagamento).

Minha URL de CSS está sendo rejeitada. Por quê? A URL precisa ter o mesmo hostname que sua URL do site público. Atualize uma das duas para que combinem.

O que acontece se meu host do CSS cair? A página de pagamento ainda carrega com as cores e o logotipo intactos -- a folha de estilos é tratada como aprimoramento progressivo. O checkout em si nunca é bloqueado pela folha de estilos.

Preciso da API JSON para personalizar a página de pagamento? Não. A página hospedada cobre a maioria das necessidades. A API JSON só é necessária se você quiser que o pagamento apareça no seu próprio domínio.

Relacionado

• Usuários e Permissões -- Quem na sua equipe pode mudar as configurações de marca.
• Configurando o Portal do Proprietário -- Outros lugares onde sua marca aparece.