Migrating from the embedded form (cards) to the smartForm

Objective

• Migrating from the embedded form (cards) to the smartForm

I. Choose the display mode

This step allows you to define the display mode of the smartForm, depending on the implementation of your current payment form. Choose your implementation mode:

• embedded mode
• pop-in mode

Embedded mode

In your code, replace:

<div class="kr-embedded" kr-form-token="GENERATED TOKEN">

By

<div class="kr-smart-form" kr-form-token="GENERATED TOKEN">

The form is displayed using the list mode , if the shop has compatible payment methods (link to List of compatible payment methods ).

If the store has only card payment, then the form is displayed directly with the embedded fields.

Pop-in mode

In your code, replace:

<div class="kr-embedded" kr-popin kr-form-token="[GENERATED FORMTOKEN]">

By

<div class="kr-smart-form" kr-popin kr-form-token="[GENERATED FORMTOKEN]">

When you click on the payment button, a pop-up window appears with all the compatible payment methods.

III. Payment Analysis - Instant Notification

The material theme is not supported by the smartForm, make sure to not use it.

If you use it, replace it in your code:

src="https://static.payzen.eu/static/js/krypton-client/V4.0/ext/material.js">
<link rel="stylesheet" href="https://static.payzen.eu/static/js/krypton-client/V4.0/ext/material-reset.css">

By

src="https://static.payzen.eu/static/js/krypton-client/V4.0/ext/neon.js">
<link rel="stylesheet" href="https://static.payzen.eu/static/js/krypton-client/V4.0/ext/neon-reset.min.css">

If you want to know more about the theme, click on the "Themes" link.

Advanced personalization

If you have customized the embedded form, click on this link "Advanced customization ". This page describes how to customize your new payment form.

• For example: replace on your CSS the class name :
  • class="kr-embedded"Byclass="kr-smart-form"

III. Payment Analysis - Instant Notification

An additional object is returned at the end of the payment. This new object describes the payment method used by the buyer:

• ThepaymentMethodDetails

You can ignore it if you wish. It does not have to be taken into account. You can keep your current implementation of instant notification at the end of the payment (IPN).

For example,
si vous utilisez la carte de TEST "VISA" avec cepan(card number) "4970 1000 0000 0014", the object will containpaymentMethodDetailsthis result:

"transactions":[
  {
  (...)
   "transactionDetails":{
      (...)
      "paymentMethodDetails":{
        "id":"497010XXXXXX0014",
        (...)
      },
    },
  },
 ],