Página de pagamento

Na página de pagamento, o comprador paga o pedido: escolhe a forma de pagamento, preenche os dados do pagador e recebe a confirmação. Por padrão, a página tem o visual do serviço Invoicebox, mas pode ganhar a sua marca — das cores até cabeçalho e rodapé próprios. A configuração é feita pela Invoicebox a seu pedido.

Como o comprador chega à página

O comprador chega à página de pagamento por um link:

da loja — depois de fechar o pedido, o site ou o aplicativo da loja redireciona o comprador para o pagamento;
do e-mail com a fatura — o link leva à página do pedido específico;
da conta pessoal Invoicebox — por uma fatura aguardando pagamento.

Depois do pagamento, o comprador volta para a loja. Você informa os endereços de retorno para pagamento bem-sucedido e malsucedido na criação do pedido.

Onde a página funciona

A página é a mesma em todos os dispositivos: desktop, tablet e smartphone recebem o mesmo layout, ajustado à largura da tela. Além de abrir no navegador, a página pode ser incorporada:

em um iframe — direto no seu site;
em uma WebView — dentro de um aplicativo móvel.

A incorporação tem limitações:

No iframe, a página fica no próprio domínio, então o navegador do comprador precisa permitir cookies de terceiros. Sem eles, o login no perfil e os dados salvos do pagador não funcionam; o pagamento em si funciona mesmo sem login.
Os dados do cartão não são digitados na página de pagamento, e sim no lado do banco: no momento do pagamento há um redirecionamento para a página do banco e de volta. O seu site ou aplicativo não deve bloquear esses redirecionamentos.
O pagamento via SBP abre o aplicativo do banco por um link externo. A WebView precisa deixar esses links saírem para fora.

Observação

Se você pretende abrir a página em iframe ou WebView, avise o gerente Invoicebox: é melhor combinar com antecedência os domínios e os cenários de incorporação.

O que pode ser personalizado

Logotipo — o seu logotipo no cabeçalho da página, no lugar do logotipo da Invoicebox.
Cores — texto principal, botões e o texto neles, links, ícones das formas de pagamento, fundo dos cartões e da página inteira, cores dos estados: sucesso, erro, aviso. Os tons para foco do mouse e clique são calculados automaticamente.
Imagens — a capa abaixo do cabeçalho e a imagem de fundo da página inteira. Os requisitos dos arquivos estão na seção abaixo.
Cabeçalho e rodapé — modelo padrão da Invoicebox, variante neutra sem logotipo ou componentes próprios no estilo do seu site.
Animação de carregamento — uma tela de espera personalizada enquanto o pedido é preparado: por exemplo, um avião para passagens aéreas ou um trem para serviços ferroviários. Junto com essa tela muda também a terminologia: o «Pedido» na página vira «Reserva».
Blocos promocionais — os banners de serviços adicionais da Invoicebox nas telas após o pagamento podem ser desativados.
Botão de pagamento — um estilo à parte: cor e peso do texto próprios.

Dica

Muitas vezes bastam o logotipo e duas ou três cores da sua marca para a página de pagamento parecer uma extensão do seu site. Cabeçalho e rodapé próprios vêm como segundo passo.

Sem retorno à loja após o pagamento garantido

No pagamento garantido, o sistema bloqueia o valor do pedido no cartão ou no fundo de garantia, e a fatura é paga depois. Por padrão, após esse pagamento o comprador permanece na página de pagamento: vê que o valor está bloqueado, o prazo de pagamento da fatura e o botão «Voltar», que abre a loja em uma nova aba. Assim a fatura fica diante dos olhos até o pagamento.

A seu pedido, é possível ativar o retorno automático: a pessoa física vai direto para o seu site; a organização, depois de uma janela lembrando que a fatura foi enviada por e-mail.

Requisitos das imagens

Capa

A capa ocupa uma faixa em toda a largura da janela, com 154 pixels de altura, abaixo do cabeçalho da página. Prepare dois arquivos:

