Bouton de caisse

Disponibilité des pays

Liste des pays ⬇️

USA

Canada

UK

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 :

Exemples

Default button styling on a product page:

<div 
  class="affirm-checkout-button-container" 
  data-page-type="product"
  >
</div>

Styled button with checkout text:

<div 
  class="affirm-checkout-button-container"
  data-page-type="product"
  data-button-text="checkout"
  data-shape="rounded"
  data-theme="light"
  data-size="large"
  >
</div>

Styled logo-only button:

<div 
  class="affirm-checkout-button-container"
  data-page-type="product"
  data-button-text="logo-only"
  data-shape="sharp"
  data-theme="dark"
  data-size="small"
  >
</div>

Sujets recommandés

• Configurer l'API Directe
• Aperçu du processus de paiement
• Solutions que nous offrons