- Créée par Rodolphe GARIN, dernière mise à jour le 11 juil. 2025 6 min de lecture
Présentation
Le SDK Mobile fournit par Monext est conçu pour une intégration fluide des fonctionnalités de paiement. Il fournit un composable Jetpack Compose et une vue SwiftUI prêts à l'emploi qui peuvent être facilement intégrés à votre interface existante.
Il est conçu pour fonctionner avec une application serveur backend du côté commerçant.
Cinématique générale d'un paiement sur le SDK mobile
Ce guide vous aidera à effectuer votre premier paiement avec des formulaires de paiement prêts à l'emploi.
Veuillez sélectionner ci-dessous votre type d'application pour visualiser les informations spécifiques pour iOS ou Android.
Exigence minimale
- iOS 16.0
NOTE : Avant d'utiliser le SDK, assurez-vous de disposer d'un compte marchand Monext actif. Consultez notre page de création de compte marchand pour plus de détails.
Installation
Le SDK iOS est disponible via Swift Package Manager.
Swift Package Manager
Ajouter la dépendance du package :
Suivez le guide d’Apple sur l’ajout de dépendances à votre application.Entrer l’URL du dépôt
Veuillez contacter le support Monext Online pour obtenir l'URL de dépôt.
Spécifier la version :
Utilisez la version
1.0.0
ou ultérieure.
Bonnes pratiques de sécurité
Sécurité
Les appels API vers Monext doivent être effectués depuis votre serveur backend, et non directement depuis votre application mobile. Cela protège les informations sensibles telles que :
- BasicToken
- MerchantID
Ne divulguez jamais ces informations dans le code de votre application.
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
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.
Configurer
PaymentButton
Passez les paramètres nécessaires au composantPaymentButton
pour initier le paiement :sessionToken
: jeton de session généré par votre backendPaymentSheetConfiguration
: personnalisation de l’interface utilisateur- Contenu du bouton et closure
onResult
pour gérer le résultat du paiement
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.Gérer les résultats du paiement
onResult
reçoit unPaymentResult
lorsque la session de paiement se termine. Voici les différents scénarios possibles :paymentSuccess
: paiement réussipaymentFailure
: échec du paiementpaymentCanceled
: paiement annulé par l’utilisateurtokenExpired
: le jeton de session est expiré et doit être régénéré
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 APIGET 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 uneheaderImage
pour identifier votre marque
NOTE : Toutes ces personnalisations sont facultatives. Par défaut, la feuille de paiement utilise un thème clair.
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
- Parlez-en à votre gestionnaire de compte pour obtenir les références de l'environnement de production.
- Ajustez le type de serveur en intégrant celui de production dans votre initialisation de paiement
- Changez votre backend pour utiliser les endpoints et les identifiants API de l'environnement de production.
Exigence minimale
- Android 8.0 (API 26)
NOTE : Avant d'utiliser le SDK, assurez-vous de disposer d'un compte marchand Monext actif. Consultez notre page de création de compte marchand pour plus de détails.
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é
Sécurité
Les appels API vers Monext doivent être effectués depuis votre serveur backend, et non directement depuis votre application mobile. Cela protège les informations sensibles telles que :
- BasicToken
- MerchantID
Ne divulguez jamais ces informations dans le code de votre application.
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
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.
Configurer
PaymentBox
Passez les paramètres nécessaires au composantPaymentBox
pour initier le paiement :sessionToken
: jeton de session généré par votre backendMnxtSDKContext
: personnalisation de l’interface utilisateur- Contenu du bouton et closure
onResult
pour gérer le résultat du paiement
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.Gérer les résultats du paiement
onResult
reçoit unPaymentResult
lorsque la session de paiement se termine. Voici les différents scénarios possibles :PAYMENT_SUCCESS
: paiement réussiPAYMENT_FAILURE
: échec du paiementPAYMENT_CANCELED
: paiement annulé par l’utilisateurTOKEN_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
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 APIGET 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 uneheaderImage
pour identifier votre marque
NOTE : Toutes ces personnalisations sont facultatives. Par défaut, la feuille de paiement utilise un thème clair.
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
- Parlez-en à votre gestionnaire de compte pour obtenir les références de l'environnement de production.
- Ajustez le type de serveur en intégrant celui de production dans votre initialisation de paiement
- Changez votre backend pour utiliser les endpoints et les identifiants API de l'environnement de production.