• França
lyra.com
Procurando
Categoria
Tags
pagina inicial
Suporte técnico

Temas

O formulário embutido possui 2 temas prontos para usar. Cada um dos temas requer que baixe um arquivo CSS e JS dedicados.

O arquivo de tema CSS permite aplicar um tema de base enquanto o formulário de pagamento está sendo carregado. É particularmente importante para os dispositivos com conexão lenta. Sempre precisa colocá-lo no header da página.

O arquivo de tema JS contem a parte ativa do tema (animações, estilos, elementos, ... ). Deve ser baixado previamente na livraria JavaScript principal.

Cada um destes temas pode ser usado em modo de lista cartão incorporado, ou em modo pop-in.

Tema néon

néon é o tema por padrão. Os aquivos associados são:

arquivos Descrição
neon-reset.min.css Aplica o tema classic néon os estilos (importante)
neon.css Aplique o tema néon levando em conta os estilos da página
neon.js Parte ativa do tema néon

Exemplo do tema néon:

Exemplo de código para exibir o tema néon:

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport"
   content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- STEP :
1 : load the JS librairy 
2 : required public key 
3 : the JS parameters url sucess -->

<script type="text/javascript"
        src="https://static.lyra.com/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js"
        kr-public-key="69876357:testpublickey_DEMOPUBLICKEY95me92597fd28tGD4r5"
        kr-post-url-success="paid.html">
 </script>

  <!--  theme NEON should be loaded in the HEAD section   -->
<link rel="stylesheet" href="https://static.lyra.com/static/js/krypton-client/V4.0/ext/neon-reset.min.css">
<script src="https://static.lyra.com/static/js/krypton-client/V4.0/ext/neon.js">
 </script>
 </head>
 <body>
  <!-- payment form -->
  <div class="kr-smart-form" kr-card-form-expanded  kr-form-token="DEMO-TOKEN-TO-BE-REPLACED">
  <!-- error zone -->
  <div class="kr-form-error"></div>
  </div>
</body>
</html>

Tema classic

Os aquivos associados são:

arquivos Descrição
classic-reset.min.css Aplica o tema classic forçando os estilos (importante)
classic.css Aplica o tema classic levando em conta os estilos da página
classic.js Parte ativa do tema classic

Exemplo de tema classic:

Exemplo de código para exibir o tema classic:

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport"
   content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- STEP :
1 : load the JS librairy 
2 : required public key 
3 : the JS parameters url sucess -->

<script type="text/javascript"
        src="https://static.lyra.com/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js"
        kr-public-key="69876357:testpublickey_DEMOPUBLICKEY95me92597fd28tGD4r5"
        kr-post-url-success="paid.html">
 </script>

  <!--  theme NEON should be loaded in the HEAD section   -->
<link rel="stylesheet" href="https://static.lyra.com/static/js/krypton-client/V4.0/ext/classic-reset.min.css">
<script src="https://static.lyra.com/static/js/krypton-client/V4.0/ext/classic.js">
 </script>
 </head>
 <body>
  <!-- payment form -->
  <div class="kr-smart-form" kr-card-form-expanded  kr-form-token="DEMO-TOKEN-TO-BE-REPLACED">
  <!-- error zone -->
  <div class="kr-form-error"></div>
  </div>
</body>
</html>

O resultado será:

Tema classic (pop-in)

Você pode também exibir o tema classic em um pop-in adicionando o atributo kr-popin :

/pt-BR/rest/V4.0/api/kb/authentication.html
https://github.com/lyra/rest-php-examples/blob/master/www/minimalEmbeddedForm.popIn.php#L70-L72
https://api.lyra.com/api-payment/V4/Charge/CreatePayment
  <div class="kr-embedded" kr-popin kr-form-token="<?php echo $formToken;?>">

Tema material (não compatível)

Le thème material n'est pas supporté par le formulaire embarqué (smartForm). Si vous utilisez ce thème, il faut impérativement changer et choisir entre le "thème néon" ou le "thème classic".

Formulário sem tema

Se você quiser criar um tema personalizado, recomendamos incluir o CSS no-theme.min.css. Permite garantir a compatibilidade minimal com todos os navegadores (desktop e mobile) do mercado:

arquivos Descrição
no-theme.min.css Aplica o css mínimo para garantir o bom funcionamento do formulário

Personalizar um tema

O formulário embutido (mas também o pop-in) aplica os estilos em 2 etapas:

  1. via o carregamento de um arquivo CSS (como classic-reset.min.css) no header da página.
  2. depois, o tema é detalhado graças a um objeto de configuração (conteúdo em classic.js)

O arquivo CSS inicial

Este arquivo permite reservar o espaço e aplicar um estilo mínimo no formulário, isto antes de baixar e executar o Java Script.

Recomendamos sempre inserir este arquivo CSS no header da página. classic-reset.min.css , ou no-theme.min.css são dois exemplos de arquivos CSS iniciais fornecidos.

O objeto de configuração

Os arquivos Javascript de temas (como classic.js ou material.js ) contem um objeto de configuração que define o tema inteiro: animações, estilos, elementos HTML.

Este objeto de configuração é a única diferença entre um formulário classic, material, embutido ou pop-in.

Referência do objeto configuração

Atenção! Os parâmetros não apresentados aqui são sujeitos a mudanças. Você não deve usá-los.

