Headless SDK (Inscription Web)

👍

SDK recommandé

Nous recommandons d'utiliser le Seamless Web SDK pour une expérience d'intégration fluide. Cette option offre une solution de paiement flexible avec des composants d'interface utilisateur (UI) pré-intégrés et des options de personnalisation.

Le SDK Headless de Yuno vous permet d'enregistrer des méthodes de paiement et de tokeniser des cartes, les sauvegardant pour une utilisation future.

Les étapes suivantes décrivent la création d'un paiement à l'aide du SDK Headless de Yuno.

Prérequis

Pour exécuter la procédure d'inscription, vous devez fournir la customer_session pour démarrer le processus à  l'Étape 3. Pour obtenir la customer_session, vous devez :

1. Créer un client: Un client doit s'inscrire aux paiements. Utilisez le endpoint  Créer un client pour créer de nouveaux clients. Dans la réponse, vous recevrez l' id, que vous utilisez pour créer la session client.
2. Créer la session client: Utiliser le client id  et  Créer session client  pour recevoir la customer_session.

Étape 1 : Inclure la bibliothèque dans votre projet

Avant de procéder à l'implémentation du SDK Headless, consultez l'aperçu de l'intégration du SDK pour des instructions détaillées sur la manière d'intégrer correctement le SDK dans votre projet.

Le guide d'intégration propose trois méthodes flexibles :

1. Inclusion directe du script HTML
2. Injection dynamique en JavaScript
3. Installation du module NPM

Choisissez la méthode d'intégration qui convient le mieux à votre flux de développement et à vos exigences techniques. Une fois l'intégration du SDK terminée, vous pouvez procéder aux étapes suivantes pour implémenter la fonctionnalité d'inscription headless.

📘

Bibliothèque TypeScript

Si vous utilisez TypeScript, Yuno fournit une bibliothèque que vous pouvez utiliser pour voir toutes les méthodes disponibles dans le SDK Web de Yuno.

Étape 2 : Initialiser le SDK Headless avec la clé publique

Dans votre application JavaScript, créez une instance de la classe Yuno en fournissant une PUBLIC_API_KEY.

const yuno = await Yuno.initialize(PUBLIC_API_KEY);

📘

Identifiants

Pour plus d'informations, Consultez la page des identifiants : https://docs.y.uno/reference/authentication

Étape 3 : Créer une session client

Pour commencer la procédure d'inscription, vous devez fournir les informations suivantes customer_session. Tout d'abord, vous devez créer un client. Vous avez besoin d'un client pour enregistrer des paiements. Utilisez le endpoint  Créer un client pour créer de nouveaux clients. Dans la réponse, vous recevrez l' id, que vous utilisez pour créer la session client.

Après avoir créé le client, vous pouvez créer la session client. Utilisez l' id  et  Créer session client . Le customer_session sera fournie dans la réponse. Vous avez besoin d'une nouvelle customer_session chaque fois que vous enregistrez une nouvelle méthode de paiement.

Étape 4 : Créer un objet de méthode de paiement pour l'inscription

Vous avez besoin d'un objet de méthode de paiement pour l'enregistrement afin de configurer l'intégration du SDK Headless pour l'enregistrement. Vous pouvez en créer un à l'aide du l'endpoint Enregistrer Méthode de Paiement. Lors de la création de l'objet de méthode de paiement, vous devez définir la méthode de paiement à laquelle votre client peut s'enregistrer. Actuellement, seule la CARTE est disponible pour le SDK Headless.

🚧

Vérification de Carte

Si vous souhaitez vérifier les cartes (autorisation de valeur zéro) avant l'enregistrement, vous devez fournir l'objet verify lors de la création de l'objet de méthode de paiement pour la session client.

Étape 5 : Démarrer la procédure d'inscription

Ensuite, vous démarrerez le processus de paiement en utilisant la fonction apiClientEnroll en fournissant les paramètres de configuration nécessaires.

Paramètres

Configurez l'inscription avec les options suivantes :

const apiClientEnroll = yuno.apiClientEnroll({
  country_code: "CO",
  customer_session: "eec6578e-ac2f-40a0-8065-25b5957f6dd3"
});

Étape 6 : Générer un token vaulté

Après avoir collecté toutes les informations utilisateur, vous pouvez démarrer l'inscription. Tout d'abord, vous devez créer un vaulted_token en utilisant la fonction apiClientEnroll.continueEnrollment. Comme il s'agit d'une fonction asynchrone, vous pouvez utiliser try/catch pour vous assurer que vous gérez correctement les erreurs déclenchées. L'exemple suivant montre comment créer un vaulted_token:

const vaultedTokenResponse = await apiClientEnroll.continueEnrollment({
  customer_session: "eec6578e-ac2f-40a0-8065-25b5957f6dd3",
  payment_method: {
    type: "CARD",
    card: {
      detail: {
        expiration_month: 11,
        expiration_year: 25,
        number: "4111111111111111",
        security_code: "123",
        holder_name: "ANDREA B",
        type: "DEBIT"
      }
    },
    customer: {
    }
  }
});

Après avoir enregistré la nouvelle carte, vous recevrez le vaulted_token, que vous pourrez utiliser pour effectuer des paiements futurs sans demander les informations de carte à votre client. Le bloc de code suivant montre un exemple de réponse de la fonction apiClientEnroll.continueEnrollment :

{
 vaulted_token: "9104911d-5df9-429e-8488-ad41abea1a4b",
 customer: {
   session: "eec6578e-ac2f-40a0-8065-25b5957f6dd3"
 },
 status: "ENROLLED"
}

📘

Valeurs de Statut Possibles

Le champ status peut avoir l'une des valeurs suivantes :

• CREATED
• EXPIRED
• REJECTED
• READY_TO_ENROLL
• ENROLL_IN_PROCESS
• UNENROLL_IN_PROCESS
• IN_PROCESS
• ENROLLED
• DECLINED
• CANCELED
• ERROR
• UNENROLLED

📘

Application Démo

En plus des exemples de code fournis, vous pouvez accéder à l'Application Démo pour une implémentation complète des SDK Yuno.

Restez informé

Visitez le journal des modifications pour les dernières mises à jour du SDK et l'historique des versions.