Presentation of the smartForm
The smartForm allows you to integrate a frictionless payment process and offer multiple payment methods.
The buyer will complete the payment process without leaving the merchant site.
Major evolution of the embedded form (cards)
The smartForm has the advantage of improving the embedded form (cards) by offering new features. For the upgrade, click here
List of compatible payment methods
See the list of compatible payment methods.
Use cases
| Description | List mode (default) |
|---|---|
| This mode displays the list of the card payment and the compatible payment method buttons. |  |
Check this link to getadditional information: :
list mode
| Description | Pop-in mode |
|---|---|
| This mode displays a single button that opens a pop-in containing the card payment button and the compatible payment methods. |
Check this link to getadditional information: :
pop-in mode
| Description | List mode with embedded card |
|---|---|
| This mode displays the embedded fields for card payments and compatible payment methods. |  |
Check this link to getadditional information: :
List mode with embedded card
| Description | List mode (default) |
|---|---|
| Here's an illustration to highlight the SEPA Credit Transfer (Payment Initiation). It displays the card payment fields and a button for the compatible payment method of your choice. |  |
Check this link to getadditional information: : mettre en évidence un moyen de paiement.
| Description | Pop-in mode |
|---|---|
| Here's an illustration to highlight the SEPA Credit Transfer (Payment Initiation). It displays a button for card payment and a button for the compatible payment method of your choice. |  |
Check this link to getadditional information: :
mettre en évidence un moyen de paiement.
| Description | List mode with embedded card |
|---|---|
| Here's an illustration to highlight the SEPA Credit Transfer (Payment Initiation). It displays the card payment fields and a button for the compatible payment method of your choice. |  |
Check this link to getadditional information: :
mettre en évidence un moyen de paiement.
| Description | List mode with embedded card |
|---|---|
| Here is an example for highlighting several payment methods: SEPA wire transfer (Payment Initiation) and Apple Pay. It displays the card payment fields, with a button for each compatible payment method highlighted. |  |
Check this link to getadditional information: :
highlighting several payment methods:
| Description | Pop-in mode |
|---|---|
| Here is an example for highlighting several payment methods: SEPA wire transfer (Payment Initiation) and Apple Pay. It displays a button for card payments and a button for each of the highlighted compatible payment methods. |  |
Check this link to getadditional information: :
highlighting several payment methods:
| Description | List mode with embedded card |
|---|---|
| Here is an example for highlighting several payment methods: SEPA wire transfer (Payment Initiation) and Apple Pay. It displays the card payment fields, with a button for each compatible payment method highlighted. |  |
Check this link to getadditional information: :
highlighting several payment methods:
| Hide card payment logos | |
|---|---|
<body> <div class="kr-smart-form" kr-card-form-expanded kr-no-card-logo-header kr-form-token="[GENERATED FORMTOKEN]"> (...) </div> </body> |  |
Check this link to getadditional information: :
Hide card payment logos
| Personalize the page layout | |
|---|---|
<style type="text/css">
(...)
/*to use the CSS Flexbox (Flexible Box)*/
.kr-smart-form .kr-embedded .flex-container {
flex-direction: row !important;
display: flex;
}
</style>
<body>
<div class="kr-smart-form" kr-card-form-expanded kr-form-token="[GENERATED FORMTOKEN]">
(...)
</div>
</div>
</body> |  |
Check this link to getadditional information: :
Personalize the page layout
You also have the possibility to:
Technical implementation
If you have already implemented the embedded form (cards), you will find the information to migrate to the smartForm:
The different stages of integration are :
- Prerequisites
- Authenticate
- Createthe
formToken. - Display the payment form.
- Analyze the payment result.
- Switch to Production.
To get more information, go to Payment Form Integration.
