Essa documentação descreve o processo de configuração do layout customizado da carteirinha no portal do beneficiário. A API /totvsHealthPlans/familyContract/v1/beneficiaries/:subscriberId/card retorna os dados necessários para montar o layout do cartão, tanto para a frente quanto para o verso. Caso seja necessário incluir outros campos, utilize o ponto de entrada PTBENCARD.
Passos para a Configuração:
Salvar as Imagens do Cartão: Salve as imagens da frente e verso do cartão no formato PNG, tamanho 420 x 240, com a nomenclatura front-card.png e back-card.png, no diretório do servidor:
Criar o Arquivo de Configuração: No mesmo diretório, crie o arquivo de configuração layout-config.json, contendo as definições para os campos que aparecerão no cartão.
O exemplo abaixo mostra como montar o layout customizado da carteirinha com base no arquivo layout-config.json.
{
"front": [
{
"css": "font-size: 9px;font-weight: bold;top: 50px; width: 200px; left: 300px;",
"values": [
{
"type": "custom",
"value": "meuCampo"
}
]
},
{
"css": "font-size: 9px;font-weight: bold;top: 70px; width: 200px; left: 20px;",
"values": [
{
"type": "field",
"value": "planDescription"
},
{
"type": "field",
"value": "accommodationDescription"
}
]
},
{
"css": "font-size: 9px;font-weight: bold;top: 85px; width: 200px; left: 20px;",
"values": [
{
"type": "field",
"value": "coverageArea"
}
]
},
{
"css": "font-size: 8px;top: 117px; width: 70px; left: 330px;",
"values": [
{
"type": "text",
"value": "VÁLIDO ATÉ:"
}
]
},
{
"css": "font-size: 10px;font-weight: bold;top: 135px; width: 400px; left: 20px; color: white",
"values": [
{
"type": "field",
"value": "subcontractCardName"
}
]
}
],
"back": [
{
"css": "font-size: 9px;font-weight: bold;top: 70px; width: 200px; left: 100px;",
"values": [
{
"type": "field",
"value": "planDescription"
},
{
"type": "field",
"value": "accommodationDescription"
}
]
}
]
} |
Após aplicar a configuração, a carteirinha no portal será renderizada com os campos dinâmicos e fixos conforme definidos no arquivo layout-config.json. A imagem do cartão será gerada com base nas imagens da frente e verso, aplicando o estilo CSS e exibindo os valores de acordo com as informações retornadas pela API.
Aqui está um exemplo visual de como a carteirinha pode aparecer no portal do beneficiário, com base na configuração fornecida. Este é apenas um modelo ilustrativo, pois o layout final pode variar dependendo dos dados específicos retornados pela API.
Outras Ações / Ações relacionadas
| Ação | Descrição |
|---|---|
| Salvar Imagens | Salve as imagens front-card.png e back-card.png no diretório. |
| Criar Arquivo layout-config.json | Defina o layout do cartão no arquivo layout-config.json. |
Principais Campos e Parâmetros
| Campo | Descrição |
|---|---|
| front | Contém a lista de configurações para a frente do cartão. |
| back | Contém a lista de configurações para o verso do cartão. |
| css | Define o estilo CSS para cada campo. |
| values | Define os valores a serem exibidos, podendo ser: field, text, ou custom. |
| type: field | Refere-se a um campo retornado pela API. |
| type: text | Exibe um texto fixo no layout. |
| type: custom | Permite adicionar campos customizados, definidos pelo ponto de entrada PTBENCARD. |
| value | Define o valor a ser exibido no campo, conforme o tipo (campo da API ou texto fixo). |