Guide d'intégration React Native

1. Ajouter le SDK mobile à votre application

1. Ajoutez dans votre fichier package.json la dépendance à notre [Native Module] (https://www.npmjs.com/package/@lyracom/react-native-sdk-payment-module).

{
  "dependencies": {
     "@lyracom/react-native-sdk-payment-module": "^1.0.0",
 },
}

2. Ajoutez dans les dépendances du développement la référence à pod-install :

 "devDependencies": {
   "pod-install": "^0.1.0"
 },

3. Modifiez le fichier Podfile dans votre dossier iOS :

• Ajoutez use_frameworks! suite aux "require_relative" instructions.

• Désactivez Flipper : mettez en commentaire la ligne :flipper_configuration => FlipperConfiguration.enabled.

• Mettez à false les paramètres suivants : :hermes_enabled => false et :fabric_enabled => false.

4. Run yarn.

5. Run yarn pod-install --quiet.

{
  "dependencies": {
     "@lyracom/react-native-sdk-payment-module": "^1.0.0",
 },
}

{
  "dependencies": {
    "expo-build-properties": "~0.4.1",
    "expo-dev-client": "^2.0.1",
 },
}

{
 "expo": {
   "plugins": [
     [
       "expo-build-properties",
       {
         "ios": {
           "useFrameworks": "dynamic"
         }
       }
     ]
   ]
 }}

2. Initialiser le SDK mobile

1. Appelez la méthode initialize avec ces paramètres :

   Paramètre	Format	Description	Exemple
   publicKey	String	2e clé du tableau des clés API REST.	73239078:testpublickey_Zr3fXIKKx0mLY9YNBQEan42ano2QsdrLuyb2W54QWmUJQ
   options	Object	Objet pour configurer le comportement du SDK mobile.	Voir étape suivante.

2. Dans l'objet options, utilisez ces paramètres :

   Clés	Format	Description	Exemple
   apiServerName	String	1e donnée du tableau des clés API REST. Obligatoire	https://api.systempay.fr
   cardScanningEnabled	Bool	Active/Désactive la fonctionnalité de scan de la carte par caméra. Si elle n’est pas définie, la fonctionnalité sera désactivée. Facultatif	True

En cas d'échec de l'initialisation du SDK mobile, voir : Gestion des erreurs.

            // Initialize Payment SDK
            initialize(
              config.publicKey,
              {
                cardScanningEnabled: true,
                apiServerName: "MY_API_SERVER_NAME",
              },
              async (result) => {
                // onError
                Alert.alert(result.error.errorMessage);
              }
            );

3. Réaliser un paiement

3.1 Créer un formToken

            const getProcessPaymentContext = async () => {
              var formTokenVersion = getFormTokenVersion();
              return fetch(config.merchantServerUrl + "/createPayment", {
                method: "POST",
                headers: {
                  Accept: "application/json",
                  "Content-Type": "application/json",
                },
                body: paymentParams,
              })
              .then((result) => result.json())
              .then((json) => json.answer.formToken)
              .catch((error) => {
                console.error(error);
              });
            };

    <p></p>

3.2 Afficher l'écran de paiement

Transmettez le formToken lors de l'appel de la méthode Lyra.process avec ces paramètres :

Si la fonction onError retourne un objet LyraError, consultez : Gestion des erreurs.

            process(
            formToken!,
            options,
            async (result) => {
              // onSuccess
              // Verify the payment using your server
              verifyPayment(result.response)
              .then(() => {
                Alert.alert(`Payment success`);
              })
              .catch(() => {
                Alert.alert(`Payment verification fail`);
              });
            },
            async (result) => {
              // onError
              Alert.alert(result.error.errorMessage);
            }
            );

Le SDK mobile se charge alors de vérifier la cohérence du formToken puis affiche les moyens de paiement disponibles.

3.3 Procéder au paiement

En mode test, des exemples de carte de test sont disponibles : Cartes de test.

Pour passer en mode production, consultez la procédure.

4. Analyser le résultat du paiement

La plateforme de paiement envoie le résultat du paiement :

• au SDK mobile en envoyant un objet LyraResponse à l'une des fonctions de callback onSuccess ou onError
• au serveur marchand en appelant l'IPN. Nécessite le paramétrage des règles de notification.

4.1 Structure de la réponse

L'objet LyraResponse ainsi que l'objet JSON transmis dans l'IPN contiennent les données ci-dessous :

{
   "kr-hash":"80f5188e757c1828e8d4ccab87467eb50c4299e4057fa03b3f3185342f6d509c",
   "kr-hash-algorithm":"sha256_hmac",
   "kr-answer-type":"V4\/Payment",
   "kr-answer": "{
      "shopId":"65512466",
      "orderCycle":"CLOSED",
      "orderStatus":"PAID",
     (...)
      "orderDetails":{
         "orderTotalAmount":1100,
         "orderEffectiveAmount":1100,
         "orderCurrency":"EUR",
         "mode":"TEST",
         "orderId":null,
         "_type":"V4\/OrderDetails"
      },
      "customer":{
         "billingDetails":{
            "address":null,
            "category":null,
            "cellPhoneNumber":null,
            ...
         },
         "email":null,
         "reference":null,
         "shippingDetails":{
            "address":null,
            "address2":null,
            "category":null,
            ...
         },
         (...)
         "shoppingCart":{
            "insuranceAmount":null,
            "shippingAmount":null,
            "taxAmount":null,
            "cartItemInfo":null,
            "_type":"V4\/Customer\/ShoppingCart"
         },
         "_type":"V4\/Customer\/Customer"
      },
      "transactions":[
         {
            "shopId":"65512466",
            "uuid":"64d704a9bb664898954c3ef537982f99",
            "amount":1100,
            "currency":"EUR",
            "paymentMethodType":"CARD",
            "status":"PAID",
            "detailedStatus":"AUTHORISED",
            "operationType":"DEBIT",
            ...
         }
      ],
      "_type":"V4\/Payment"
   }"
}

Retrouvez tous les champs et leur description dans le playground.

4.2 Analyser le résultat transmis à l'application

kr-answer est l'objet contenant le résultat du paiement, encodé en JSON.

1. L'application mobile transmet l'objet LyraResponse au serveur marchand.

2. Le serveur marchand calcule le kr-hash en utilisant la fonction hash_hmac et la clé HMAC-SHA-256 pour vérifier l'authenticité de la réponse.

   • Algorithme de chiffrement : SHA-256
   • Clé secrète : Clé HMAC-SHA-256 (3^e clé du tableau des clés API REST)
   • Base d'encodage : héxadécimale (base 16)

   Si la valeur du kr-hash calculée par le serveur marchand est égale à celle contenue dans l'objet LyraResponse, alors le message est authentique.

3. Le serveur marchand vérifie le statut du paiement (voir : références de status).
4. Le serveur marchand communique le résultat à l'application mobile pour qu'elle l'affiche à l'acheteur.

            const verifyPayment = async (paymentResult: any) => {
              return fetch(config.merchantServerUrl + "/verifyResult", {
                method: "POST",
                headers: {
                  Accept: "application/json",
                  "Content-Type": "application/json",
                },
                body: paymentResult,
              });
            };

4.3 Analyser le résultat depuis l'IPN

Voir : Analyse de l'IPN (URL de notification).

4.4 Gérer les erreurs

Voir : Codes d'erreur.

Restrictions

Les fonctionnalités suivantes ne sont pas disponibles :

• la méthode cancelProcess() pour annuler le processus de paiement.
• les fonctions du scan de la carte et du NFC.