Bouton de caisse
En savoir plus sur notre bouton de caisse pré-stylisé, qui rend la mise en œuvre d'Affirm encore plus facile.
Aperçu
Pour simplifier le processus d’implémentation d’Affirm, nous proposons un bouton de caisse pré-stylisé que vous pouvez utiliser sur votre site Web. Les attributs disponibles vous permettent d'ajuster la taille, la forme et la couleur du bouton, entre autres, afin de répondre aux besoins de votre entreprise.
Étapes
1. Mettez à jour votre site.
Ajoutez la classe affirm-checkout-button-container à un élément div conteneur sur votre site Web. Affirm.js affiche ensuite le bouton de l'élément personnalisé <affirm-checkout-button> à l'intérieur du conteneur.
2. Ajouter des attributs
Utilisez les attributs disponibles pour indiquer le type de page et ajuster le style du bouton. Pour plus de détails, consultez la section Référence Affirm.js ci-dessous.
3. (optionnel) Appeler la fonction
Appelez affirm.ui.checkoutButton.render() pour afficher automatiquement les boutons de caisse Affirm pour tous les conteneurs sur la page avec la classe affirm-checkout-button-container.
Remarque : Si vous ajoutez ultérieurement un nouveau conteneur de bouton, il se peut que vous deviez rappeler la fonction manuellement dans les demandes à page unique (SPA).
Affirm.js Reference
Le bouton peut être stylisé selon les attributs suivants :
Attribut | Description |
|---|---|
data-page-type | Indique le type de page sur lequel le bouton s'affiche. Valeurs :
|
Taille des données | Définit la taille d'un bouton. Valeurs :
|
thème de données | Configure le bouton pour s'afficher en thème sombre ou en thème clair. Valeurs :
|
Forme des données | Définit la forme du bouton. Valeurs :
|
Texte du bouton de données | Définit le contenu du bouton. Valeurs :
|
Exemples
Stylisation par défaut des boutons sur une page produit :
Bouton stylisé avec texte de caisse :
Bouton stylisé avec logo uniquement :
Sujets recommandés
Mis à jour 26 days ago