Recommandations UI/UX

Intégrer une solution de paiement ne se résume pas à la mise en œuvre technique ; il s’agit de créer une expérience utilisateur qui inspire confiance, paraît professionnelle et reste simple à utiliser. Voici nos recommandations pour concevoir le parcours de votre application autour du Tapaya Accept SDK.

Déclencher le paiement

Appel à l’action clair (CTA)

Assurez-vous que le bouton qui lance le paiement est bien visible et clairement libellé.

• Bien : « Payer 12,50 € », « Débiter la carte », « Passer au paiement »
• Mal : « Envoyer », « Suivant », « OK »

Retour visuel lors de l’interaction

Lorsque l’utilisateur appuie sur le bouton de paiement, fournissez un retour visuel immédiat (par ex. un indicateur de chargement ou un état désactivé) pour éviter les doubles clics pendant l’initialisation du SDK.

Pendant la transaction

Le Tapaya Accept SDK gère les étapes sensibles de la transaction (lecture de la carte, saisie du PIN) avec sa propre interface en superposition. Votre application reste toutefois responsable du contexte avant et après.

Ne masquez pas l’écran

Le SDK a besoin de l’écran entier pour garantir la sécurité et empêcher les attaques par superposition. N’essayez pas d’afficher des fenêtres flottantes ou des bulles de discussion par-dessus l’interface de paiement, car cela peut déclencher des mécanismes de sécurité qui interrompent la transaction.

Indications pour le positionnement NFC

La lecture sans contact des cartes repose sur l’antenne NFC de l’appareil, dont l’emplacement varie selon le modèle.

• Recommandation : Si possible, affichez dans votre application une courte animation ou une indication avant d’appeler le SDK, pour montrer à l’utilisateur où se trouve la puce NFC sur son appareil (généralement au dos, en haut ou au centre).

Gérer les résultats

En cas de succès

• Confirmation visuelle : Affichez un écran « Succès » clair avec une coche verte ou un autre signal positif similaire.
• Reçus : Proposez immédiatement d’envoyer un reçu numérique (e-mail/SMS) ou d’en imprimer un si une imprimante est connectée.

En cas d’échec

• Messages d’erreur clairs : Si une transaction échoue, traduisez les codes d’erreur techniques en un langage compréhensible par l’utilisateur.
  • Technique : DECLINED_INSUFFICIENT_FUNDS
  • Pour l’utilisateur : « Transaction refusée. Vérifiez le solde ou essayez une autre carte. »
• Option de nouvel essai : Proposez un bouton « Réessayer » bien visible, afin que le commerçant puisse relancer rapidement le processus sans ressaisir le montant.

Application Tapaya Terminal

L’application Tapaya Terminal permet aux commerçants d’accepter des paiements par carte de manière autonome. Les intégrateurs peuvent personnaliser l’expérience des commerçants dans l’application Tapaya Terminal ; pour commencer, contactez developers@tapaya.com.

Personnalisation de l’interface

Vous pouvez modifier l’interface de l’application Tapaya Terminal dans la Tapaya Platform, sous Settings > Application > App Theme, ou par programmation via la Platform API. Les couleurs et les éléments de marque (logo, logotypes) s’appliquent de façon homogène dans toute l’application Tapaya Terminal.

Accessibilité

• Son : Le SDK émet des signaux sonores lors de la lecture des cartes et en cas d’erreur. Assurez-vous que votre application ne coupe pas le volume du système et n’interfère pas avec le focus audio pendant un paiement.
• Retour haptique : Le SDK utilise la vibration pour confirmer la lecture des cartes. C’est essentiel pour l’accessibilité et pour le retour général dans les environnements bruyants.

Il manque quelque chose sur cette page ?Demandez une fonctionnalité. Nous joignons cette page pour que l’équipe ait le contexte.