Displaying a form
Dans l'étape précédente, nous avons créé un formToken à l'aide du Web Service REST Charge/CreatePayment Le formToken est utilisé par la librairie JavaScript pour afficher un formulaire de paiement.
Code sample
To insert a payment form, all you need to do is include the following code (with the previously generated formToken):
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- Javascript library. Should be loaded in head section -->
<script
src="https://static.systempay.fr/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js"
kr-public-key="73239078:testpublickey_Zr3fXIKKx0mLY9YNBQEan42ano2QsdrLuyb2W54QWmUJQ"
kr-post-url-success="paid.html">
</script>
<!-- theme and plugins. should be loaded after the javascript library -->
<!-- not mandatory but helps to have a nice payment form out of the box -->
<link rel="stylesheet"
href="https://static.systempay.fr/static/js/krypton-client/V4.0/ext/classic-reset.css">
<script
src="https://static.systempay.fr/static/js/krypton-client/V4.0/ext/classic.js">
</script>
</head>
<body>
<!-- payment form -->
<div class="kr-embedded" kr-form-token="DEMO-TOKEN-TO-BE-REPLACED">
<!-- payment form fields -->
<div class="kr-pan"></div>
<div class="kr-expiry"></div>
<div class="kr-security-code"></div>
<!-- payment form submit button -->
<button class="kr-payment-button"></button>
<!-- error zone -->
<div class="kr-form-error"></div>
</div>
</body>
</html> <!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- Javascript library. Should be loaded in head section -->
<script
src="<?php echo $client->getClientEndpoint();?>/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js"
kr-public-key="<?php echo $client->getPublicKey();?>"
kr-post-url-success="paid.php">
</script>
<!-- theme and plugins. should be loaded after the javascript library -->
<!-- not mandatory but helps to have a nice payment form out of the box -->
<link rel="stylesheet"
href="<?php echo $client->getClientEndpoint();?>/static/js/krypton-client/V4.0/ext/classic-reset.css">
<script
src="<?php echo $client->getClientEndpoint();?>/static/js/krypton-client/V4.0/ext/classic.js">
</script>
</head>
<body style="padding-top:20px">
<!-- payment form -->
<div class="kr-embedded" kr-form-token="<?php echo $formToken;?>">
<!-- payment form fields -->
<div class="kr-pan"></div>
<div class="kr-expiry"></div>
<div class="kr-security-code"></div>
<!-- payment form submit button -->
<button class="kr-payment-button"></button>
<!-- error zone -->
<div class="kr-form-error"></div>
</div>
</body>
</html>The following sections provide a detailed description of the previous code sample.
Loading the library
You must load the JavaScript library used for building the payment form in the HEAD of your page.
It is imperative for the main library to be loaded very early on, well before the other JS libraries used on your page :
<!-- Javascript library. Should be loaded in head section --> <script src="https://static.systempay.fr/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js" kr-public-key="73239078:testpublickey_Zr3fXIKKx0mLY9YNBQEan42ano2QsdrLuyb2W54QWmUJQ" kr-post-url-success="paid.html"> </script>
<!-- Javascript library. Should be loaded in head section --> <script src="<?php echo $client->getClientEndpoint();?>/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js" kr-public-key="<?php echo $client->getPublicKey();?>" kr-post-url-success="paid.php"> </script>
Several parameters are available (non-exhaustive list):
| name | required | Description |
|---|---|---|
| kr-public-key | ✓ | Public key. This parameter is mandatory. For more details, see Requirements (Keys). |
| kr-post-url-success | URL to which the buyer's browser is redirected in case of a successful payment. If the parameter is not defined, the payment result is posted to the current URL. | |
| 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. |
For a complete list of available configuration parameters, see this page.
Applying a theme
The payment form uses a default styles (CSS) for customizing the payment form. Several style sheets are available, but you can also create your own.
To use the default theme, all you need to do is include the following style sheet in the HEAD section of your page:
<!-- theme and plugins. should be loaded after the javascript library --> <!-- not mandatory but helps to have a nice payment form out of the box --> <link rel="stylesheet" href="https://static.systempay.fr/static/js/krypton-client/V4.0/ext/classic-reset.css"> <script src="https://static.systempay.fr/static/js/krypton-client/V4.0/ext/classic.js"> </script>
<!-- theme and plugins. should be loaded after the javascript library --> <!-- not mandatory but helps to have a nice payment form out of the box --> <link rel="stylesheet" href="<?php echo $client->getClientEndpoint();?>/static/js/krypton-client/V4.0/ext/classic-reset.css"> <script src="<?php echo $client->getClientEndpoint();?>/static/js/krypton-client/V4.0/ext/classic.js"> </script>
The theme files are optional. If they are not included, the payment form will be functional but will have minimalist design.
More details on customizing the form: Themes.
Inserting form fields
<!-- payment form -->
<div class="kr-embedded" kr-form-token="DEMO-TOKEN-TO-BE-REPLACED">
<!-- payment form fields -->
<div class="kr-pan"></div>
<div class="kr-expiry"></div>
<div class="kr-security-code"></div>
<!-- payment form submit button -->
<button class="kr-payment-button"></button>
<!-- error zone -->
<div class="kr-form-error"></div>
</div> <!-- payment form -->
<div class="kr-embedded" kr-form-token="<?php echo $formToken;?>">
<!-- payment form fields -->
<div class="kr-pan"></div>
<div class="kr-expiry"></div>
<div class="kr-security-code"></div>
<!-- payment form submit button -->
<button class="kr-payment-button"></button>
<!-- error zone -->
<div class="kr-form-error"></div>
</div>The form must be defined in a div container with the kr-embedded class. The kr-form-token parameter must contain the formToken that was previously generated during the call to the Charge/CreatePayment REST web service.
. The form fields are inserted from special DIV containers. They are identified from the following classes:
| PARAMETER | Description |
|---|---|
| kr-pan | Card number. |
| kr-expiry | Expiry date |
| kr-security-code | Security code (CVV) |
| kr-installment-number | Number of instalments (LATAM specific field) |
| kr-first-installment-delay | Differed Number of months to apply on the first instalment (LATAM specific field) |
| kr-identity-document-type | Type of identity document (LATAM specific field) |
| kr-identity-document-number | ID number (LATAM specific field) |
| kr-card-holder-name | Name of the cardholder (LATAM specific field) |
| kr-card-holder-mail | Cardholder's e-mail address (LATAM specific field) |
| kr-do-register | the card token creation confirmation checkbox |
The JavaScript client automatically adds the fields required by the acquirer.
You can adjust the display order of form fields by declaring them in your code. For example, to force the kr-installment-number field to display just before the "pay" button, simply declare it last:
<!-- payment form fields --> <div class="kr-pan"></div> <div class="kr-expiry"></div> <div class="kr-security-code"></div> <div class="kr-installment-number"></div> <!-- payment form submit button --> <button class="kr-payment-button"></button>
If you have declared a field not required by the acquirer, the JavaScript client will automatically remove it.
Error handling
Errors are automatically displayed in the div with the kr-form-error class:
<!-- error zone -->
<div class="kr-form-error"></div> <!-- error zone -->
<div class="kr-form-error"></div>You can also handle errors yourself. Click here for more information.
Payment button
In order to validate your form, all you need to do is add a classic HTML button with the kr-payment-button class. The label will be automatically inserted in the correct language:
<!-- payment form submit button -->
<button class="kr-payment-button"></button> <!-- payment form submit button -->
<button class="kr-payment-button"></button>Testing the form
To move on to the next step, you must make a payment. Select a valid card using the debug sidebar of the form (in the bottom left corner) and click pay:
Vous pouvez également vous rendre directement à l'étape suivante : retour à la boutique.