Referência do cliente JavaScript

O cliente JavaScript permite criar um formulário de pagamento no seu site de e-commerce graças ao código seguinte:

/pt-BR/rest/V4.0/api/kb/authentication.html

https://github.com/lyra/rest-php-examples/blob/master/www/minimalEmbeddedForm.php#L45-L85

https://api.lyra.com/api-payment/V4/Charge/CreatePayment

<!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.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 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.lyra.com/static/js/krypton-client/V4.0/ext/classic-reset.css">
 <script 
  src="https://static.lyra.com/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>

Consulte aqui a documentação completa: Inciar: Pagamento simples

Plataformas suportadas

Fazemos todo o possível para suportar todas as versões recentes dos principais navegadores.

Por razões de segurança e para garantir a melhor experiência usuário para a maioria de nossos ECs, não suportamos os navegadores e sistemas operacionais que não recebem mais patch de segurança.

Estes navegadores representam uma ínfima parte do volume dos pagamentos na Internet.

Suportamos :

Internet Explorer versão 10 e mais recentes
Edge versão 17 e mais recentes
Versão 7 do Chrome e mais recentes
Firefox versão 64 e mais recentes
Safari (Desktop e mobile) versão 11 e mais recentes
Android native browser Android 5.0 e mais recentes
todas as versões IOS iphone 4S e mais recentes.

TLS 1.2 deve ser suportado pelo navegador.

Testamos de maneira proativa a maioria dos navegadores, que sejam móveis ou desktop. Porém pode-ser que uma associação aparelho + navegador escape à nossa vigilância. Neste caso, favor entrar em contato com nosso suporte.

Se você quiser suportar uma associação não suportada por nosso cliente Javascript, você pode implementar nosso formulário em redirecionamento.

Lembramos que alguns antivirus ou ad-blocker podem eventualmente bloquear nossa solução. Obrigado por entrar em contato com o suporte se você reparar qualquer detecção abusiva.

Parâmetros de inicialização

Diferentes parâmetros podem ser definidos ao carregar o cliente JavaScript. Por exemplo, para definir kr-public-key e kr-post-url-success :

https://github.com/lyra/rest-php-examples/blob/master/www/minimalEmbeddedForm.php#L81-L82

  <!-- Javascript library. Should be loaded in head section -->
  <script 
   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>

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

Os parâmetros disponíveis são os seguintes:

Configurações gerais:

PARÂMETRO	REQUISITO	Descrição
kr-public-key	Sim	Chave pública a ser usada para realizar o pagamento.
kr-language		Idioma de exibição do formulário no formato Culture (fr-FR).
kr-post-url-success		URL para qual é apresentado o formulário (método POST) se houver sucesso.
kr-get-url-success		URL para qual é apresentado o formulário (método POST) se houver sucesso.
kr-post-url-refused		URL chamada quando todas as tentativas falharam (método POST).
kr-get-url-refused		URL chamada quando todas as tentativas foram sem sucesso (método GET).
kr-clear-on-error		Desativa a supressão do CVV em caso de transação recusada (true ou false).
kr-hide-debug-toolbar		Oculta a barra de debug em modo teste (true ou false).
kr-spa-mode		Se o valor for true, o formulário não será automaticamente inicializado (false é o valor default).

Classes para usar para personalizar os campos:

PARÂMETRO	Descrição
kr-pan	Número do cartão.
kr-expiry	Data de vencimento
kr-security-code	Código de segurança (cvv)
kr-installment-number	Número de parcelas (campo específico para LATAM)
kr-first-installment-delay	Número diferente de meses para aplicar na primeira parcela (campo específico para LATAM)
kr-identity-document-type	Tipo de documento de identidade (campo específico para LATAM)
kr-identity-document-number	Número de identificação (campo específico para LATAM)
kr-card-holder-name	Nome do titular do cartão (campo específico para LATAM)
kr-card-holder-mail	Endereço de e-mail do titular do cartão (campo específico para LATAM)
kr-do-register	caixa para assinalar para confirmar a criação de token de cartão

PARÂMETRO	REQUISITO	Descrição
kr-placeholder-expiry		Placeholder do campo kr-expiry (data de vencimento).

Classes para usar para personalizar os "place holders" :

