Paramétrer les modes d'affichage de votre page de paiement

La fonctionnalité d’affichage dite Formulaire intelligent (smartForm) vous offre la possibilité de choisir comment vous souhaiter présenter votre bouton de paiement Apple Pay à l’acheteur.

La configuration de cette affichage est très simple. Elle se fait via des DIV. Il suffit d’utiliser les class fournies dans les exemples.

Tout d’abord, sachez que vous avez trois façons d’afficher votre page de paiement via le formulaire intelligent (smartForm) :

mode Pop-in: l’acheteur clique sur le bouton Payer et la page de paiement s’affiche en Pop-in sur votre site marchand.
Pour le paramétrage, il suffit d’utiliser la class kr-smart-form et d’ajouter l’attribut kr-popin dans une div contenant le paramètre kr-form-token
Exemple de code :
```
<body>
<div class="kr-smart-form" kr-popin kr-form-token="[GENERATED FORMTOKEN]">
  (...)
</div>
</body>
```
mode Liste: la page de paiement est embarquée sur votre site. Tous les moyens de paiement disponibles apparaissent sous forme de liste.
Pour le paramétrage, il suffit d’utiliser la class kr-smart-form dans une div contenant le paramètre kr-form-token
Exemple de code :
```
<body>
<div class="kr-smart-form" kr-form-token="[GENERATED FORMTOKEN]">
(...)  
</div>
</body>
```
mode Liste avec carte embarquée: la page de paiement est embarquée sur votre site. Tous les moyens de paiement disponibles apparaissent sous forme de liste et les champs de la saisie de la carte sont présentés ouverts à l’acheteur.
Pour le paramétrage, il suffit d’utiliser la class kr-smart-form et d’ajouter l’attribut kr-card-form-expanded dans une div contenant le paramètre kr-form-token
Exemple de code :
```
<body>
<div class="kr-smart-form" kr-card-form-expanded kr-form-token="[GENERATED FORMTOKEN]">  
(...)
</div>
</body>
```

Quel que soit le cas de figure paramétré, l’acheteur peut effectuer tout son parcours de paiement sans quitter votre site.

Une fois le mode d’affichage défini, vous pouvez aller plus loin.

Mettez en évidence uniquement Apple Pay parmi les autres moyens de paiement proposés par la boutique.

Exemple avec le mode Liste avec carte embarquée

<body> 
<div class="kr-smart-form" kr-card-form-expanded  kr-form-token="[GENERATED FORMTOKEN]"></div>
<!--DIV select one payment method--> 
   (...)     
<div class="kr-smart-button" kr-payment-method="APPLE_PAY"></div>
 (...)
</body>

le champ kr-payment-method accepte aussi la valeur apple_pay.

Mettez en évidence Apple Pay avec d’autres moyens de paiement de votre choix.

Exemple avec le mode Liste avec carte embarquée

<body> 
<div class="kr-smart-form" kr-card-form-expanded  kr-form-token="[GENERATED FORMTOKEN]"></div>
(...)
<div>
<div class="kr-smart-button" kr-payment-method="APPLE_PAY"></div>
    (...)
<div class="kr-smart-button" kr-payment-method="IP_WIRE"></div>
 (...)
    </div>
   (...)
</body>

Présentez par défaut tous les moyens de paiement configurés

Exemple avec le mode Liste avec carte embarquée

<body>
<div class="kr-smart-form" kr-card-form-expanded kr-form-token="[GENERATED FORMTOKEN]"></div>
     (...)
</body>

Catégories

Tags

Paramétrer les modes d'affichage de votre page de paiement