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,,
- Loadour JavaScript libraryin a tag called
<script>.
src="https://static-sogecommerce.societegenerale.eu/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"
src="https://static-sogecommerce.societegenerale.eu/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js"
kr-public-key="61881992:testpublickey_k7sM5cu1WTzkCCqU966agj3Ia3b04Pcsw4dZoeLVVUbc3"
(...)
>
</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-sogecommerce.societegenerale.eu/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js"
kr-public-key="61881992:testpublickey_k7sM5cu1WTzkCCqU966agj3Ia3b04Pcsw4dZoeLVVUbc3"
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-sogecommerce.societegenerale.eu/static/js/krypton-client/V4.0/ext/neon-reset.min.css"> <script src="https://static-sogecommerce.societegenerale.eu/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-sogecommerce.societegenerale.eu/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js"
kr-public-key="61881992:testpublickey_k7sM5cu1WTzkCCqU966agj3Ia3b04Pcsw4dZoeLVVUbc3"
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-sogecommerce.societegenerale.eu/static/js/krypton-client/V4.0/ext/neon-reset.min.css">
<script src="https://static-sogecommerce.societegenerale.eu/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 :
III. Advanced customization
This step is optional.
Example of customization :
IV. Simplified example in PHP
In the sample folder, the file for this step is smartForm.php.
For more details, Example file: smartForm.php