PARÂMETRO	Descrição	Caso LATAM
kr-placeholder-expiry	Placeholder do campo kr-expiry (data de vencimento).
kr-placeholder-pan	Placeholder do campo kr-pan (número de cartão).
kr-placeholder-security-code	Placeholder do campo kr-security-code (CVV).
kr-placeholder-identity-document-type	Placeholder do campo do tipo de documento de identidade, se for obrigatório	Sim
kr-placeholder-identity-document-number	Placeholder do campo do número de documento de identidade se obrigatório	Sim
kr-placeholder-installments-default	Placeholder do campo Meio de pagamento default
kr-placeholder-installments-single-payment	Placeholder do campo Meio de pagamento quando tiver somente um
kr-placeholder-installments-single-payment-credit	Placeholder do campo Meio de pagamento quando só tiver crédito
kr-placeholder-first-installment-delay	Placeholder do campo Prazo de pagamento	Sim
kr-placeholder-card-holder-mail	Placeholder do campo email se obrigatório	Sim
kr-placeholder-card-holder-name	Placeholder do campo do nome do portador se obrigatório	Sim

Classes para usar para personalizar os labels animados (específico ao tema material):

PARÂMETRO	Descrição	Template	Caso LATAM
kr-label-expiry	Ícone animado do campo kr-expiry (data de validade).
kr-label-pan	Ícone animado do campo kr-pan (número de cartão).
kr-label-security-code	Ícone animado do campo kr-security-code (CVV).
kr-label-identity-document-type	Ícone animado do campo do tipo de documento de identidade, se for obrigatório		Sim
kr-label-identity-document-number	Label animado do campo do número de identidade se for requerido		Sim
kr-label-card-holder-mail	ícone animado do campo email se obrigatório		Sim
kr-label-card-holder-name	Ícone animado do campo do nome do portador se obrigatório		Sim
kr-installments-label-singular	Label animado do campo Meio de pagamento quando tiver somente um.	Meu Label [COUNT] com [CURRENCY] [AMOUNT]
kr-installments-label-plural	Label animado do campo Meio de pagamento quando tiver mais de um	Meu Label [COUNT] com [CURRENCY] [AMOUNT]
kr-first-installment-delay-label-plural	Label animado do campo Prazo de pagamento quando tiver somente um	Minha Label [COUNT]	Sim
kr-first-installment-delay-label-without	Label animado do campo Prazo de pagamento quando tiver mais de um	Minha Label [COUNT]	Sim

Esses parâmetros também podem ser sobrecarregados usando o método KR.setFormConfig(). Por exemplo, para substituir o parâmetro kr-post-url-success :

