• France
status page
demonstrations
assistance
FAQContact support
Search
Categories
Tags
English
French
English
Homepage
Use cases
Create a payment
Create an installment payment
Create a multi-card (split) payment
Create a payment by Alias (Token)
Create a payment link
Create a recurring payment
Manage subscriptions
Manage your transactions (refund, cancel...)
Analyze your reports
API docs
Embedded Form
REST API
Hosted payment
Mobile payment
File exchange
Snippets
Payment methods
Plugins
Guides
Merchant Back Office
Functional guides

SmartForm presentation

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.

Major evolution of the embedded form (cards)

The smartForm offers the advantage of enhancing the embedded form (cards) by providing new features. If you would like to migrate, click here

Integration of new payment methods

The embedded form (smartForm) allows you to easily add "non-card" payment methods (redirection, QR code, cash payment, etc.) without development for example: Apple Pay...

Customization with CSS and access to several themes

.

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 is an illustration to highlight Paypal.

It displays the card payment fields and a button for the compatible payment method of your choice.
Check this link to getadditional information::highlight a payment method.

Description Pop-in mode
Here is an illustration to highlight Paypal

It displays a button for card payment and a button for the compatible payment method of your choice.
Check this link to getadditional information::highlight a payment method.

Description List mode with embedded card
Here is an illustration to highlight Paypal.

It displays the card payment fields and a button for the compatible payment method of your choice.
Check this link to getadditional information::highlight a payment method.

Apple Pay is only compatible with the Safari browser, available on Apple brand computers and phones (Mac, iPhone and iPad).

Description List mode with embedded card
Here is an illustration to highlight several payment methods: Paypal 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 illustration to highlight several payment methods: Paypal 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 illustration to highlight several payment methods

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>

Integrate the classkr-smart-formand the parameterkr-no-card-logo-headerwithin the DIV, containing theformToken.

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

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 classkr-smart-formand the parameterkr-card-form-expandedwithin the DIV, containing theformToken.

To alignhorizontallythe fields of the embedded form, you can use theFlexbox in CSSand the parameterflex-directionvalued atrow.

Check this link to getadditional information::Advanced personalization


You also have the possibility to:
  • Changing the display order
  • Select payment methods

Technical implementation

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

  • here

The different stages of integration are :

  1. Prerequisites
  2. Authenticate
  3. CreatetheformToken.
  4. Display the payment form.
  5. Analyze the payment result.
  6. Switch to Production.

To get more information, go to Payment Form Integration.

© 2025 {'|'} All rights reserved to Sogecommerce
25.18-1.11