Ir para o conteúdo

Comprovantes

Os comprovantes possuem duas categorias, são elas: gráficos e textuais. Abordaremos aqui como criar comprovantes personalizados, alterar tamanho, cor, tipo de fontes, formatação, alinhamento de textos, inclusão de imagens que podem ser usadas e quais são as tags da paystore disponíveis que possibilitam a construção de um comprovante dinâmicos.

Comprovante Gráfico

O comprovante gráfico é construído a partir de um projeto do tipo "skin" para criar um projeto dessa natureza vá em File->New->Project... e selecione o project type como skin. Na pasta "res/css" do seu projeto, você encontrará 4 arquivos referentes ao comprovante gráfico, são eles:

  • voucher_1.jcss - layout que representa a via do estabelecimento do comprovante.

  • voucher_2.jcss - layout que representa a via do cliente do comprovante.

  • voucher_c_1.jcss - layout que representa a via de Estorno do estabelecimento do comprovante.

  • voucher_c_2.jcss - layout que representa a via de Estorno do cliente do comprovante.

Os arquivos de layout estão em formato JSON neles estão as definições de cada componente que é suportado pela solução. Segue lista de componentes que são suportados no layout do comprovante, para mais informações sobre cada componente consulta o menu Referências[1]

COMPONENTES DESCRIÇÃO
frame Sessão onde é declarado o frame que representa a aréa do comprovante.
image Sessão onde são declaradas as imagens que serão utilizadas pelo comprovante.
label Sessão onde são declarados os textos que serão utilizados pelo comprovante.

Os componentes declarados precisam ter nomes únicos, mesmo para arquivos diferentes, para cada componente é possível definir propriedades como:

  • area - Permite definir coordenadas de posicionamento (x, y) como também altura(h) e largura(w), que pode ser de até 384px.
  • font - Permite definir o nome e a cor da fonte que será utilizada é possivel utilizar qualquer fonte instalada na sua máquina, a fonte escolhida precisar ser gerada através do utilitário Phonts.
  • align - Permite definir o alinhamento do componente na tela, as opções são:
ALINHAMENTO DESCRIÇÃO
center Alinha o componente no centro.
left Alinha o componente à esquerda.
right Alinha o componente à direita.
  • format - É possível adicionar formatações para o componente "label", muito útil quando se quer que o texto seja em caixa alta, baixa ou adicionar mascaras a informações como datas, cpf, cnpj, telefones, cartões de créditos etc. Veja abaixo as formatações suportadas:
FORMATAÇÃO DESCRIÇÃO
currency adicionar formatação de valor monetário ao texto.
datetime adicionar formatação de data de acordo com a mascara definida.
card adicionar formatação ao número do cartão, alguns números serão inibidos com o caractere "*".
card2 adicionar formatação ao número do cartão, os números serão inibidos com o caractere "*", exibindo apenas os 4 últimos dígitos.
lower adicionar formatação de caixa baixa ao texto.
upper adicionar formatação de caixa alta ao texto.
camel adicionar formatação de caixa alta para primeira letra de cada palavra no texto.
lpadd adicionar formatação preenchendo os espaços em branco com um caractere à esquerda definido na formatação.
rpadd adicionar formatação preenchendo os espaços em branco com um caractere à direita definido na formatação.

Veja alguns exemplos:

"label": {
"v1.payment.datetime": {
"area": {"x": 90,"y": 45,"w": 290,"h": 30},
"font": {"name": "roboto_light.18.pft","color": 0},
"align": ["right","vertical"],
"text": "{payment.datetime}",
"format": "datetime",
"mask": "DAY, DD/MM/YYYY hh:mm"
},
"v1.ec.nationalId": {
"area": {"x": 5,"y": 130,"w": 370,"h": 60},
"font": {"name": "roboto_light.16.pft","color": 0},
"align": ["left","vertical"],
"text": ["CNPJ: {ec.nationalId}",
"CPF: {ec.nationalId}"],
"mask": ["NN.NNN.NNN/NNNN-NN", "NNN.NNN.NNN-NN"]
},
"v1.password": {
"backGround": {"color": 0 },
"area": {"x": 5,"y": 200,"w": 80,"h": 14},
"font": {"name": "roboto_light.14.pft","color": 0},
"align": ["left","vertical"],
"text": "Aprovado com senha",
"format": "upper",
"enable": "{via.pincheck}"
},
"v1.payment.value": {
"area": {"x": 100, "y": 200,"w": 280,"h": 30},
"font": {"name": "roboto_bold.26.pft","color": 0},
"align": ["right","vertical"],
"text": "{payment.value}",
"format": "currency"
},
"v1.payment.nsu.server": {
"area": {"x": 5,"y": 275,"w": 185,"h": 16},
"font": {"name": "roboto_light.16.pft","color": 0},
"align": ["left","vertical"],
"text": "DOC: {payment.nsu.server}{terminal.serialNumber}",
"format": "lpadd.10.0,lpadd.10.0"
},
"v1.card.brand": {
"area": {"x": 5,"y": 225,"w": 280,"h": 30},
"font": {"name": "roboto_light.16.pft","color": 0},
"align": ["left","vertical"],
"text": "{card.brand} {card.pan}",
"format": ";card2"
}
}
  • background - É possível adicionar backgrounds e definir sua cor no comprovante, seja para destacar um label ou até mesmo para criar linhas como divisões, veja os exemplos alguns exemplos:
