Intégrer le mode Grid

Intégrez ce mode Grid pour créer des mises en page sous forme de grille.

Il facilite l'alignement des boutons de paiement en colonnes et en lignes.

Intégration

1. Avec les fonctions JS

Utilisez les méthodes KR.onFormReady et KR.setFormConfig ( Voir les fonctions JS).

Paramètre	Description	Valeur
smartForm.layout	Choix du mode	grid
smartForm.otherPaymentMethods.labelVisibility	Affichage du moyen de paiement	show Valeur, par défaut. Le bouton de paiement s'affiche toujours avec le logo et le nom du moyen de paiement. La longueur du nom détermine automatiquement le nombre de colonnes. hide Le bouton de paiement s'affiche uniquement avec le logo du moyen de paiement. auto La taille du bouton de paiement dépend du nombre de colonne et de la largeur du formulaire.
smartForm.otherPaymentMethods.grid.columns	Choix du nombre de colonnes	2 choix possibles : soit la valeur max C'est le nombre maximal de colonnes selon la valeur du labelVisibility (show, hide ou auto) et la largeur du formulaire. soit un nombre. Ex : "3" pour 3 colonnes.
smartForm.otherPaymentMethods.grid.justify	Type de justification	start Valeur, par défaut. stretch La taille du bouton de paiement s'ajuste pour occuper l'espace disponible sur la dernière ligne.

Exemple de code

<script type="text/javascript">
  KR.onFormReady(function () {
         KR.setFormConfig({
          smartForm: {
             layout: "grid",
              otherPaymentMethods: {
                labelVisibility: "show", //"show" (by default) or "hide" or "auto"
                  grid: {
                      columns: "max", // "number" or "max"
                      justify : "start" // "start" (by default) or "stretch"
                  }
              }
        },
        });
      });

</script>

Personnalisation du label et de l'icône

Personnalisez le label et l'icône des boutons de moyens de paiement avec les données suivantes :

Attribut	Description	Format
"[NAME]"	Sélectionne le moyen de paiement ( lien vers le tableau des moyens de paiement)	Chaîne de caractères.
"[CUSTOM_NAME]"	Change le label du moyen de paiement	Chaîne de caractères.
"[SRC_PICTURE]"	Change l'icône du moyen de paiement	Image encodée en base64, en png, jpg, svg ou un lien externe CDN.

Exemple de code :

<script type="text/javascript">
  KR.onFormReady(function () {
         KR.setFormConfig({
          smartForm: {
              paymentMethods: {
                  "[NAME]": {
                      label: "[CUSTOM_NAME]",
                      icon : "[SRC_PICTURE]",
                  }
              }
        },
        });
      });
</script>

Pour Apple Pay

Exemple de code

<script type="text/javascript">
KR.onFormReady(function (){
  KR.setFormConfig({
   smartForm: {
    paymentMethods: {
     "APPLE_PAY": {
      label: " Apple",
      icon : "https://img.icons8.com/external-wanicon-lineal-wanicon/64/null/external-bank-money-exchange-wanicon-lineal-wanicon.png",
     },
    },
   },
  });
 });
</script>

2.Sans les fonctions JS

Dans le HTML, ajoutez avec la classe kr-smart-form :

l'attribut kr-grid.
l'attibut kr-opm-grid-cols pour choisir le nombre de colonne (facultatif).

Exemple de code sur 2 colonnes.

<div class="kr-smart-form" kr-grid kr-opm-grid-cols="2"></div>

Illustration

Affichage en mode liste

Choix du nombre de colonnes

3 colonnes	4 colonnes

grid.columns avec la valeur 3	grid.columns avec la valeur 4
const configuration = { smartForm: { layout: 'grid', otherPaymentMethods: { grid: { columns: 3 } } } }	const configuration = { smartForm: { layout: 'grid', otherPaymentMethods: { grid: { columns: 4 } } } }

3 colonnes

4 colonnes

grid.columns avec la valeur 3

grid.columns avec la valeur 4

const configuration = {
 smartForm: {
  layout: 'grid',
  otherPaymentMethods: {
    grid: {
      columns: 3
    }
  }
 }
}

const configuration = {
  smartForm: {
   layout: 'grid',
   otherPaymentMethods: {
    grid: {
      columns: 4
    }
   }
  }
}

Type de justification : start ou stretch

start	stretch

grid.justify avec la valeur "start"	grid.justify avec la valeur "stretch"
const configuration = { smartForm: { layout: 'grid', otherPaymentMethods: { grid: { columns: 3, justify: 'start' } } } }	const configuration = { smartForm: { layout: 'grid', otherPaymentMethods: { grid: { columns: 3, justify: 'stretch' } } } }

start

stretch

grid.justify avec la valeur "start"

grid.justify avec la valeur "stretch"

const configuration = {
 smartForm: {
  layout: 'grid',
  otherPaymentMethods: {
    grid: {
      columns: 3,
      justify: 'start'
    }
  }
 }
}

const configuration = {
  smartForm: {
   layout: 'grid',
   otherPaymentMethods: {
    grid: {
      columns: 3,
      justify: 'stretch'
    }
   }
  }
}

Avec ou sans le nom du moyen de paiement

Avec le nom du moyen de paiement	Sans le nom du moyen de paiement

labelVisibility avec la valeur "show"	labelVisibility avec la valeur "hide"
const configuration = { smartForm: { layout: 'grid', otherPaymentMethods: { labelVisibility: "show", grid: { columns: 2, justify: 'start', } } } }	const configuration = { smartForm: { layout: 'grid', otherPaymentMethods: { labelVisibility: "hide", grid: { columns: 2, justify: 'start', } } } }

Avec le nom du moyen de paiement

Sans le nom du moyen de paiement

labelVisibility avec la valeur "show"

labelVisibility avec la valeur "hide"

const configuration = {
 smartForm: {
  layout: 'grid',
    otherPaymentMethods: {
    labelVisibility: "show",
    grid: {
      columns: 2,
      justify: 'start',
    }
   }
  }
 }

const configuration = {
  smartForm: {
   layout: 'grid',
   otherPaymentMethods: {
   labelVisibility: "hide",
    grid: {
      columns: 2,
      justify: 'start',
    }
   }
  }
 }

Catégories

Tags

Intégrer le mode Grid

Intégration

Personnalisation du label et de l'icône

Illustration

Affichage en mode liste