KR.setFormConfig({
        'kr-post-url-success': 'https://my.site'
    }).then(({
            KR
        }) => {
            /* there is no error */
        );

Observe que, se os parâmetros kr-post-url-success e kr-get-url-success forem definidos ao mesmo tempo, o método POST terá precedência. O mesmo se aplica a kr-post-url-refused e kr-get-url-refused*.

Eventos

Pode-se encadear callbacks JavaScript personalizados a diversos eventos. O cliente JavaScript suporta os eventos seguintes:

PARÂMETRO	Descrição
KR.onBlur()	Um dos campos do formulário perde o foco. ver KR.onFocus().
KR.onBrandChanged()	Chamado quando a bandeira do cartão foi detectada
KR.onError()	Permite receber notificações quando ocorre um erro.
KR.onFocus()	Um destes campos tem o foco.
KR.onFormCreated()	O formulário de pagamento está pronto mas o conteúdo dos iframes não carregou ainda.
KR.onFormReady()	O formulário está pronto para ser usado.
KR.onFormValid()	Chamado quando a bandeira do cartão foi detectada
KR.onInstallmentChanged()	Chamado quando o comprador seleciona a quantidade de parcelas para aplicar ao pagamento.
KR.onLoaded()	Primeiro evento chamado antes da criação do formulário.
KR.onPopinClosed()	Emet un evenement lorsque la popIn du formulaire est fermée (cas undefined)
KR.onSubmit()	Chamado logo antes do post do formulário.
KR.wallet.onTabChange()	Detecta a troca de separador no caso da carteira (ver Gestão das carteiras comprador )
KR.onTransactionCreated()	Chamado quando uma transação for criada (aceita ou recusada).
KR.button.onClick()	Chamado quando o comprador clica no botão do formulário.
KR.on3dSecureAbort()	Chamado quando a autenticação 3DS é descartada pelo usuário

Os eventos seguintes são obsoletas e não são mais suportadas. Não devem ser usados :

KR.onFormReadyListener()
KR.onFormCreateListener()

Todos os eventos retornam promessas, permitindo que você os integre em uma cadeia. Consulte Trabalhar em um ambiente assíncrono para obter mais informações.

KR.onBrandChanged()

A chamada de retorno definida em KR.onBrandChanged() é chamada sempre que uma marca de cartão for detectada. Exemplo de integração

https://github.com/lyra/rest-php-examples/blob/master/www/js_examples/jquery/minimalEmbeddedForm.onBrandChanged.php#L70-L78

  <script type="text/javascript">
    $(document).ready(function() {
          KR.onBrandChanged( function({KR, cardInfo}) {
            var myMessage = "Selected brand: " + cardInfo.brand + ", and bin: " + cardInfo.bin;

            $("#custommessage").html(myMessage);
          });
    });
  </script>

O objeto cardInfo contém a propriedade brand que pode ter os valores seguintes:

Amex
cb
mastercard
maestro
visa_electron
visa

Também contém o bin do cartão digitado, ou seja os 6 primeiros caracteres do pan.

Para ver a lista completa, favor consultar a documentação de referência do parâmetro effectiveBrand aqui: Payment

KR.onFormValid()

O callback definido em KR.onFormValid() será chamado uma vez que todos os campos requeridos forem preenchidos e que os dados estiverem válidos. Exemplo de integração

https://github.com/lyra/rest-php-examples/blob/master/www/js_examples/jquery/minimalEmbeddedForm.onFormValid.php#L70-L78

    <script type="text/javascript">
    $(document).ready(function() {
          KR.onFormValid( function({KR, cardInfo}) {
            var myMessage = "Selected brand: " + cardInfo.brand + ", and bin: " + cardInfo.bin;

            $("#custommessage").html(myMessage);
          });
    });
  </script>

O objeto cardInfo contém a propriedade brand que pode ter os valores seguintes:

Amex
cb
mastercard
maestro
visa_electron
visa

Também contém o bin do cartão digitado, ou seja os 6 primeiros caracteres do pan.

Para ver a lista completa, favor consultar a documentação de referência do parâmetro effectiveBrand aqui: Payment

KR.onError()

KR.onError() permite interceptar os erros antes que estejam exibibos.

Exemplo de bloqueio de mensagens de erro:

https://github.com/lyra/rest-php-examples/blob/master/www/js_examples/jquery/minimalEmbeddedForm.onError.php#L70-L80

          <script type="text/javascript">
    $(document).ready(function() {
          KR.onError( function(event) {
            var code = event.errorCode;
            var message = event.errorMessage;
            var myMessage = code + ": " + message;

            try {
              /* if client answer exists, a refused transaction has been created */
              /* it's not always the case. For example, if the form is empty,    */
              /* error is raised before transaction creation                     */

Em seguida, as mensagens de erro serão automaticamente exibidas no elemento seguinte, se houver:

<div id="customerror"></div>

Quando alguns erros são gerados, eles são agrupados dentro de um erro único. A propriedade children conterá o detalhe de todos os erros:

{
    "errorCode": "CLIENT_300",
    "errorMessage": "Invalid form data",
    "children": [{
        "errorCode": "CLIENT_301",
        "errorMessage": "Invalid card number",
        "field": "pan",
        (...)
    }, {
        "errorCode": "CLIENT_302",
        "errorMessage": "Invalid expiry date",
        "field": "expiryDate",
        (...)
    }, {
        "errorCode": "CLIENT_303",
        "errorMessage": "Invalid security code",
        "field": "securityCode",
        (...)
    }],
    "detailedErrorCode": null,
    "detailedErrorMessage": null,
    (...)
}

Para maiores detalhes sobre os erros, consultar: Gerenciar os erros (cliente JS)

KR.onFocus()

KR.onFocus() permite ser notificado quando um campo do formulário tomo o foco:

Exemplo de integração:

https://github.com/lyra/rest-php-examples/blob/master/www/js_examples/jquery/minimalEmbeddedForm.onFocus.php#L70-L78

  <script type="text/javascript">
    $(document).ready(function() {
          KR.onFocus( function(event) {
            var myMessage = "focus on: " + event.field;

            $("#custommessage").html(myMessage);
          });
    });
  </script>

Se o campo do número do cartão toma o foco, a variável event terá o valor seguinte:

{
    "field":"pan",
    "formId":"F73867",
    "_type":"krypton/focus"
}

Também pode usar KR.onBlur() para detectar a perda de foco de um campo. Seu funcionamento é similar ao KR.onFocus()

KR.onInstallmentChanged()

KR.onInstallmentChanged() permite receber uma notificação quando o comprador seleciona a quantidade de parcelas.

<script type="text/javascript">
    $(document).ready(function(){
          KR.onInstallmentChanged( function({KR, installmentInfo}){
            console.log(installmentInfo)
          });
    });
</script>

O objeto installmentInfo possui os atributos seguintes:

brand => Bandeira do cartão. Exemplo: "VISA"
hasInterests => Booleano indicando se a taxa de juros aplica-se. Exemplo: false
installmentCount => Quantidade total de pagamentos. Exemplo: 1
totalAmount => Valor total, juros inclusos. Exemplo: 20000

KR.onSubmit()

KR.onSubmit() permite interceptar as informações sobre a transação autorizada antes que o formulário realize um POST para a URL definida com kr-post-success-url.

Exemplo de integração:

https://github.com/lyra/rest-php-examples/blob/master/www/js_examples/jquery/minimalEmbeddedForm.onSubmit.php#L70-L85

  <script type="text/javascript">
    $(document).ready(function() {
      KR.onSubmit( function(event) {
        /* Change the button label to the orderStatus */
        $(".kr-payment-button > span:first").html(event.clientAnswer.orderStatus);
        $(".kr-spinner").hide();
        $(".kr-payment-button > span:first").show();
        
        /* return values:
         * true: kr-post-success-url is called using POST
         * false: kr-post-success-url is not called, execution stops.
         */
        return false;
      });
    });
  </script>

O callback recebe um object com 2 parâmetros:

KR: Referência à livraria
event: Objeto que contém a transação recém-criada.

L'objet contenu dans event est le même que celui posté par le formulaire. Pour plus de détails, rendez-vous ici : retour à la boutique.

O comportamento muda em função do booleano retornado pela sua função:

Valor de retorno	Comportamento
true	O cliente JavaScript realiza um POST em kr-post-success-url.
false	O post em kr-post-success-url não é realizado. Você pode gerenciar sozinho a ação post-pagamento.

KR.button.onClick()

KR.button.onClick() permite realizar processamentos personalizados antes que o cliente JavaScript valide o formulário e realize a chamada para criar uma transação. KR.button.onClick() aceita em parâmetro ou um callback, ou uma promessa (Promise).

Pode-se parar o string de execução retornando false no final do processamento:

Valor de retorno	Comportamento
false	a execução é interrompida. O gerenciamento de erros não ocorre. A transação não foi criada.
true	processamento segue normalmente na execução do callback.

KR.onTransactionCreated()

Existe 2 callbacks que permitem interceptar uma transação recém-criada:

KR.onSubmit() : Quando uma transação aceita é criada.
KR.onError() : Uma transação recusado é criada.

KR.onTransactionCreated() permite interceptar todas as transações recém criadas, que sejam aceitas ou recusadas. KR.onTransactionCreated() aceita ou uma chamada de retorno ou uma promessa como parâmetro.

O callback recebe um object com 2 parâmetros:

KR: Referência à livraria
event: Objeto que contém a transação recém-criada.

Pode-se parar o string de execução retornando false no final do processamento:

Valor de retorno	Comportamento
false	a execução é interrompida. Não ocorreu gestão de erro ou redirecionamento.
true	processamento segue normalmente na execução do callback.

KR.on3dSecureAbort()

Na autenticação 3D-Secure, o usuário pode escolher cancelar. Resultará no fechamento da popin 3DS-Secure e num erro de abandono Este evento permite interceptar a desistência de um usuário.

Note que, neste caso, a transação não é criada em tempo real. Uma transação recusada com um erro 149 será criada de maneira assíncrona, somente se o usuário não realizou uma nova tentativa de pagamento. A criação ocorrerá após um máximo de 10 minutos. Para interceptar esta transação, você deve usar as IPNs. Ver Generalidades sobre a IPN para maiores detalhes.

Métodos

Diversos métodos estão a sua disposição para interagir com o cliente JavaScript:

Método	Descrição
KR.field.focus()	Foca em um campo do formulário incorporado
KR.setFormConfig()	Permite sobrescrever a configuração do cliente JAvaScript, consultar a seção seguinte.
KR.setFormToken()	Atalho para alterar o form Token do formulário atual.
KR.setBrand()	Força a detecção do meio de pagamento.
KR.submit()	Submete o formulário(). Equivalente ao usuário clicando no botão do formulário
KR.validate()	Obsoleto, use KR.validateForm()
KR.validateForm()	Inicia a validação local do formulário.

Os métodos seguintes são obsoletas e não são mais suportadas. Não devem ser usados :

KR.validate(): usar KR.validateForm()
KR.registerPlugin()

Gestion de l'affichage en mode PopIn (voir undefined )

Método	Descrição
KR.closePopin()	Fechar o pop-in (se aberto)
KR.openPopin()	Abre a popIn (se fechada)
KR.setShopName()	Altera o nome da loja definido no cabeçalho da pop-in.

Gerenciamento dinâmico do formulário (Adição, remoção do DOM):

Método	Descrição
KR.addForm(CSS class or id)	Adiciona um formulário em um elemento do DOM. Retorna um formulário
KR.attachForm(CSS class or id)	Ativa o formulário em um DOM existente. Retorna um formulário
KR.hideForm(formId)	Ocultar o formulário
KR.removeEventCallbacks()	Apaga todos os callbacks anteriormente vinculados com as funções *KR.on[]**
KR.removeForms()	Apaga todos os formulários do DOM (chama automaticamente KR.removeEventCallbacks() )
KR.showForm(formId)	Exibir o formulário

pode consultar o github de Embedded Form Glue para maiores informações.

Manuseio do botão de apresentação do formulário de pagamento:

PARÂMETRO	Descrição
KR.button.setLabel('MON LABEL %amount-and-currency% ')	Define um label ou %amount-and-currency% será substituído pelo valor e a moeda
KR.button.showSpinner()	Exibe a animação de espera
KR.button.hideSpinner()	Ocultar a animação de espera
KR.button.disable()	Desative o botão (non clickable)
KR.button.enable()	Ative o botão

Todos os eventos retornam promessas, permitindo que você os integre em uma cadeia. Consulte Trabalhar em um ambiente assíncrono para obter mais informações.

KR.field.focus()

Para dar foco a um campo do formulário, você pode usar o método KR.field.focus(FIELD_CLASS) Deve informar como parâmetro classe do campo do formulário incorporado.

Por exemplo, para adicionar um botão que vai focar no campo data de validade:

<button type="button" onclick="KR.fields.focus('kr-expiry')">Focus expiry field</button>

KR.setFormConfig()

Este método permite sobrescrever os parâmetros de inicialização , mas também os elementos seguintes:

Uso	Descrição
KR.setFormConfig({formToken: "NEW_FORM_TOKEN"});	Muda o formToken atual.
KR.setFormConfig({language: "fr-FR"});	Muda o idioma do formulário de pagamento e das mensagens de erro.
KR.setFormConfig({'kr-label-do-register': 'custom'})	Define o selo da caixa para assinalar "Salvar meu cartão"

Este método retorna uma promessa (promise).

KR.setBrand()

Força a detecção do meio de pagamento. o método toma o nome do método de pagamento como parâmetro Os valores suportados são (não exaustivos):

visa
VISA_DEBIT
VISA_ELECTRON
mastercard
MASTERCARD_DEBIT
maestro
Amex
CB
(...)

Advertência: Se definir outro valor, ele será enviado sem modificação para a plataforma de pagamento. Se o valor não for suportado pela configuração da sua loja, nenhuma transação será criada.

Para reativar a detecção automática, chame KR.setBrand() sem parâmetros.

KR.validateForm()

Este método verifica localmente se o formulário estiver válido. Retorna uma promessa:

then() é chamado quando o formulário for válido. result terá o valor null.
catch() é chamado quando o formulário for inválido. result contém os detalhes do erro.

Exemplo de chamada:

KR.validateForm().then( ({KR, result}) => {

    /* there is no error */
    /* result == null */
    }

)
.catch( ({KR, result}) => {

    /* Get the error message */
    var code = result.errorCode;
    var message = result.errorMessage;
    var myMessage = code + ": " + message;
    console.log(myMessage);

    /* if you have defined a callback using      */
    /* result.onError(), you can trigger it calling: */
    return result.doOnError();
    }

);

Uma vez que você interceptou os erros, pode iniciar manualmente o evento KR.onError() chamando result.doOnError();.

Personalização do botão

O botão de pagamento é automaticamente adicionado no seu formulário a partir do código seguinte:

https://github.com/lyra/rest-php-examples/blob/master/www/minimalEmbeddedForm.php#L78-L79

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

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

Há múltiplas vantagens em usar nosso botão de pagamento:

Os labels são traduzidos automaticamente
O valor é automaticamente formatado e atualizado
PayZen gerencia a animação do aguarde
O botão passa automaticamente em read-only se for necessário

Se você quiser gerenciar sozinho o label do botão, basta adicioná-lo da forma seguinte:

<button class="kr-payment-button">Custom label</button>

Você pode também inserir uma variável que representa o valor e a moeda. O cliente JavaScript realizará automaticamente a substituição:

<button class="kr-payment-button">this will cost %amount-and-currency% !!</button>

Perguntas frequentes

Segua a FAQ relativa ao cliente Javascript.

Como corrigir os erros CORS ou “Unable to post message” na hora de pagar?

Primeiro, você deve desenvolver a partir de um servidor web. O acesso a página de teste deve ser acessada com http:// e não com file://

Se usar o framework ionic ou cordova , deverá declarar explicitamente os nomes de domínio que o cliente JavaScript pode chamar.. Para isso, é preciso adicionar em config.xml :

<allow-navigation href="https://static.lyra.com/static/js/krypton-client/V4.0" />

Para maiores informações ver aqui.

Como configurar os CSP (Content Security Policy)

Se seu site web usar os CSP (Content Security Policy), deverá autorizar o cliente JavaScript a criar seus IFrames. Para isso, é necessário acrescentar as 3 diretrizes a seguir:

Camada de segurança CSP	valores
connect-src	https://static.lyra.com
frame-src	https://static.lyra.com
script-src	https://static.lyra.com

Exemplo de adição nos meta do head da sua página:

<meta
  http-equiv="Content-Security-Policy"
  content="
    connect-src https://static.lyra.com;
    frame-src https://static.lyra.com;
    script-src https://static.lyra.com;"
/>

Para maiores informações sobre os CSP aqui.

Se você usar um motor de detecção de fraude externo (como monitor+, clearsale, …), deverá também adicionar:

Camada de segurança CSP	valores
connect-src	https://secure.lyra.com
frame-src	https://secure.lyra.com
script-src	https://secure.lyra.com

Uso avançado

Para ver todos os casos de uso avançado, você pode consultar os artigos seguintes:

Descrição	Artigo
Enviar os campos em função das suas necessidades	Caso de uso
Adicionar campos de formulário personalizados	Campos adicionais
Gérer les erreurs du formulaire de paiement	Gerenciamento dos erros
Gerenciamento das novas tentativas de pagamento (retry)	Gerenciamento do retry
Paramètres généraux du client JS	Parâmetros gerais
Exemplo de código	Exemplo de código

Exemplos de integração

Em função do framework JavaScript que você usa no seu site de e-commerce, vários exemplos de integração estão disponíveis aqui:

Framework	Descrição
Vue.js	exemplo de integração para Vue.js
React	exemplo de integração para React
React + NextJS	exemplo de integração com React e NextJS
Angular	exemplo de integração para Angular e TypeScript
ionic	exemplo de integração para Ionic
require.js	exemplo de integração com RequireJS
Javacript	Livraria genérica para ser usada nos framework javascripts
[C#][csharp]	exemplo de integração para C# (.NET)
python/flask	exemplo em python com o framework flask
php/symfony	exemplo em python em PHP com symfony

Categoria

Tags