Saltar a contenido

Recibos

Los recibos tienen dos categorías, son: gráficos y textuales. Aquí cubriremos cómo crear recibos personalizables, cambiar el tamaño, el color, el tipo de fuente, el formato, la alineación del texto, incluir imágenes utilizables y qué etiquetas de paystore están disponibles que le permiten crear un vale dinámico.

Recibo Gráfico

El recibo gráfico se construye a partir de un proyecto de tipo "skin" para crear un proyecto de esta naturaleza vaya a Archivo-> Nuevo-> Proyecto ... y seleccione el project type como skin. En la carpeta "res / css" de tu proyecto encontrarás 4 archivos referentes al recibo gráfico, son:

  • voucher_1.jcss - layout representando el recibo del establecimiento.

  • voucher_2.jcss - layout representando el recibo del cliente.

  • voucher_c_1.jcss - layout representando el recibo de Devolución del establecimiento.

  • voucher_c_2.jcss - layout representando el recibo de Devolución del cliente.

Los archivos de layout están en formato JSON en ellos están las definiciones de cada componente que es compatible con la solución. A continuación se muestra una lista de componentes que son compatibles con el layout del recibo. Para obtener más información sobre cada componente, consulte el menú Referencias[1]

COMPONENTES DESCRIPCIÓN
frame Sesión donde se declara el frame que representa la área en el recibo.
image Sesión donde se declara las imágenes que serán utilizadas por el recibo.
label Sesión donde se declara los textos que se utilizarán por el recibo.

Los componentes declarados deben tener nombres únicos, incluso para diferentes archivos, para cada componente puede definir propiedades como:

  • area - Le permite definir las coordenadas de posicionamiento (x, y), así como la altura (h) y la anchura (w), que pueden ser de hasta 384px.
  • font - Le permite definir el nombre y el color de la fuente que se utilizará. Es posible utilizar cualquier fuente instalada en su máquina, la fuente elegida debe generarse utilizando la utilidad Phonts.
  • align - Le permite establecer la alineación del componente en la pantalla, las opciones son:
ALENEACIÓN DESCRIPCIÓN
center Alinear el componente al centro.
left Alinear componente a izquierda.
right Alinear componente a derecha.
  • format - Es posible agregar formato para el componente "label", muy útil cuando se desea que el texto esté en mayúsculas, minúsculas o agregar máscaras a información como fechas, cpf, cnpj, números de teléfono, tarjetas de crédito, etc. Consulte a continuación los formatos compatibles:
FORMATEO DESCRIPCIÓN
currency agregar formato de valor monetario al texto.
datetime agregar formato de fecha según la máscara definida.
card agregar formato a número de tarjeta, algunos números se mostrarán con el carácter "*".
card2 agregar formato a número de tarjeta, algunos números se mostrarán con el carácter "*", mostrando solo los últimos 4 dígitos .
lower agregar formato de minúsculas al texto.
upper agregar formato de mayúsculas al texto.
camel agregar formato de mayúsculas para la primera letra de cada palabra en el texto.
lpadd agregar formato a rellenar los espacios en blanco con un carácter a izquierda definido en el formato.
rpadd agregar formato a rellenar los espacios en blanco con un carácter a derecha definido en el formato.

Ver algunos ejemplos:

"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 - Es posible agregar backgrounds y poner su color en los recibos, que se destacan un label o incluso para crear líneas con divisiones, vea los ejemplos:
"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 - Es posible a traves de esta flag mostrar o no un componente en el recibo, siendo "true" muestra, "false" no muestra. Es posible utilizar expresiones provenientes del servidor, para que este proceso sea dinámico.

  • disable - Esta flag es la negación de la propiedad enable, donde si la expresión pasada es true el componente no se mostrará.

Phonts

A través de esta herramienta puedes importar cualquier fuente instalada en tu computadora a tu aplicación. Al abrir la herramienta se cargan todas las fuentes instaladas en su máquina, simplemente haga clic en la fuente deseada y se abrirá una ventana para indicar el tamaño de la fuente, al confirmar, el archivo que representa la fuente deseada se generará en la misma carpeta que la utilidad, copiar este archivo en la carpeta "res fonts" y la fuente ya estará disponible para ser utilizada en su aplicación.

