• France
lyra.com
Rechercher
Catégories
Tags
France
France
Espagne
Europe (Anglais)
Inde
Implémentation
Formulaire intelligent (smartForm)
Formulaire embarqué (cartes)
API REST
API REST PCI-DSS
API REST SEPA
Formulaire en redirection
Échange de fichiers
Paiement mobile
Exemples de code
Modules de paiement
Marketplace
Back Office
Back Office Marchand
Back Office Expert
Guides
Aide
FAQ
Tutoriels vidéos
Support

Personnaliser la mise en page

Pour aligner horizontalement les champs du formulaire embarqué, utilisez les Flexbox en CSS avec la propriété flex-direction valorisée à row.

Les champs du formulaire embarqué sont placés dans un ou plusieurs conteneurs:

    <div class="flex-container">...</div>

A l'intérieur d'une DIV parent:

    <div class="kr-smart-form">...</div>

Pour plus d'infos CSS Flexbox (Flexible Box).

Exemple

Exemple de code

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

    <!-- theme and plugins. should be loaded in the HEAD section -->
    <link rel="stylesheet" href="https://static.lyra.com/static/js/krypton-client/V4.0/ext/neon-reset.css">
    <script type="text/javascript" src="https://static.lyra.com/static/js/krypton-client/V4.0/ext/neon.js"></script>
  

<style type="text/css">
/* choice the size */  
.kr-smart-form {
  width: 33% !important;
  }
  
  /* to choice the size of the embedded form*/
.kr-smart-form .kr-embedded {
  width: 100% !important;
  }
  
/* to use the CSS Flexbox (Flexible Box) */  
 .kr-smart-form .kr-embedded .flex-container {
  flex-direction: row !important;
  display: flex;
  }
  
/* tocenter the button */ 
  .kr-smart-form .kr-embedded .kr-payment-button {
  margin-left: auto;
  margin-right: auto;
  width: 100% !important;
}
</style>
</head>
<body>
    <div class="kr-smart-form" kr-card-form-expanded kr-form-token="[GENERATED FORMTOKEN]">
      <div class="kr-embedded">
        <div class="flex-container">
          <div class="kr-pan">
          </div>
          <div class="kr-expiry">
          </div>
          <div class="kr-security-code">
          </div>
        </div>
        <button class="kr-payment-button">
        </button>
      </div>
    </div> 
</body>
Nous recrutons

Head Office :

LYRA NETWORK
109, rue de l’innovation
31670 Labège
FRANCE

2.16.0-doc-1.8