Cartões Virtuais

Permite gerar cartões virtuais dinamicamente e exibir no aplicativo/portal mobileX. Só permite a configuração de um cartão por endpoint. Para gerar e visualizar os cartões você deve:

• Criar uma funcionalidade no adapter para obter os dados da carteira no cliente

  • O adapter foi construído de forma que o template do JSON de retorno deve ter o seguinte formato { "pageContent": <dados> }, onde <dados> são os dados que precisam ser exibidos no cartão virtual.

• Criar uma configuração de carteira para o endpoint

  • Isso deve ser feito via POSTMAN.

    • Método: POST

    • URL: <api-url>/api/manager/canvas/cardconfig

    • Header contendo o AppCompanyId

    • JSON no seguinte formato:

{
  "screenTitle": "Cartão do convênio",
  "rotate": false,
  "cardConfigurations": [
    {
      "cardImageUrl": "https://cartaobeneficiar.com.br/fundo-capa-site.png",
      "titles": [
        {
          "title": "{{{nome_titular}}}",
          "allowsAbbreviation": true,
          "fontSize": 40,
          "position": {
            "x": 53,
            "y": 193,
            "width": 1000
          },
          "color": "#ff0000"
        },
        ...
      ],
      "images": [
        {
          "url": "https://cartaobeneficiar.com.br/logo.png",
          "rect": {
            "x": 762,
            "y": 29,
            "width": 300,
            "height": 140
          }
        },
        ...
      ]
    },
    ...
  ]
}

• screenTitle: Título da tela que será exibido no mobile/portal.

• rotate: Se deve rotacionar a imagem em 90 graus para a direita.

• cardConfiguration: Lista de configurações de cartões. Cada item desse array representa uma imagem de cartão.

  • cardImageUrl: Url da imagem de fundo do cartão

  • titles: Lista de textos para serem plotados no cartão

    1. title: Título que vai ser plotado no cartão

       • title: Título que vai ser plotado no cartão

         1. O título pode ser um texto fixo ou um mapeamento para alguma propriedade do <dados> retornado pela funcionalidade do adapter.

         2. O mapeamento é feito usando tags mustache. Ou seja, caso a funcionalidade do adapter retorne um JSON com a propriedade card_number, você pode mapear essa propriedade no title usando a tag mustache como conteúdo da propriedade da seguinte forma: {{#card_number}}{{{card_number}}}{{/card_number}}

       • allowsAbbreviation: Se permite que, caso o title seja muito grande, o texto seja abreviado, exibindo a primeira letra de cada palavra seguida de ponto. OBS: A primeira e última palavra não são abreviadas.

       • fontSize: Tamanho da fonte do title.

       • color: Cor do texto

       • position: Posição em que o texto vai ficar.

         1. x: Posição x do texto

         2. y: Posição y do texto

         3. width: Largura máxima do texto.

  • images: Lista de imagens para serem plotadas no cartão

    1. url: URL da imagem a ser plotada no cartão

    2. rect: Posição, largura e altura da imagem.

---

Criar uma action com os seguintes parâmetros:

• action.name = open-view

• action.path = MS_CANVAS

• action.parameters[0].title = querystring

• action.parameters[0].value = Path=<funcionalidade-adapter>&<query-string>

• <funcionalidade-adapter> é o path para a funcionalidade do adapter que retorna os dados da carteira.

• <query-string> é a query string que você pode passar para a funcionalidade do adapter. Esse parâmetro não é obrigatório.

• Para acessar o cartão no frontend é obrigatório que o usuário esteja autenticado no app mobile/portal.