PARÂMETRO type Descrição
form.fields.order string list default field order (if not included) like [“pan”, “securityCode”, “expiry”]
form.controls.order string list default controls order (if not included) like [“formButton”, “error”]
form.layout string payment form layout: default or compact
merchant.header.image.src string image url ou data:image (tipo suportado por CSS)
merchant.header.image.type string background (preenche o cabeçalho todo) ou logomarca (logomarca redonda centrada)
merchant.header.image.visibility boolean true/false : se false, a imagem ficará oculta
merchant.header.shopName.color string Cor do nome da loja. Exemplo: 'red' (atributo CSS)
merchant.header.shopName.gradient boolean true/false: aplica ou não um gradiente no cabeçalho
merchant.header.backgroundColor string cor de fundo do cabeçalho. Exemplo: 'red' (atributo CSS)

Exemplos de configuração do header dopop-in

O objeto de configuração deve ser passado da forma seguinte:

let config = {
  "merchant": {
    "header": {
      "image": {
        "visibility": false
      }
    }
  }
};

KR.setFormConfig(config);

Seguem alguns exemplos de configuração do header do pop-in.

Mudar a logomarca:

{
  "merchant": {
    "header": {
      "image": {
        "type": "logo",
        "visibility": true,
        "src": "<https://www.logomoose.com/wp-content/uploads/2018/02/logomoosedogandowl-011.jpg>"
      }
    }
  }
}

Atenção, recomendamos usar uma logomarca quadrada para preencher o espaço circular inteiro e manter a proporção da imagem.

Passar uma imagem como um string:

{
  "merchant": {
    "header": {
      "image": {
        "type": "background",
        "visibility": true,
        "src": "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzQiCiAgIHZlcnNpb249IjEuMSIKICAgdmlld0JveD0iMCAwIDU3NiA1MTIiPgogIDxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTEwIj4KICAgIDxyZGY6UkRGPgogICAgICA8Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+CiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICAgICAgPGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPgogICAgICAgIDxkYzp0aXRsZT48L2RjOnRpdGxlPgogICAgICA8L2NjOldvcms+CiAgICA8L3JkZjpSREY+CiAgPC9tZXRhZGF0YT4KICA8ZGVmcwogICAgIGlkPSJkZWZzOCIgLz4KICA8cGF0aAogICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlLXdpZHRoOjAuMzkzNDMyNjgiCiAgICAgaWQ9InBhdGgyIgogICAgIGQ9Im0gMzczLjI2NjY0LDI3My44Mjk5NyAxOC41OTg3NSwtODEuODMzOTkgYyAxLjM0Mjc4LC01LjkwODU3IC0zLjE0ODI1LC0xMS41MzUwNCAtOS4yMDc1MSwtMTEuNTM1MDQgSCAyMjguMTI0NiBsIC0zLjYwNjIsLTE3LjYyOTcyIGMgLTAuODk4NjEsLTQuMzk0MjYgLTQuNzY1MjUsLTcuNTQ5OTkgLTkuMjUwNzgsLTcuNTQ5OTkgaCAtNDAuMzM4MjcgYyAtNS4yMTQ5NCwwIC05LjQ0MjM4LDQuMjI3NDQgLTkuNDQyMzgsOS40NDIzOCB2IDYuMjk0OTQgYyAwLDUuMjE0OTQgNC4yMjc0NCw5LjQ0MjM5IDkuNDQyMzgsOS40NDIzOSBoIDI3LjQ5NDI3IGwgMjcuNjM3ODcsMTM1LjExODU0IGMgLTYuNjEyMDUsMy44MDI1MyAtMTEuMDY3NjcsMTAuOTMyMzEgLTExLjA2NzY3LDE5LjEwNzA2IDAsMTIuMTY4MDggOS44NjQxNCwyMi4wMzIyMyAyMi4wMzIyMywyMi4wMzIyMyAxMi4xNjgwOSwwIDIyLjAzMjIzLC05Ljg2NDE1IDIyLjAzMjIzLC0yMi4wMzIyMyAwLC02LjE2NjY3IC0yLjUzNjQ2LC0xMS43MzgwNyAtNi42MTkxMSwtMTUuNzM3MzEgaCA4Mi40ODE5NyBjIC00LjA4MjI2LDMuOTk5MjQgLTYuNjE4NzIsOS41NzA2NCAtNi42MTg3MiwxNS43MzczMSAwLDEyLjE2ODA4IDkuODY0MTYsMjIuMDMyMjMgMjIuMDMyMjQsMjIuMDMyMjMgMTIuMTY4MDgsMCAyMi4wMzIyMywtOS44NjQxNSAyMi4wMzIyMywtMjIuMDMyMjMgMCwtOC43MjMyIC01LjA3MDU2LC0xNi4yNjEzNyAtMTIuNDI0MjEsLTE5LjgzMDk3IGwgMi4xNzA1NywtOS41NTA5NyBjIDEuMzQyNzcsLTUuOTA4NTkgLTMuMTQ4MjUsLTExLjUzNTA2IC05LjIwNzUsLTExLjUzNTA2IEggMjUxLjMwMTMzIGwgLTIuNTc1MDIsLTEyLjU4OTg2IGggMTE1LjMzMjgyIGMgNC40MDg4MSwwIDguMjMwNjEsLTMuMDUwNjcgOS4yMDc1MSwtNy4zNDk3MSB6IiAvPgo8L3N2Zz4K"
      }
    }
  }
}

Criar seus próprios temas

Os campos do formulário de pagamento podem ser personalizados com diretivas CSS padrões. Basta aplicá-las e elas serão automaticamente duplicadas, mesmo nos elementos contidos nos iframes dos campos sensíveis.

O cliente JavaScript, graças a um sistema de campos ocultos, recuperará automaticamente os estilos da sua página para duplicá-los nos iframes.

Jobs
Legal
GDPR
25.17-1.11