new Intégration du SDK Mobile

Exigence minimale

• iOS 16.0

Installation

Le SDK iOS est disponible via Swift Package Manager.

Swift Package Manager

1. Ajouter la dépendance du package :
             Suivez le guide d’Apple sur l’ajout de dépendances à votre application.

2. Entrer l’URL du dépôt

   • Veuillez contacter le support Monext Online pour obtenir l'URL de dépôt.

3. Spécifier la version :

            Utilisez la version 1.0.0 ou ultérieure.

Bonnes pratiques de sécurité

Utilisation

Une fois le SDK installé et votre compte Monext configuré, vous pouvez intégrer la fonctionnalité de paiement dans votre application.

Intégration de PaymentButton

Le composant principal est PaymentButton, une vue SwiftUI prête à l'emploi qui gère l’ensemble du processus de paiement. Il intègre l'appel de presentPaymentSheet :

import Monext

struct ExampleView: View {
 var sessionToken: String?
 var paymentSheetConfiguration: PaymentSheetConfiguration

 var body: some View {
     VStack {
         if let sessionToken = sessionToken {
             PaymentButton(
                 sessionToken: sessionToken,
                 configuration: paymentSheetConfiguration
             ) {
                 Text("PAYER")
             } onResult: { result in
                 switch result {
                 case .tokenExpired:
                     print("Le jeton a expiré")
                 case .paymentSuccess:
                     print("Paiement réussi")
                 case .paymentFailure:
                     print("Échec du paiement")
                 case .paymentCanceled:
                     print("Paiement annulé")
                 }
             }
         }
     }
 }
}

Utilisation de presentPaymentSheet pour une interface personnalisée

Pour un meilleur contrôle de l'interface utilisateur, utilisez directement le modificateur de vue presentPaymentSheet :

import Monext

struct CustomPaymentView: View {
@State var isPresented: Bool = false
var sessionToken: String
var configuration: PaymentSheetConfiguration
var applePayConfiguration: ApplePayConfiguration
var onResult: (PaymentResult) -> Void

var body: some View {
Button(action: { isPresented.toggle() }) {
Text("Pay")
}
.presentPaymentSheet(
isPresented: $isPresented,
sessionToken: sessionToken,
paymentSheetConfiguration: configuration,
applePayConfiguration: applePayConfiguration,
onResult: onResult
)
}
}

Mise en place du processus de paiement

1. Générer un jeton de session de paiement Monext
   Votre backend doit créer une session de paiement en envoyant une requête à l’API Monext Retail.

   NOTE :  Consultez la documentation sur la création de session pour plus de détails. 

2. Configurer PaymentButton
   Passez les paramètres nécessaires au composant PaymentButton pour initier le paiement :

   • sessionToken : jeton de session généré par votre backend
   • PaymentSheetConfiguration : personnalisation de l’interface utilisateur
   • Contenu du bouton et closure onResult pour gérer le résultat du paiement

3. Afficher le widget de paiement
   Lorsque l’utilisateur clique sur le bouton de paiement, PaymentButton affiche automatiquement la feuille de paiement sécurisée fournie par Monext.

4. Gérer les résultats du paiement
   onResult reçoit un PaymentResult lorsque la session de paiement se termine. Voici les différents scénarios possibles :

   • paymentSuccess : paiement réussi
   • paymentFailure : échec du paiement
   • paymentCanceled : paiement annulé par l’utilisateur
   • tokenExpired : le jeton de session est expiré et doit être régénéré

5. Récupérer les détails de la session
   Une fois la transaction complétée, vous pouvez récupérer les informations de paiement en effectuant un appel API GET Session.

   NOTE : Consultez la documentation sur la récupération des détails de session pour plus d’informations.

Personnalisation de l'interface

Vous pouvez personnaliser l'apparence de la feuille de paiement en utilisant PaymentSheetConfiguration. Cette classe permet de modifier divers éléments visuels pour correspondre à l’identité de votre marque.

Paramètres disponibles dans PaymentSheetConfiguration.

Consulter notre tableau de référence qui regroupe l'ensemble des paramètres. 

• Couleurs et thème : personnalisation du style visuel (mode clair ou sombre)
• Logo et en-tête : possibilité d’ajouter un headerTitle ou une headerImage pour identifier votre marque

Tester votre intégration

L'environnement sanbox n'accepte que les paramètres de paiement de test.

Vous pouvez trouver les valeurs des tests pour les cartes de paiement dans notre guide.

Passer en production

1. Parlez-en à votre gestionnaire de compte pour obtenir les références de l'environnement de production.
2. Ajustez le type de serveur en intégrant celui de production dans votre initialisation de paiement
3. Changez votre backend pour utiliser les endpoints et les identifiants API de l'environnement de production.

Exigence minimale

• Android 8.0 (API 26)

Installation

Le Monext Android SDK sera disponible très prochainement via Gradle.

Veuillez contacter le support Monext Online pour obtenir le package d'installation.

