Informez vos clients avec le badge Alma

Informez vos clients de la disponibilité d'Alma sur vos fiches produit.

Setup

Intégrer le CSS suivant dans votre page produit :

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@alma/[email protected]/dist/alma-widgets.min.css" />

Intégrer la lib Javascript suivante dans votre page produit :

<script src="https://cdn.jsdelivr.net/npm/@alma/[email protected]/dist/alma-widgets.umd.js"></script>

Utilisation

Initialisation de la lib

La lib s'initialise avec votre ID marchand, disponible sur votre dashboard, et le mode à utiliser pour l'API, en fonction de votre environnement de test ou de production.

var widgets = Alma.Widgets.initialize(
  '<MERCHANT ID>', // ID marchand
  Alma.ApiMode.TEST, // mode de l'API (LIVE ou TEST)
)

Paramétrage du badge

Utilisation simple

Ajoutez le widget de type Alma.Widgets.PaymentPlans à votre instance, avec a minima l'élément dans lequel sera rendu le badge, et le montant pour lequel évaluer l'éligibilité et générer les échéanciers.

widgets.add(Alma.Widgets.PaymentPlans, {
  container: '#payment-plans',
  purchaseAmount: 45000,
    plans: [
        { installmentsCount: 3, minAmount: 5000, maxAmount: 200000 }
    ]
})
  • container est soit un sélecteur CSS tel qu'utilisé avec Document.querySelector, soit directement un élément du DOM
  • Le montant purchaseAmount doit être passé en centimes, sous forme d'un entier.
  • Le paramètre plans permet de renseigner les échéanciers à afficher dans le badge. Le nombre d'échéances est fourni via installmentsCount et les montants minimum et maximum pour lesquels vous autorisez cette facilité de paiement via minAmount et maxAmount.

Paramètres supplémentaires

transitionDelay (défaut : 5500)

Si plusieurs échéanciers sont affichés dans le badge, une rotation automatique est effectuée pour afficher au visiteur les différentes facilités de paiement disponibles.

Le paramètre transitionDelay permet de régler la vitesse de cette rotation automatique, ou de la désactiver :

  • false désactive la rotation automatique
  • Toute valeur numérique entière sera interprétée comme l'intervalle en millisecondes auquel la rotation s'effectue

Rendu

Appelez render pour finalement déclencher le rendu du badge :

widgets.render()

Exemple

Voici un exemple complet, qui effectue le rendu du badge dans un container d'ID payment-plan, sans rotation automatique pour un montant de 120€ payable en 3 ou 4 fois.

Notez que le paiement en 3 fois est autorisé entre 80€ et 2000€ alros que le paiement en 4 fois l'est entre 150€ et 2000€ ; pour un montant de 120€, seul le paiement en 3 fois sera donc éligible et le badge adaptera son affichage pour indiquer au client le montant minimum requis pour le 4 fois.

var widgets = Alma.Widgets.initialize(
  '<MERCHANT ID>', // ID marchand
  Alma.ApiMode.TEST, // mode de l'API (LIVE ou TEST)
)

widgets.add(Alma.Widgets.PaymentPlans, {
  container: '#payment-plans',
  purchaseAmount: 12000
    transitionDelay: false,
  plans: [
    {
      installmentsCount: 3,
      minAmount: 8000,
      maxAmount: 200000
    },
    {
      installmentsCount: 4,
      minAmount: 15000,
      maxAmount: 200000
    }
  ]
})

widgets.render()

Le repository Git de la lib inclut également un exemple d'utilisation :


Did this page help you?