Guide d'intégration React-Native

Exemple pour la boutique de démonstration

La fonction initialize est initialisée avec :

• apiServerName valorisé à https://api.systempay.fr
• publicKey valorisé à 73239078:testpublickey_Zr3fXIKKx0mLY9YNBQEan42ano2QsdrLuyb2W54QWmUJQ

try {
  await initialize("73239078:testpublickey_Zr3fXIKKx0mLY9YNBQEan42ano2QsdrLuyb2W54QWmUJQ", {
    [InitializeOptions.apiServerName]: "https://api.systempay.fr", // Mandatory
    // other options to configure the SDK
  });
} catch (err) {
  // TODO Manage error
}

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

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

   Paramètre	Format	Description
   formToken	String	Réponse du Web Service Charge/CreatePayment. (Obligatoire)
   options	ProcessOptions	Objet qui vous permet de personnaliser le formulaire de paiement. Voir étape suivante.

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

   Paramètre	Format	Description	Android	iOS
   customPayButtonLabel	String	Définit le label utilisé sur le bouton "Payer".	✅	✅
   customHeaderLabel	String	Définit le label dans le header de la page de paiement.	✅	✅
   customPopupLabel	String	Définit le label de la popup lorsqu'un paiement est en cours de traitement.	✅	✅
   paymentMethodType	String	Définit la méthode de paiement utilisée. Les différentes valeurs possibles sont : all (par défaut) cardPayment applePay	❌	✅

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

try {
  const result = await process(your_formToken, {
     [ProcessOptions.paymentMethodType]: "applepay" 
    // options to configure the process payment
  });
} catch (err) {
  // TODO Manage error
}

3.3 Google Pay

1. Pour intégrer Google Pay via notre SDK mobile, vous devez :
   • Souscrire à l'offre Systempay incluant Google Pay. Contactez votre interlocuteur commercial.
   • Paramétrer votre contrat Google Pay. [Consultez le guide d'intégration Google Pay](/doc/fr-FR/payment-method/googlepay/redirection-form/sitemap.html).
   • Appliquer les prérequis sur l'intégration du SDK mobile.
   • Avoir dans votre application, une version minSdkVersion de 21 au minimum.
   • Avoir dans votre application, une version compileSdkVersion de 34 au minimum.
2. Ajouter la dépendance Google ci-dessous dans le build.gradle :

   dependencies {
       {...}
       classpath("com.google.android.gms:play-services-wallet:19.4.0")
   }

3. Ajouter la métadonnée suivante à l'élément application du fichier Android.Manifest.xml :

   <application>
       {...}
       <meta-data android:name="com.google.android.gms.wallet.api.enabled" android:value="true"/>
   </application>

3.3 Apple Pay

1. Pour intégrer Apple Pay via notre SDK mobile, vous devez :
   • Souscrire à l'offre Systempay incluant Apple Pay. Contactez votre interlocuteur commercial.
   • Paramétrer votre contrat Apple Pay. [Consultez le guide d'intégration Apple Pay](/doc/fr-FR/payment-method/applepay/redirection-form/sitemap.html).
   • Appliquer les prérequis sur l'intégration du SDK mobile.
2. Dans votre application, activez la fonctionnalité Apple Pay et associez la à l’identifiant marchand Apple Pay :
   • Ouvrez la bibliothèque de Capabilities dans Xcode: Target > Signing & Capabilities > Library (+)
   • Sélectionnez la fonctionnalité Apple Pay.
   • Dans la fonction Apple Pay, cliquez sur le bouton d’actualisation pour synchroniser vos identifiants de marchand à partir du site Apple Developer.
   • Une fois la synchronisation faite, sélectionnez le numéro Apple Merchant Identifier à utiliser avec votre application.
3. Dans la fonction initialize, ajoutez l'option applePayMerchantId :

   try {
     await initialize("your_publicKey", {
       [InitializeOptions.apiServerName]: "your_apiServerName", // Mandatory
       [InitializeOptions.applePayMerchantId]: "your_appleMerchantId", // Mandatory
       // other options to configure the SDK
     });
   } catch (err) {
     // TODO Manage error
   }

3.5 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.

5. Restrictions

Les fonctionnalités suivantes ne sont pas encore disponibles dans le module react-native 

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