Cartão de estimador de pagamento para telas de sinalização digital

Trabalhe com um exemplo de empréstimo, leasing, hipoteca ou poupança com juros compostos mensais usando valores fornecidos. Os pagamentos de empréstimos e hipotecas são baseados na taxa de juros nominal, com qualquer APR fornecida mostrada separadamente. Exemplos de leasing usam um fator monetário explícito e residual. Os valores aparecem apenas após a divulgação obrigatória, enquanto as visualizações compactas apontam para o exemplo completo em vez de mostrar valores sem suas premissas.

Cartão ao vivo

Este cartão é desenhado no seu navegador pelo mesmo código que os Players executam, com dados de exemplo.

Categoria: Finanças. Etiquetas: Preços e tarifas, Lojas, Saguões e recepção.

Layouts

Este cartão em tela cheia preenche toda a tela em paisagem ou retrato e não é colocado como canto, chip ou faixa.

Layouts: cheio. Formas: paisagem, retrato.

Layouts, temas e publicação de cartões. Veja os cartões.

Dados e privacidade

Este cartão usa suas propriedades configuradas e dados ao vivo do cartão.

Apenas exemplos financeiros genéricos; não é necessária a identidade do mutuário ou da conta.

Propriedades

Para tema, fundo, destaque e posição, veja Propriedades comuns.

Defina as propriedades estáticas nos params do cartão ao criá-lo. O documento de dados dele contém apenas propriedades dinâmicas. Linhas aninhadas descrevem o conteúdo da propriedade pai.

Propriedades estáticas

Nome	Tipo	Padrão	Valores e limites	Descrição
`mode`	string	`"loan"`	`"loan"`, `"lease"`, `"mortgage"`, `"savings"`
`currency`	string	`"CAD"`	padrão: `"^[A-Z]{3}$"`
`currencyDecimals`	integer	`2`	mínimo: `0`; máximo: `3`
`downPaymentMinor`	integer	`500000`	mínimo: `0`; máximo: `10000000000`
`financedFeesMinor`	integer	`0`	mínimo: `0`; máximo: `10000000000`
`upfrontFeesMinor`	integer	`0`	mínimo: `0`; máximo: `10000000000`
`annualRatePercent`	number	`6.9`	mínimo: `0`; máximo: `100`
`aprPercent`	nulo ou número	`null`	anyOf: `[{"type":"null"},{"type":"number","minimum":0,"maximum":200}]`
`moneyFactor`	number	`0.0025`	mínimo: `0`; máximo: `0.1`
`residualMinor`	nulo ou número	`null`	anyOf: `[{"type":"null"},{"type":"number","minimum":0,"maximum":10000000000}]`
`monthlyFeeMinor`	integer	`0`	mínimo: `0`; máximo: `100000000`
`leaseTaxPercent`	number	`0`	mínimo: `0`; máximo: `50`
`propertyTaxMonthlyMinor`	integer	`0`	mínimo: `0`; máximo: `100000000`
`insuranceMonthlyMinor`	integer	`0`	mínimo: `0`; máximo: `100000000`
`hoaMonthlyMinor`	integer	`0`	mínimo: `0`; máximo: `100000000`
`mortgageCompounding`	string	`"monthly"`	`"monthly"`, `"semiannual"`
`monthlyContributionMinor`	integer	`20000`	mínimo: `0`; máximo: `100000000`
`contributionTiming`	string	`"end"`	`"beginning"`, `"end"`
`selectedTerm`	integer	`48`	mínimo: `1`; máximo: `600`
`terms`	array	`[{"months":36},{"months":48},{"months":60},{"months":72}]`	minItems: `1`; maxItems: `6`
`terms[].months`	integer		mínimo: `1`; máximo: `600`; Obrigatório
`terms[].annualRatePercent`	nulo ou número	`null`	anyOf: `[{"type":"null"},{"type":"number","minimum":0,"maximum":100}]`
`terms[].moneyFactor`	nulo ou número	`null`	anyOf: `[{"type":"null"},{"type":"number","minimum":0,"maximum":0.1}]`
`terms[].residualMinor`	nulo ou número	`null`	anyOf: `[{"type":"null"},{"type":"number","minimum":0,"maximum":10000000000}]`
`backgroundColor`	string, nulo	`null`	padrão: `"^#[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?$"`	Substitui o fundo e a placa do cartão por uma cor plana ordenada por CSS. #RRGGBBAA fornece opacidade. background none tem precedência.
`textColor`	string, nulo	`null`	padrão: `"^#[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?$"`	Substitui as cores do texto principal e secundário. As cores de destaque e status semântico mantêm seus papéis.

Propriedades dinâmicas

Nome	Tipo	Padrão	Valores e limites
`title`	string	`"Payment example"`	maxLength: `120`
`subtitle`	string	`""`	maxLength: `180`
`disclosure`	string	`""`	maxLength: `280`
`updatedAt`	string	`""`	maxLength: `64`
`amountMinor`	integer	`3000000`	mínimo: `0`; máximo: `10000000000`

Exemplo de tela

Salve as propriedades estáticas como params.json e crie o cartão. O resultado traz o id crd_ dele.

{
  "theme": "neomustard"
}

screenrig card create --type payment-estimator --major 1 --file params.json

Adicione este item aos primitives de uma página da playlist, com esse id no lugar do id do exemplo. Publique a playlist e atribua uma tela.

{
  "id": "payment-estimator",
  "primitive": "card",
  "card": "crd_01EXAMPLECARD000000000",
  "layout": "full",
  "content_fit": "fill"
}

Escrever dados ao vivo

Escreva o documento no cartão depois de criá-lo e depois substitua-o para atualizar a tela sem republicar. O cartão verifica cada gravação contra suas propriedades dinâmicas e recusa um documento que ele rejeita. Use o mesmo projeto da playlist.

Salve o documento como card-data.json. O CLI lê o documento em si, sem invólucro:

{
  "title": "Payment example",
  "subtitle": "",
  "disclosure": "",
  "updatedAt": "",
  "amountMinor": 3000000
}

screenrig card data put crd_01EXAMPLECARD000000000 --file card-data.json

Ou chame a API diretamente. A API envolve o mesmo documento em um campo document. Um token de agente já nomeia seu projeto, então nenhum cabeçalho de projeto é enviado; se você enviar ScreenRig-Project, ele deve corresponder ao projeto do token. Forneça sua autorização de API pelo ambiente; veja Autenticação da API.

curl --request PUT "https://api.screenrig.ai/api/cards/crd_01EXAMPLECARD000000000/data" \
  --header "Authorization: Bearer $SCREENRIG_TOKEN" \
  --header "Content-Type: application/json" \
  --data '{"document":{"title":"Payment example","subtitle":"","disclosure":"","updatedAt":"","amountMinor":3000000}}'