Gradle

        1. Ajouter la dépendance du package :
                       Suivez le guide d'Android sur l'ajout de dépendances à votre application.

        2. Ajouter dans build.gradle :

implementation("fr.monext:TODO:(insert latest version here)")

        3. Spécifier la version :
                      Utilisez la version 1.0.0 ou ultérieure.

Bonnes pratiques de sécurité

Utilisation

Une fois le SDK installé et votre compte Monext configuré, vous pouvez intégrer la fonctionnalité de paiement dans votre application.

Intégration de PaymentBox

Le composant principal est PaymentBox, une composant Jetpack prêt à l'emploi qui gère l’ensemble du processus de paiement. Il intègre l'appel de PaymentSheet :

import fr.monext.*

@Composable
fun ContentView() {
    var sessionToken: String? by rememberSaveable { mutableStateOf(null) }
    
    Column {
        if (sessionToken != null) {
            PaymentBox(
                sessionToken = sessionToken!!,
                context = MnxtSDKContext(
                    environment = MnxtEnvironment.Sandbox,
                    appearance = selectedTheme.appearance()
                ),
                onResult = { result ->
                    when (result) {
                        PaymentResult.TOKEN_EXPIRED -> Log.d("APP", "Le jeton a expiré")
                        PaymentResult.PAYMENT_SUCCESS -> Log.d("APP", "Paiement réussi")
                        PaymentResult.PAYMENT_FAILURE -> Log.d("APP", "Échec du paiement")
                        PaymentResult.PAYMENT_CANCELED -> Log.d("APP", "Paiement annulé")
                        PaymentResult.PAYMENT_SHEET_DISMISSED_BY_USER -> Log.d("APP", "Interface fermée")
                    }
                }
            ) { showSheet ->
                Button(showSheet) {
                    Text("PAYER")
                }
            }
        }
    }
}

Utilisation de PaymentSheet pour une interface personnalisée

Pour un meilleur contrôle de l'interface utilisateur, utilisez directement le composable PaymentSheet :

import fr.monext.*

@Composable
fun CustomPaymentView() {
    var showPaymentSheet by rememberSaveable { mutableStateOf(false) }
    val sessionToken: String = "..."
    val context = MnxtSDKContext(...)
    val onResult: (PaymentResult) -> Unit = { ... }

    Box {
        Button(onClick = { showPaymentSheet = !showPaymentSheet }) {
            Text("Pay")
        }
        
        PaymentSheet(
            isVisible = showPaymentSheet,
            sessionToken = sessionToken,
            context = context,
            onResult = onResult
        )
    }
}

Mise en place du processus de paiement

1. Générer un jeton de session de paiement Monext
   Votre backend doit créer une session de paiement en envoyant une requête à l’API Monext Retail.

   NOTE :  Consultez la documentation sur la création de session pour plus de détails. 

2. Configurer PaymentBox
   Passez les paramètres nécessaires au composant PaymentBox pour initier le paiement :

   • sessionToken : jeton de session généré par votre backend
   • MnxtSDKContext : personnalisation de l’interface utilisateur
   • Contenu du bouton et closure onResult pour gérer le résultat du paiement

3. Afficher le widget de paiement
   Lorsque l’utilisateur clique sur le bouton de paiement, PaymentBox affiche automatiquement la feuille de paiement sécurisée fournie par Monext.

4. Gérer les résultats du paiement
   onResult reçoit un PaymentResult lorsque la session de paiement se termine. Voici les différents scénarios possibles :

   • PAYMENT_SUCCESS : paiement réussi
   • PAYMENT_FAILURE : échec du paiement
   • PAYMENT_CANCELED : paiement annulé par l’utilisateur
   • TOKEN_EXPIRED : le jeton de session est expiré et doit être régénéré
   • PAYMENT_SHEET_DISMISSED_BY_USER : interface fermée par l'utilisateur

5. Récupérer les détails de la session
   Une fois la transaction complétée, vous pouvez récupérer les informations de paiement en effectuant un appel API GET Session.

   NOTE : Consultez la documentation sur la récupération des détails de session pour plus d’informations.

Personnalisation de l'interface

Vous pouvez personnaliser l'apparence de la feuille de paiement en utilisant MnxtSDKContext. Cette classe permet de modifier divers éléments visuels pour correspondre à l’identité de votre marque.

Paramètres disponibles dans PaymentSheetConfiguration.

Consulter notre tableau de référence qui regroupe l'ensemble des paramètres. 

• Couleurs et thème : personnalisation du style visuel (mode clair ou sombre)
• Logo et en-tête : possibilité d’ajouter un headerTitle ou une headerImage pour identifier votre marque

Tester votre intégration

L'environnement sanbox n'accepte que les paramètres de paiement de test.

Vous pouvez trouver les valeurs des tests pour les cartes de crédit dans notre guide.

Passer en production

1. Parlez-en à votre gestionnaire de compte pour obtenir les références de l'environnement de production.
2. Ajustez le type de serveur en intégrant celui de production dans votre initialisation de paiement
3. Changez votre backend pour utiliser les endpoints et les identifiants API de l'environnement de production.