• France
status page
Demo shops
assistance
FAQContact support
Search
Categories
Tags
Europe (English)
France
Spain
Europe (English)
India
Homepage
Use cases
Create a payment
Create an installment payment
Create a multi-card (split) payment
Create a payment by Alias (Token)
Create a payment link
Create a recurring payment
Manage subscriptions
Manage your transactions (refund, cancel...)
Analyze your reports
API docs
Embedded Form
REST API
Hosted payment
Mobile payment
File exchange
SDD mandates by REST API
Snippets
Payment methods
Plugins
Marketplace
Guides
Merchant Back Office
Back Office Expert
Functional guides

Step 4: Display the payment form

Objective

  • Display all payment fields (card number, expiration date, CVV, etc.) on your website.

I. Initalize the payment form

In the HEAD,,

  1. Loadour JavaScript libraryin a tag called<script>.

It is imperative for the main library to be loaded very early on, well before the other JS libraries used on your page.

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

Set the public key in the parameter 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>

As a reminder, it corresponds to the 3 rd key of the table.

3. Add other initialization parameters
  • Add 2 initialization parameters , for example:
name Description
kr-post-url-success URL to which the buyer's browser is redirected in case of a successful payment. ( recommended )
kr-language Defines the language in which the form will be displayed. Accepts ISO 639-1 (en or en-US). If the parameter is not defined, the form uses the language of the browser.

. Code sample:

<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. Choose a theme

Neon is the new default theme. Here are the links to load this theme.

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

More info: themes.

5. Adding JS functions (optional)

  • In another <script> tag, you can integrate events or JS methods.

  • For more details, Event presentation and Method presentation.

Example of code for the HEAD without JS function

<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. Define the display mode

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).

Mode Description
list Displays a list of available and compatible payment methods Default display.
pop-in Displays a payment button that opens a pop-in containing available and compatible payment methods.
list with embedded card Displays the embedded fields for card payment and the available and compatible payment methods.
List mode (default) Pop-in mode List mode with embedded card
 
<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>
More info: List mode More info: Pop-in mode More info: List mode with embedded card

You also have the choice :

  • Highlight a payment method ;
  • Highlight multiple payment methods ;

III. Advanced customization

This step is optional.

Example of customization :

  • Hide card payment logos
  • Change the display order
  • Personalization of payment buttons.
  • Personalize the page layout

IV. Simplified example in PHP

In the sample folder, the file for this step is smartForm.php.

For more details, Example file: smartForm.php

NEXT STEP N°5

Jobs
Legal
GDPR
2.93.0-doc-1.11