Temas e personalização

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 formulário embutido, ou em modo pop-in.

Tema classic

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

arquivos description
classic-reset.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" />  

  <!-- Javascript library. Should be loaded in head section -->
  <script 
   src="https://static.payzen.lat/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js" 
   kr-public-key="28478261:testpublickey_LHvSiWObWJnSBv6lnBMmS0tlDPLslOFYXvmKguoWiBIWj" 
   kr-post-url-success="paid.html">
  </script>

  <!-- theme and plugins. should be loaded after the javascript library -->
  <!-- not mandatory but helps to have a nice payment form out of the box -->
  <link rel="stylesheet" 
  href="https://static.payzen.lat/static/js/krypton-client/V4.0/ext/classic-reset.css">
 <script 
  src="https://static.payzen.lat/static/js/krypton-client/V4.0/ext/classic.js">
 </script> 
</head>
<body>
  <!-- payment form -->
  <div class="kr-embedded" 
   kr-form-token="DEMO-TOKEN-TO-BE-REPLACED">

    <!-- payment form fields -->
    <div class="kr-pan"></div>
    <div class="kr-expiry"></div>
    <div class="kr-security-code"></div>

    <!-- payment form submit button -->
    <button class="kr-payment-button"></button>

    <!-- error zone -->
    <div class="kr-form-error"></div>
  </div>
</body>
</html>
<!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" /> 

  <!-- Javascript library. Should be loaded in head section -->
  <script 
   src="<?php echo $client->getClientEndpoint();?>/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js"
   kr-public-key="<?php echo $client->getPublicKey();?>"
   kr-post-url-success="paid.php">
  </script>

  <!-- theme and plugins. should be loaded after the javascript library -->
  <!-- not mandatory but helps to have a nice payment form out of the box -->
  <link rel="stylesheet" 
   href="<?php echo $client->getClientEndpoint();?>/static/js/krypton-client/V4.0/ext/classic-reset.css">
  <script 
   src="<?php echo $client->getClientEndpoint();?>/static/js/krypton-client/V4.0/ext/classic.js">
  </script>
</head>
<body style="padding-top:20px">
  <!-- payment form -->
  <div class="kr-embedded"
   kr-form-token="<?php echo $formToken;?>">

    <!-- payment form fields -->
    <div class="kr-pan"></div>
    <div class="kr-expiry"></div>
    <div class="kr-security-code"></div>  

    <!-- payment form submit button -->
    <button class="kr-payment-button"></button>

    <!-- error zone -->
    <div class="kr-form-error"></div>
  </div>  
</body>
</html>

Tema classic (pop-in)

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

  <div class="kr-embedded"
   kr-popin
   kr-form-token="<?php echo $formToken;?>">

O resultado será:

Payer

Pode-se personalizar a imagem e o nome da loja de pop-in. Para maiores informações, consulte: Referência do cliente JavaScript

Tema material design

O tema material aplica os guidelines definidos pela. Os parâmetros associados são os seguintes:

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

Exemplo de tema material:

Exemplo de código para exibir o tema material:

<!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" /> 

  <!-- Javascript library. Should be loaded in head section -->
  <script 
   src="<?php echo $client->getClientEndpoint();?>/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js"
   kr-public-key="<?php echo $client->getPublicKey();?>"
   kr-post-url-success="paid.php">
  </script>

  <!-- theme and plugins. should be loaded after the javascript library -->
  <!-- not mandatory but helps to have a nice payment form out of the box -->
  <link rel="stylesheet" 
   href="<?php echo $client->getClientEndpoint();?>/static/js/krypton-client/V4.0/ext/material-reset.css">
  <script 
   src="<?php echo $client->getClientEndpoint();?>/static/js/krypton-client/V4.0/ext/material.js">
  </script>
</head>
<body style="padding-top:20px">
  <!-- payment form -->
  <div class="kr-embedded"
   kr-form-token="<?php echo $formToken;?>">

    <!-- payment form fields -->
    <div class="kr-pan"></div>
    <div class="kr-expiry"></div>
    <div class="kr-security-code"></div>  

    <!-- payment form submit button -->
    <button class="kr-payment-button"></button>

    <!-- error zone -->
    <div class="kr-form-error"></div>
  </div>  
</body>
</html>

Tema material (pop-in)

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

  <div class="kr-embedded"
   kr-popin
   kr-form-token="<?php echo $formToken;?>">

Formulário sem tema

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

arquivos description
no-theme.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. carregando um arquivo CSS (como classic-reset.css) no head 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 carregar este arquivo CSS no head da página. classic-reset.css, ou no-theme.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

Configuração Tipo 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 booleano 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 booleano 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"
      }
    }
  }
}

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.