para telas largas (mais de 1400 pixels) — a imagem é centralizada;
para telas médias (até 1400 pixels) — a imagem é alinhada à borda esquerda.

Regras de preparação:

A imagem é exibida no tamanho real, sem redimensionamento, e a largura que faltar é preenchida por repetição. Prepare uma imagem com exatamente 154 pixels de altura e largura com folga: cerca de 2560 pixels para a versão larga e 1400 para a média. Um padrão sem emendas, feito para repetição, também funciona.
Os 80 pixels superiores da capa ficam cobertos pelo cabeçalho: logotipo à esquerda, seletor de idioma e botão «Entrar» à direita. Não coloque elementos de destaque perto da borda superior, principalmente no canto superior direito: ali eles ficariam embaixo dos elementos do cabeçalho.
Embaixo, no centro, o cartão do pedido avança 50 pixels sobre a capa. Ficam totalmente livres apenas as áreas à esquerda e à direita dele e uma faixa estreita no centro.
Em smartphones (telas de até 767 pixels), a capa não é exibida. Não coloque nela informações essenciais para o comprador: o público mobile não vai vê-las.
Na versão para telas médias, mantenha os destaques perto da borda esquerda: quando a janela estreita, a parte direita da imagem sai da tela.

Fundo da página

A imagem de fundo se estende por toda a janela, sem repetição, e é centralizada. Basta uma imagem em alta resolução; confira se os cartões do formulário e o texto continuam legíveis sobre ela.

Cabeçalho e rodapé próprios

O cabeçalho e o rodapé podem ser feitos no estilo do seu site. Os componentes são desenvolvidos pela Invoicebox a partir dos seus materiais; combine os prazos com o gerente.

O que preparar:

o logotipo em formato vetorial;
as cores da sua marca e, se houver, os layouts do cabeçalho e do rodapé;
o conteúdo do rodapé: telefone do suporte, links para redes sociais e aplicativos móveis, endereço da sua política de privacidade.

A estrutura do cabeçalho é a mesma em todos os temas: à esquerda o seu logotipo, à direita o seletor de idioma e o botão de login no perfil. Não dá para remover o seletor e o login — o comprador precisa deles em qualquer tema. Acréscimos são possíveis: por exemplo, o seu telefone na versão mobile.

O rodapé tem menos restrições: você define o próprio layout e o preenche com seus contatos, links para aplicativos e documentos.

Importante

Em qualquer rodapé é obrigatório o bloco da Invoicebox: o logotipo da Invoicebox, o texto informando que os pagamentos são recebidos pela ООО «ОРЦ» como pessoa autorizada pelo fornecedor, e os links «Oferta» e «Suporte». Sem eles não é possível receber pagamentos, por isso ficam sempre no layout.

Campos adicionais para o comprador

Ao formulário de pedido para pessoas jurídicas e autônomos (ИП) podem ser adicionados campos que não existem no conjunto padrão. Os valores preenchidos ficam salvos no pedido e disponíveis para você.

Um campo pode ser:

de texto — com limite de tamanho;
numérico;
uma lista — o comprador escolhe entre valores predefinidos; a lista também pode ser agrupada, com seções internas.

Qualquer campo pode ser obrigatório — sem ele o pedido não é enviado.

Por exemplo:

«Tipo de negócio» — a organização escolhe o próprio perfil na lista, e você já sabe com quem está lidando;
endereço de entrega — se a organização tem endereços de entrega salvos na Invoicebox, o comprador escolhe o endereço certo na lista, direto na página de pagamento.

Como ativar as configurações

Escreva para o seu gerente Invoicebox ou para o suporte: c-support@invoicebox.ru, +7 (812) 448-08-01 (das 9h às 21h, horário de Moscou). Descreva o que quer mudar e anexe os materiais: logotipo, cores, imagens. Se você ainda não recebe pagamentos pela Invoicebox, comece pela seção «Conexão e aceitação de pagamentos».