Apprenez à intégrer un formulaire de paiement WooshPay personnalisé dans votre site web ou votre application. Le code côté client et côté serveur construit un formulaire de paiement avec des éléments permettant d'effectuer un paiement à l'aide de diverses méthodes de paiement.

Flux de paiement #

L'utilisation de WooshPay SDK se fait en quelques étapes :

Créer un PaymentIntent #

Ajoutez un point de terminaison sur votre serveur qui crée un PaymentIntent. Un PaymentIntent suit le cycle de vie du paiement du client, en gardant trace de toute tentative de paiement échouée et en veillant à ce que le client ne soit débité qu'une seule fois. Renvoyez le secret client du PaymentIntent (numéro du PaymentIntent dans ce cas) dans la réponse pour terminer le paiement sur le client. Nous activons les cartes par défaut.

Charger wooshpay.js #

Utilisez wooshpay.js pour rester conforme à la norme PCI en vous assurant que les détails du paiement sont envoyés directement à WooshPay sans passer par votre serveur. Chargez toujours wooshpay.js à partir de js.wooshpay.com pour rester conforme. N'incluez pas le script dans un pack ou ne l'hébergez pas vous-même.

Initialisation des éléments WooshPay #

Initialiser la bibliothèque d'interface utilisateur WooshPay Elements avec le secret du client. Elements gère les composants de l'interface utilisateur dont vous avez besoin pour collecter les données de paiement.

Effectuer le paiement sur le client #

Compléter le paiement
Appeler confirmPayment()en transmettant le PaymentElement et un return_url pour indiquer où WooshPay doit rediriger l'utilisateur après qu'il ait effectué le paiement. Pour les paiements nécessitant une authentification, WooshPay affiche une fenêtre modale pour l'authentification 3D Secure ou redirige le client vers une page d'authentification en fonction de la méthode de paiement. Une fois que le client a terminé le processus d'authentification, il est redirigé vers la page d'authentification de return_url.

Traiter les erreurs #

S'il y a des erreurs immédiates (par exemple, la carte de votre client est refusée), wooshpay.js renvoie une erreur. Affichez ce message d'erreur à votre client pour qu'il puisse réessayer.

Afficher un message sur l'état du paiement #

Lorsque WooshPay redirige le client vers le site return_url, le secret_client_intent_paiementest ajouté par wooshpay.js. Utilisez-le pour récupérer le PaymentIntent afin de déterminer ce qu'il faut montrer à votre client.

Obtenir une démonstration #

Vous pouvez télécharger ici JS SDK Demo download