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
of the page, you must include the following data in a <script>
tag.
- Load our JavaScript library
src="https://static.scelliuspaiement.labanquepostale.fr/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js"
- Implement the public key
Set the public key in the parameter. kr-public-key
<head> (...) <script type="text/javascript" (...) kr-public-key="42229744:testpublickey_tPXxrUVsoGkggk9LuO8o0PBRdWg8jWUhWmYMURwCbc8ap" (...) </script> (...) </head>
As a reminder, it corresponds to the 3 rd key of the table.
- Add more 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.scelliuspaiement.labanquepostale.fr/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js" kr-public-key="42229744:testpublickey_tPXxrUVsoGkggk9LuO8o0PBRdWg8jWUhWmYMURwCbc8ap" 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>
, choississez un thème.
- Choose a theme
Neon is the new default theme. Here are the links to load this theme.
<head> (...) <link rel="stylesheet" ref="https://static.scelliuspaiement.labanquepostale.fr/static/js/krypton-client/V4.0/ext/neon-reset.min.css"> <script src="https://static.scelliuspaiement.labanquepostale.fr/static/js/krypton-client/V4.0/ext/neon.js"> </script> (...) </head>
More info: themes.
- Adding JS functions ( optional ):
In another
<script>
tag, you can integrate events or JS methods.For more details, Event presentation and Method presentation.
Example 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.scelliuspaiement.labanquepostale.fr/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js" kr-public-key="42229744:testpublickey_tPXxrUVsoGkggk9LuO8o0PBRdWg8jWUhWmYMURwCbc8ap" kr-post-url-success="paid.php"; kr-language="en-EN"> </script> <!-- theme NEON should be loaded in the HEAD section --> <link rel="stylesheet" ref="https://static.scelliuspaiement.labanquepostale.fr/static/js/krypton-client/V4.0/ext/neon-reset.min.css"> <script src="https://static.scelliuspaiement.labanquepostale.fr/static/js/krypton-client/V4.0/ext/neon.js"> </script> </head>
II. Define the display mode
In the BODY
, choose the display mode that suits you.
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 :
III. Advanced customization
This step is optional.
Example of customization :
- Select payment methods
- Hide card payment logos
- Modifier l'ordre d'affichage
- 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