"label": {
"v1.c.drawline1": { "backGround": { "color": 16777215 }, "area": {"x": 5,"y": 80,"w": 375,"h": 2}, "text": ""},

"v1.reprint.message": {
"backGround": {
"color": 16777215
},
"area": {"x": 0,"y": 70,"w": 384,"h": 16},
"font": {"name": "arial_negrito.14.pft","color": 16777215},
"align": ["center","vertical"],
"text": "REIMPRESSÃO",
"enable": "{via.reprint}"
}
}

  • enable - É possível através dessa flag exibir ou não um componente no comprovante, sendo "true" exibe, "false" não exibe. É possivel utilizar expressões vindas do servidor, para que este processo fique de forma dinâmica.

  • disable - Essa flag é a negação da propriedade enable, onde se a expressão passada for true o componente não será exibido.

Phonts

Através dessa ferramenta é possível importar qualquer fonte instalada no seu computador para seu App. Ao abrir a ferramenta será carregadas todas as fontes instaladas na sua máquina, basta clicar em cima da fonte desejada e será aberto uma janela para que seja indicado o tamanho da fonte, ao confirmar será gerada na mesma pasta do utilitário o arquivo que representa a fonte desejada, copie esse arquivo para a pasta "res\fonts" e a fonte já estará disponível para ser usada na sua aplicação.

phonts_main.PNG

Definições dos dados do servidor

Nesta sessão definiremos quais os dados são retornados pelo servidor que podem ser utilizados na composição do comprovante. Essas informações devem ser definidas entre chaves "{campo}"

CAMPO TIPO DESCRIÇÃO
acquire.id string Identificador do adquirente.
acquire.name string Nome do adquirente.
network.name string Nome da rede de captura.
ec.id string Identificador da loja
ec.specificId string Identificador especifico da loja (MID).
ec.name string Nome da loja.
ec.type byte Tipo da loja.
ec.nationalId string Cnpj da loja
ec.index byte Se a loja for pessoa física será 1, juridica será 0.
ec.site.name string Nome do estabelecimento fisíco.
ec.site.street string Endereço do estabelecimento fisíco.
ec.site.number string Número do endereço do estabelecimento fisíco.
ec.site.complements string Complemento do endereço do estabelecimento fisíco.
ec.site.city string Cidade do endereço do estabelecimento fisíco.
ec.site.state string Estado do endereço do estabelecimento fisíco.
ec.site.postalCode string Cep do endereço do estabelecimento fisíco.
product.id byte Identificador do produto.
product.name string Nome do produto.
product.withInterest string Nome do produto parcelado com juros.
product.withoutInterest string Nome do produto parcelado sem juros.
product.aid string Application Idenfifier (ID).É uma numeração que identifica a aplicação. Exemplo: A0000000031010 é Visa Credit (Crédito) e A0000000032010 é Visa Electron (Débito)
product.arqc string Identificador da Aplicação, apenas transações com chip
product.imgName string Imagem do produto.
card.type string Tipo do cartão.
card.brand string Tipo da Bandeira do cartão
card.pan string Número do cartão.
card.holder string Titular do cartão
card.exp string Data de validade do cartão.
card.service word Código do serviço, para identificar a presença do cartão.
card.appLabel string Nome da aplicação do cartão.
payment.mode string Forma de pagamento.
payment.type byte Tipo de pagamento.
payment.label string Nome do pagamento.
payment.value string Valor do pagamento.
payment.parcells string Quantidade de parcelas do pagamento.
payment.datetime datetime Data e hora do pagamento.
payment.nsu.client dword Nsu do terminal.
payment.nsu.server dword Nsu do servidor.
payment.nsu.acquire string Nsu do adquirente.
payment.nsu.auth string Nsu do autorizador.
payment.refund.origin.nsu.auth string Nsu da transação original do autorizador.
payment.refund.origin.nsu.acquire string Nsu da transação original do adquirente.
via.pincheck boolean Verificar se a transação foi aprovada com senha.
via.signature boolean Assinatura.
via.reprint boolean Reimpressão.
terminal string Número do terminal (TID).
terminal.serialNumber string Número serial do terminal.
terminal.fullSerialNumber string Número serial do terminal com mascara.
terminal.osVersion string Versão do sistema operacional do terminal.
terminal.model string Modelo do terminal.
terminal.version string Versão da aplicação.


Comprovante Textual

Os comprovantes textuais podem ser utilizados, contudo possuí menos flexibilidade do que o gráfico, nele é possível mudar o tamanho das fontes utilizando TAGS de formatação, como pode ser visto a seguir. A formatação das TAGS é por linha ou seja a formatação da TAG definida na linha se dará até que seja encontrado uma quebra de linha "\n"

TAGS DESCRIÇÃO
NSF Elemento que determina que a fonte da linha atual do comprovante deve ter um tamanho padrão.
DSF Elemento que determina que a fonte da linha atual deve ter o tamanho dobrado em relação ao tamanho padrão.
DHF Elemento que determina que a fonte da linha atual deve ter o dobro da altura de uma fonte normal.
DWF Elemento que determina que a fonte da linha atual deve ter o dobro da largura de uma fonte normal.
HL adicionar formatação de caixa baixa ao texto.