Créer Votre Premier Paiement avec le SDK

Ce guide vous montre comment créer votre premier paiement en utilisant le SDK de Yuno. Vous apprendrez à :

• Configurer et exécuter le projet d'exemple
• Effectuer un paiement de test en utilisant le SDK

Le SDK de Yuno vous permet d'intégrer des méthodes de paiement dans votre application web et de traiter les paiements de manière sécurisée. En suivant ce guide, vous aurez votre premier paiement opérationnel en moins de 5 minutes.

Étape 1 : Installer les Prérequis

Avant de commencer, assurez-vous que les éléments suivants sont installés sur votre système :

• Git - Requis pour télécharger le projet. Si vous n'avez jamais utilisé Git, suivez le guide d'installation de Git.
• Node.js - Requis pour exécuter le projet. Si vous n'avez jamais utilisé Node.js, téléchargez-le à partir du site officiel de Node.js.

Étape 2 : Télécharger le Projet

Téléchargez le projet d'exemple ou clonez le dépôt GitHub. Le projet contient le SDK Web de Yuno et un exemple d'implémentation de l'interface utilisateur.

> git clone https://github.com/yuno-payments/yuno-sdk-web.git
> cd yuno-sdk-web

📘

Exemple d'intégration du SDK

Yuno fournit une application prête à l'emploi construite avec le SDK Web. Explorez ce projet pour voir à quel point il est rapide et facile de s'intégrer à Yuno.

Étape 3 : Configurer les Variables d'Environnement

Pour vous authentifier auprès de l'API Yuno, vous devez configurer vos identifiants dans le projet. Suivez ces étapes :

1. Ouvrez le fichier .env dans le dossier racine
2. Ajoutez les variables d'environnement suivantes avec vos identifiants récupérés dans la section Développeurs du tableau de bord :
   • ACCOUNT_CODE(apparaîtra comme account_id dans le tableau de bord)
   • PUBLIC_API_KEY
   • PRIVATE_SECRET_KEY
3. Enregistrez le fichier

ACCOUNT_CODE=votre_code_de_compte
PUBLIC_API_KEY=votre_clé_API_publique
PRIVATE_SECRET_KEY

Étape 4 : Exécuter le projet

Naviguez jusqu'au dossier du projet et installez les dépendances Node.js requises en exécutant :

> npm install

Ensuite, exécutez le projet avec la commande suivante :

> npm start

Pour accéder à l'application en cours d'exécution, ouvrez votre navigateur et allez à :

http://localhost:8080

(Note : Il s'agit d'une URL de développement locale qui ne fonctionnera que lorsque l'application de démonstration est exécutée localement)

Étape 5 : Effectuer votre Premier Paiement

Après avoir accédé au projet en cours dans votre navigateur, vous verrez une page de paiement de base affichant la méthode de paiement par carte configurée dans Configurer votre compte. Pour créer votre premier paiement réussi :

1. Sélectionnez l'option de paiement par carte
2. Entrez les informations de la carte de test fournies ci-dessous :

• Nom du titulaire de la carte: Harry Potter
• Numéro de carte: 4242 4242 4242 4242
• Date d'expiration: 09/29
• CVV: 123

Étape 6 : Afficher les détails du paiement dans le Tableau de Bord

1. Après avoir effectué le paiement, attendez quelques secondes pour qu'il soit traité
2. Allez dans la section Paiements de votre tableau de bord
3. Trouvez votre paiement de test dans la liste
4. Cliquez sur l'icône de l'œil pour afficher les détails complets du paiement

Félicitations ! Vous avez créé votre premier paiement avec Yuno. Consultez nos autres guides pour en savoir plus sur l'intégration de fonctionnalités supplémentaires.