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.
- 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.
- 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>