Intégration en iframe

Introduction

Une iframe HelloAsso ne pouvait ni recevoir de données du site parent, ni le prévenir de la fin d'un paiement : double saisie pour le payeur, aucune action possible côté intégrateur après commande. Les deux évolutions ci-dessous corrigent ça via postMessage(), dans les deux sens.

Résultat ➡️ une intégration plus fluide et mieux fondue dans le site partenaire.

1. Pré-complétion du formulaire de don (postMessage entrant)

Principe

Le site parent peut envoyer un postMessage() vers l'iframe du widget de don pour pré-remplir le montant et/ou les informations du payeur. Les champs restent modifiables par l'utilisateur.

Champs supportés

Comportement

• Le site parent peut envoyer plusieurs messages successifs (par exemple pour mettre à jour le montant en direct pendant que le payeur remplit un champ sur le site hôte).
• Une fois que le payeur a passé la première étape du formulaire, les messages suivants ne sont plus pris en compte.
• Si un champ n'est pas renseigné, il reste vide et doit être complété manuellement.
• Si une valeur est incorrecte (date mal formée, montant non numérique) ou que le don sur-mesure n'est pas activé, le champ concerné est ignoré (non pré-rempli) et un warning est levé dans la console. Le contrôle des champs a lieu au changement d'étape du formulaire.
• Si l'utilisateur est déjà connecté à son compte HelloAsso, ses données de compte priment sur les données injectées par le site parent.

Périmètre

Formulaire de don en widget montant libre — modes complet, sur-impression, sur-mesure.

2. Notification de fin de paiement (postMessage sortant)

Principe

Quel que soit le parcours d'achat intégré en iframe, la page parente est désormais informée par postMessage() dès l'affichage de la page de remerciement post-paiement.

Message envoyé

{ event: 'payment_completed', orderId: <id_commande> }

Si l'utilisateur atterrit sur la page de confirmation dégradée (« vous recevrez votre confirmation par email sous 15 à 60 min »), l'identifiant de commande n'est pas disponible et le message est :

{ event: 'payment_completed', orderId: null }

Périmètre

Tous les parcours intégrés en iframe : don, billetterie, crowdfunding, adhésion, flexipaiement, quel que soit le mode d'intégration (widget bouton, widget vignette, intégration directe).

Ce que ça permet côté intégrateur

Déclencher n'importe quelle action côté site parent une fois le paiement terminé : redirection, message de confirmation personnalisé, mise à jour d'un compte utilisateur, tracking analytics, etc.