fragments

Classe Alma.Fragments

constructor(merchantId: string, options: ClientOptions)

Initialise la bibliothèque Fragments avec votre id marchand.

merchantId string [requis]

ID marchand à utiliser ; les paiements créés par Fragments seront rattachés à ce compte. Vous pouvez retrouver votre identifiant marchand dans votre dashboard.

options ClientOptions [optionnel]

Options de configuration du client d’API Alma : un objet contenant les clefs suivantes :

mode string [optionnel]

Mode de l’API à utiliser.

• Alma.ApiMode.TEST Utilisez ce mode pour tester la bibliothèque Fragments. Vous pouvez vérifier l’état de vos paiements sur le Dashboard sandbox.

• Alma.ApiMode.LIVE [default] Utilisez ce mode pour la production. Vous pouvez vérifier l’état de vos paiements sur le Dashboard.

logger Console [optionnel]

Logger à utiliser par le client d’API, si différent de console. Si vous souhaitez fournir votre propre instance de console/logger, passez un objet qui respecte l’API de console via cette option.

createPaymentForm(paymentData, settings?: SettingsFor<Fragment>)

Crée une instance du formulaire de paiement avec les données personnes du client.

paymentData [requis]

Retrouvez l’ensemble des champs sur la documentation d’API Alma.

settings SettingsFor<Fragment> [optionnel]

Options pour le fragment. Voir la documentation de chaque fragment pour plus de détails. Peut être omis si le Fragment ne prend que des options facultatives.

setPaymentData(paymentData)

Enregistre les données personnelles du client afin de préparer le paiement.

create(ctor: ConstructorFor<Fragment>, settings?: SettingsFor<Fragment>): Fragment

Crée une instance du Fragment passé en premier paramètre, avec les options passées en second. Renvoie une instance du Fragment en question, qui peut ensuite être monté dans le DOM.

ctor ConstructorFor<Fragment> [requis]

Référence au constructeur du fragment à instantier. Typiquement Alma.Fragments.PaymentForm.

settings SettingsFor<Fragment> [optionnel]

Options pour le fragment. Voir la documentation de chaque fragment pour plus de détails. Peut être omis si le Fragment ne prend que des options facultatives.

---

Classe Fragment

Classe abstraite parente de tous les fragments de la lib, elle n’est pas manipulée directement mais publie deux méthodes utilisables sur n’importe quelle instance pour monter les fragments dans le DOM

mount(container: string | HTMLElement): Promise<void>

“Monte” (i.e. effectue le rendu) le fragment dans le container passé en paramètre.

container string | HTMLElement [requis]

Soit un sélecteur CSS permettant d’identifier l’élément du DOM dans lequel monter le fragment, soit directement l’élément en question.

container string | HTMLElement [requis]

Soit un sélecteur CSS permettant d’identifier l’élément du DOM dans lequel monter le fragment, soit directement l’élément en question.

---

Fragment Alma.Fragments.PaymentForm

Options

showPayButton boolean [optionnel, défaut true]

Par défaut, le formulaire de paiement affiche son propre bouton “Payer”. Si vous ne souhaitez pas l’afficher, dans le cas où votre page de checkout utilise un unique bouton “Payer” global par exemple, vous pouvez passer cette option à false :

const paymentForm = fragments.create(Alma.Fragments.PaymentForm, {
  showPayButton: false,
})

Il vous faudra alors appeler la méthode pay() de l’objet paymentForm lors d’un click sur votre propre bouton de paiement pour déclencher la soumission du formulaire de paiement Alma (voir ci-dessous).

onSuccess (paymentData: Payment) => void [optionnel]

Par défaut Fragments déclenche une redirection vers l’URL de retour du paiement lorsque celui est effectué avec succès :

{
  // ...
  onSuccess: (paymentData) => (window.location.href = paymentData.return_url)
  // ...
}

onFailure () => void [optionnel]

Cette methode vous permet d’effectuer une action lorsque le paiement échoue.

onPopupClose () => void [optionnel]

Cette methode vous permet d’effectuer une action lorsque l’utilisateur ferme la popup.

pay()

Déclenche le processus de paiement Alma dans le PaymentForm. Lorsque vous utilisez votre propre bouton “Payer” pour déclencher le paiement, il faut transmettre à Fragments que l’utilisateur est prêt à continuer ; cette méthode vous permet de déclencher cet événement en fonction des événements de votre propre frontend.

Exemple utilisant un bouton externe au formulaire