phonts_main.PNG

Definiciones de datos del servidor

En esta sección, definiremos qué datos devuelve el servidor que se pueden utilizar para redactar el recibo. Esta información debe estar definida entre llaves "{campo}"

CAMPO TIPOS DESCRIPCIÓN
acquire.id string Identificador del adquirente.
acquire.name string Nombre del adquirente .
network.name string Nombre de red donde captura.
ec.id string Identificador de tienda
ec.specificId string Identificador específico de la tienda (MID).
ec.name string Nombre de tienda.
ec.type byte Tipo de tienda .
ec.nationalId string Número nacional de identificación de la tienda
ec.index byte Si la tienda es un individuo por 1, la entidad legal será 0.
ec.site.name string Nombre del establecimiento físico .
ec.site.street string Dirección del establecimiento físico .
ec.site.number string Número de dirección del establecimiento físico.
ec.site.complements string Complemento de dirección de establecimiento físico.
ec.site.city string Dirección de la ciudad de establecimiento físico .
ec.site.state string Estado de la dirección del establecimiento físico .
ec.site.postalCode string Código postal de la dirección del establecimiento físico .
product.id byte Identificador de Producto .
product.name string Nombre del producto .
product.withInterest string Nombre del producto en cuotas con interés .
product.withoutInterest string Nombre del producto en cuotas sin intereses.
product.aid string Application Idenfifier (ID). Es una numeración que identifica la aplicación.
Ejemplo: A0000000031010 es Visa Credit (Crédito) y A0000000032010 es Visa Electron (Débito)
product.arqc string Identificador de la aplicación, solo transacciones con chip
product.imgName string Imagen del producto .
card.type string Tipo de tarjeta .
card.brand string Tipo de bandera de tarjeta
card.pan string Numero de tarjeta.
card.holder string Titular de la tarjeta
card.exp string Fecha de vencimiento de la tarjeta .
card.service word Código de servicio, para identificar la presencia de la tarjeta.
card.appLabel string Nombre de la aplicación de la tarjeta.
payment.mode string Forma de pago.
payment.type byte Tipo de pago.
payment.label string Nombre de pago.
payment.value string Monto del pago.
payment.parcells string Número de cuotas de pago.
payment.datetime datetime Fecha y hora de pago.
payment.nsu.client dword Nsu desde la terminal.
payment.nsu.server dword Nsu desde el servidor.
payment.nsu.acquire string Nsu del adquirente.
payment.nsu.auth string Nsu del autorizador.
payment.refund.origin.nsu.auth string Nsu de la transacción original del autorizador.
payment.refund.origin.nsu.acquire string Nsu de la transacción original de la adquirente.
via.pincheck boolean Verifique si la transacción fue aprobada con una contraseña.
via.signature boolean Signatura.
via.reprint boolean Reimprimir.
terminal string Número de terminal (TID).
terminal.serialNumber string Número de serie del terminal.
terminal.fullSerialNumber string Número de serie del terminal con máscara.
terminal.osVersion string Versión del sistema operativo de la terminal.
terminal.model string Modelo de terminal.
terminal.version string Versión de la aplicación.


Recibo textual

Los Recibos textuales se pueden utilizar, sin embargo, poseen menos flexibilidad que el gráfico, es posible cambiar el tamaño de la fuente usando TAGS de formateo, como se ve a continuación. El formato de TAGS es por línea, es decir, el formato del TAG definido en la linea ocurrira hasta que se encuentre un salto de linea "\n"

TAGS DESCRIPCIÓN
NSF Elemento que determina que la fuente de la línea de recibo actual debe ser de tamaño estándar.
DSF Elemento que determina que la fuente de la línea actual debe ser el doble del tamaño predeterminado.
DHF Elemento que determina que la fuente de la línea actual debe tener el doble de altura que una fuente normal .
DWF Elemento que determina que la fuente de la línea actual debe tener el doble de ancho que una fuente normal .
HL Agregar formato de minúsculas al texto .