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-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"
        (...)
        kr-public-key="61881992:testpublickey_k7sM5cu1WTzkCCqU966agj3Ia3b04Pcsw4dZoeLVVUbc3"
        (...)
 </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-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 connaître les autres paramètres. Après la balise <script>, choisissez un thème.

Choose a theme.

Classic is the 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/classic.css">
  <script
  src="https://static-sogecommerce.societegenerale.eu/static/js/krypton-client/V4.0/ext/classic.js">
 </script>
 (...)
 </head>

More info on 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 with file config.php
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 CLASSIC should be loaded in the HEAD section   -->
<link rel="stylesheet" href="https://static-sogecommerce.societegenerale.eu/static/js/krypton-client/V4.0/ext/classic-reset.min.css">
<script src="https://static-sogecommerce.societegenerale.eu/static/js/krypton-client/V4.0/ext/classic.js">
 </script>
 </head>

II. Define the display mode

In the BODY, choose the display mode that suits you.

Mode	Description
embedded	Displays the fields of card payment (card number, expiry date, CVV, etc.)
pop-in	Displays a payment button that opens a pop-up window containing the payment fields (card number, expiry date, CVV, etc.).

Embedded mode	Pop-in mode
<body> <div class="kr-embedded" kr-form-token="[GENERATED FORMTOKEN]"></div> (...) </body>	<body> <div class="kr-embedded" kr-popin kr-form-token="[GENERATED FORMTOKEN]"></div> (...) </body>
More info: Embedded Mode	More info: Pop-in mode

III. Advanced customization

This step is optional.

Example of customization :

IV. Simplified example in PHP

In the sample folder, the sample files are:

embedded.php.
popin.php.

To get more details, Example files: embedded.php and popin.php

Categories