Etapa 4: Exibir o formulário de pagamento

Objetivo

Exibir todos os campos de pagamento (número de cartão, data de validade, CVV, etc.) no seu site Web.

I.Iniciar o formulário de pagamento

No HEAD da página, é preciso incluir em um tag <script> os dados seguintes.

Carregar nossa biblioteca JavaScript

src="https://static.lyra.com/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js"

Implementar a chave pública

Valor, da chave pública , no parâmetro kr-public-key

<head>
(...)
<script type="text/javascript"
        (...)
        kr-public-key="69876357:testpublickey_DEMOPUBLICKEY95me92597fd28tGD4r5"
        (...)
 </script>
(...)
 </head>

Como lembrete, ela corresponde à 3ª chave da tabela.

Adicionar outros parâmetros de inicialização

Adição de 2 parâmetros de inicializado , por exemplo:

SOBRENOME	Descrição
kr-post-url-success	URL para qual será redirecionado o navegador do comprador se o pagamento for realizado com sucesso. ( recomendado )
kr-language	Define o idioma de exibição do formulário. Aceita o iso ISO 639-1 (fr ou fr-FR). Se o parâmetro não estiver definido, o formulário usará o idioma do navegador.

. Exemplo de código:

<head>
(...)
<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.php";
        kr-language="en-EN">
 </script>
(...)
 </head>

Consulte estas duas seções: Configurações Gerais e Configurações de Personalização de Espaço Reservado para outras configurações . Após a tag <script> , escolha um tema .

Escolha um tema

Classic é o tema por padrão. Aqui estão os links para carregar esse tema.

<head>
(...)
<link rel="stylesheet" href="https://static.lyra.com/static/js/krypton-client/V4.0/ext/classic.css">
  <script
  src="https://static.lyra.com/static/js/krypton-client/V4.0/ext/classic.js">
 </script>
 (...)
 </head>

Mais informações sobre os temas.

Adicionar funções JS ( opcional ):

Em outra tag <script>, integrar eventos ou métodos JS.
Para obter mais detalhes, consulte Apresentação dos eventos e Apresentação dos métodos.

. Exemplo de código para o HEAD sem função JS:

<head>
<!-- STEP :
1 : load the JS librairy 
2 : required public key with file config.php
3 : the JS parameters url sucess and langage EN  -->

<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.php";
        kr-language="en-EN">
 </script>

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

II. Definir o modo de exibição

No BODY , escolha o modo de exibição mais adequado para você.

Modo	Descrição
incorporado	Exibe os campos do pagamento por cartões (número de cartão, data de expiração, CVV, etc.)
pop-in	Exibe um botão de pagamento que abre uma pop-in contendo os campos de pagamento (número do cartão, data de validade, CVV, etc.).

Modo incorporado	Modo Popin
<body> <div class="kr-embedded" kr-form-token="[GENERATED FORMTOKEN]"></div> (...) </body>	<body> <div class="kr-embedded" kr-popin kr-form-token="[GENERATED FORMTOKEN]"></div> (...) </body>
Mais informações : Modo incorporado	Mais informações : Modo pop-in

III. Personalização avançada

Essa etapa é opcional.

Exemplo de personalização:

IV. Exemplo simplificado PHP

Na pasta sample, os arquivos de exemplo são:

embedded.php.
popin.php.

Para obter mais detalhes, Arquivo de exemplo: embedded.php e popin.php

Categoria