Le formulaire embarqué (smartForm) vous permet d'intégrer un parcours de paiement fluide et de présenter plusieurs moyens de paiement.
The buyer will complete the payment process without leaving the merchant site.

Use cases

Choose the display mode: list / pop-in / list with embedded card

List mode

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

Pop-in 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

List mode with embedded card

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

Highlight a payment method

Consultez ce lien pour avoir des informations complémentaires: mettre en évidence un moyen de paiement.

highlighting several payment methods

Check this link to getadditional information: : highlighting several payment methods:

Customizing the smartForm

Hide card payment logos

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> Integrate the class`kr-smart-form`and the parameter`kr-no-card-logo-header`within the DIV, containing the`formToken`. By integrating this feature, the merchant can then integrate his logos in order to personalize his payment form.

Check this link to getadditional information: : Hide card payment logos

Customizing the page layout: example of horizontal alignment

Personalize the page layout

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> Integrate the class`kr-smart-form`and the parameter`kr-card-form-expanded`within the DIV, containing the`formToken`. To alignhorizontallythe fields of the embedded form, you can use theFlexbox in CSSand the parameter`flex-direction`valued atrow.

<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: : Advanced personalization

Technical implementation

Migrating from the embedded form (cards) to the smartForm

Si vous avez déjà implémenté le formulaire embarqué (cartes), vous trouverez les informations pour migrer vers le formulaire embarqué (smartForm) :

here

SmartForm integration

The different stages of integration are :

Prerequisites
Authenticate
CreatetheformToken.
Display the payment form.
Analyze the payment result.
Switch to Production.

To get more information, go to Payment Form Integration.

Categories

Tags

SmartForm presentation

Major evolution of the embedded form (cards)

Integration of new payment methods

Customization with CSS and access to several themes

Use cases

Technical implementation