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

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

  1. Carreguenossa biblioteca JavaScriptem um tag<script>.

É imperativo que a biblioteca principal seja instalada o quanto antes, bem antes das outras livrarias JS usadas na sua página.

src="https://static.lyra.com/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js"
  1. Implementar a chave pública

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

<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"
        (...)
>
 </script>
(...)
 </head>

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

3. Ajoutez d'autres paramètres d'initialisation
  • 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>

Référez-vous à ces 2 rubriques Paramètres généraux et Paramètres de personnalisation des "placeholders" pour les autres paramètres. Après la balise <script>, choisissez un thème.

4. Choisissez un thème

Néon é o novo 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/neon-reset.min.css">
  <script
  src="https://static.lyra.com/static/js/krypton-client/V4.0/ext/neon.js">
 </script>
 (...)
 </head>

Para maiores detalhes: temas.

5. Ajout des fonctions JS (facultatif)

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

II. Definir o modo de exibição

Dans le BODY, choisissez le mode d'affichage et valorisez le paramètre kr-form-token avec le formToken généré (Etape 3 : Créer un formToken).

Modo Descrição
lista Apresenta uma lista de meios de pagamento disponíveis e compatíveis Apresentação default.
pop-in Exibe um botão de pagamento que abre uma janela pop-up com os meios de pagamento disponíveis e compatíveis.
lista com cartão incorporado Exibe os campos incorporados para pagamentos com cartão e os meios de pagamento disponíveis e compatíveis.
Modo lista (default) Modo Popin Modo lista com cartão incorporado
 
<body>
        <div class="kr-smart-form" kr-form-token="[GENERATED FORMTOKEN]"></div>
        (...)
</body>
 
<body>
        <div class="kr-smart-form" kr-popin kr-form-token="[GENERATED FORMTOKEN]"></div>
        (...)
</body>
 
<body>
        <div class="kr-smart-form" kr-card-form-expanded kr-form-token="[GENERATED FORMTOKEN]"></div>
        (...)
</body>
Mais informações : Modo de lista Mais informações : Modo pop-in Mais informações : Modo lista com cartão incorporado

Também pode escolher:

  • destacar um meio de pagamento ;
  • destacar diferentes meios de pagamento ;

III. Personalização avançada

Essa etapa é opcional.

Exemplo de personalização:

  • Ocultar os logos do pagamento por cartão
  • Modificar a ordem de exibição
  • Personalização dos botões de pagamento
  • Personalizar o layout

IV. Exemplo simplificado PHP

Na pasta sample, o arquivo para essa etapa é smartForm.php.

Para obter mais detalhes, Arquivo de exemplo: smartForm.php

ETAPA SEGUINTE N°

Jobs
Legal
GDPR
25.22-1.11