Lyra a récemment interviewé Yaël, fondatrice des Babilleuses, une structure spécialisée dans la confection consciente et la commercialisation de coussins de maternité. Depuis son premier coussin réalisé en 2005, son entreprise n’a cessé de grandir jusqu’à s’adresser à une clientèle internationale. D’abord française, cette clientèle s’est révélée être particulièrement intéressée par la qualité, le confort et le large choix de ces coussins.

Proposer des moyens de paiement adaptés à différentes typologies de consommation est une solution optimale pour faire évoluer son commerce et Yael nous explique pourquoi.

Découvrons ensemble l’évolution des Babilleuses et l’impact qu’a eu Lyra en tant que solution de paiement.

Une histoire écrite du bout des doigts

Les Babilleuses a son histoire, l’histoire de toute une vie. Couturière de profession, puis maman, sa fondatrice réalise qu’on n’est finalement jamais mieux servi que par soi-même ! De quelques coussins à l’émergence d’un réel besoin dans son entourage, Yael se prend au jeu. Quelques calculs, un peu (beaucoup) d’organisation, et de précieux conseils donnés par des sage-femmes et ses premiers coussins voient le jour.

De fils en aiguilles, les coussins se perfectionnent, séduisent et la demande explose.

Un site internet devient essentiel pour faciliter la visibilité puis la commercialisation. Rapidement la question du paiement se pose. C’est au travers d’une conversation avec l’un de ses collaborateurs que Lyra ressort comme solution de paiement.

Quoi de mieux qu’une solution française et des valeurs en accord avec sa démarche ? Les Babilleuses choisit de faire confiance à Lyra pour ses paiements, et ça dure depuis 14 ans.

Un patchwork de moyens de paiement pour une clientèle internationale

« Avoir un bon produit n’est plus suffisant, il faut aussi avoir les bons moyens de paiement »

Yaël, fondatrice des Babilleuses

Future maman, futur papa, meilleure amie ou bientôt tatie… Difficile de choisir un coussin quand on n’y connaît rien. Face à ce constat, Les Babilleuses pense et conçoit une application mobile, avec un concept et un processus d’achat simplifié : on choisit un coussin parmi les best-of et l’achat se fait en quelques clics !

Après quelques temps, les nouveaux modes de consommation sonnent le besoin d’agrandir cet éventail de moyens de paiement : plus l’achat est rapide, mieux c’est et la réponse est très simple grâce à Apple Pay.

Fort de sa popularité, le site Les Babilleuses arrive jusqu’à chez nos voisins belges. L’international devient alors un nouveau cap. Ni une ni deux et pour l’accompagner au mieux dans ce défi, Lyra propose aux Babilleuses le moyen de paiement préféré en Belgique : Payconiq. Grâce à un fonctionnement simple et rapide par QR Code, il a déjà conquis plus de 5 millions d’utilisateurs belges.

Motivée par l’idée d’offrir une expérience utilisateur la plus fluide possible pour une satisfaction maximale. Les Babilleuses ajoute Payconiq et les résultats sont immédiats. Qualifiée de simple, rapide et sécurisée par ses clients, le pari est gagnant.

67% des clients belges ont choisis Payconiq au moment du paiement

Yaël, fondatrice des Babilleuses

En échange régulier avec l’Espagne et la Suisse. Les Babilleuses devrait encore élargir son expansion grâce à Bizum le moyen de paiement préféré des Espagnols, et Twint celui des Suisses, qui sont prévus chez Lyra d’ici peu…

L’automne est bien entamé et les besoins d’évasion se font déjà ressentir. Pour replonger dans une nouvelle vague à l’esprit de vacances, nous avons rencontré Julien, fondateur de Mon Fourgon Shop. Boutique en ligne d’équipements pour les particuliers qui aménagent des vans sur-mesure (isolation, électricité, fenêtres, collage etc.).
L’activité est récente et le catalogue de cesse de prendre de l’ampleur. La brique du paiement a été bien pensée par Julien puisqu’il a su considérer l’importance d’un parcours d’achat simple, efficace et sans rupture dès le début de son activité. Le meilleur moment pour déjà envisager le paiement de demain c’est bien dès le démarrage !

Un choix local pour une conso raisonnée

Locale et recommandée, 2 qualités premières pour Lyra qui ont su séduire le fondateur de cette société toulousaine. S’en suit un accompagnement commercial disponible et sur-mesure pour aider cette nouvelle société à prendre la route vers de nouveaux horizons.

Une fois bien engagé, il y a des objectifs à ne pas prendre à la légère. Comme la rapidité et la mobilité que ce soit du côté des clients que de l’aboutissement de la commande. Récemment, en intégrant Apple Pay et le prélèvement SEPA Julien et son équipe assurent à leurs clients de régler plus facilement tous les types de paniers pour être équipé en un temps record !

Avec Apple Pay, des résultats qui parlent d’eux-mêmes !

Des paniers inférieurs à 100€ pour la spontanéité, aux paniers plus élevés pour être rassuré, Apple Pay a su s’imposer.

Apple Pay représente déjà un beau pourcentage de nos paiements pour un moyen de paiement qu’on propose en plus à nos clients. Avec du recul, je sais que la conversion et le confort du client passent par les moyens de paiement qu’on peut proposer 

Julien SATGÉ, fondateur de Mon Fourgon Shop

Pour continuer sur cette belle lancée, Julien suit de très près toutes les évolutions Lyra. Notamment grâce à notre rendez-vous webinar L’instant Paiement et nos newsletters. Il sait que toutes les nouvelles fonctionnalités sont avant tout pensées et développées pour des structures qui en ont besoin avant les autres ! C’est ça de vouloir dépasser à vitesse grand V.

Pour conclure cette série d’articles, reprenons les objectifs et les différentes solutions apportées.

L’objectif principal est le développement d’une librairie de composants React Native, dans le but de mutualiser des composants de deux applications : PayZen et Lyra Collect.

La difficulté principale étant que certains composants peuvent être de haut niveau, quasiment des écrans entiers. C’est-à-dire qu’ils embarquent de la logique métier : des appels serveurs, de la navigation entre plusieurs écrans, des paramètres utilisateurs etc.

Reprenons les principales problématiques ainsi que les solutions apportées :

Gestion des dépendances dans le contexte React Native / Expo

• L’utilisation des peerDependencies permet de mutualiser les dépendances
• On a pu démontrer une configuration qui fonctionne avec le bundler Metro (au niveau du code source et des assets)
• La librairie est écrite en TypeScript et tout le typage est bien exporté
• La compilation de la librairie est simple et rapide

L’environnement de développement, l’intégration continue et le déploiement

• Bonne expérience de développement, tout l’outillage fonctionne comme avant (refresh de composant à chaud, debugger, inspecteur d’éléments etc.)
• Le développeur continue de tester son application, qu’il travail sur la librairie ou sur son application
• Linking de la librairie en local très facile
• Intégration continue et déploiement avec Bitrise

Gestion des personnalisations : le thème, l’internationalisation et les paramètres utilisateur

• Passage de paramètres et création d’un contexte grâce à un composant Provider
• Possibilité de personnaliser le thème, les traductions et la configuration de la librairie
• Les paramètres des composants de la lib peuvent être intégré dans l’écran des préférences de l’application

Gestion des appels serveur et de l’authentification

• Utilisation d’un client HTTP (Axios) qui permet d’embarquer la configuration des appels serveurs (URL de base, authentification etc.)
• La librairie est capable d’effectuer des appels serveurs avec des urls relatives
• La gestion des tokens d’authentification et de l’URL du back-end restent de la responsabilité des applications, la librairie ne s’en occupe pas
• Le déploiement de la brique « API Proxy » côté Lyra Collect permet d’accéder aux API de PayZen depuis l’app Lyra Collect
• Les appels REST sont validés par les specs OpenAPI fournies par le back-end

Les grands principes à retenir

• Librairie écrite en TypeScript
• Elle expose un composant Provider qui lui permet d’accepter des paramètres et d’initialiser les librairies utilitaires
  • React Native Paper pour le thème
  • I18n-js pour l’internationalisation
  • Axios pour les appels HTTP

L’objectif principal de cette librairie est d’apporter les fonctionnalités liées aux ordres de paiement de l’application PayZen dans l’application Lyra Collect. Mettre ces écrans dans une librairie nous permet de mutualiser le code et facilite la maintenance.

Les ordres (aussi appelés liens) de paiement, sont des liens générés par le marchand qu’ils peuvent envoyer à leur client pour se faire payer. Ces liens amènent vers la page de paiement PayZen du marchant avec toutes les informations de paiement pré-remplies.

Voici quelques exemples d’écrans pour les ordres de paiement (liste, détail, création) :

Dans les articles précédents, nous avons répondu aux problématiques liées aux dépendances, à l’environnement de développement et aux personnalisations.

Il nous reste un sujet à aborder, qui est spécifique aux écrans des ordres de paiement, ce sont les appels serveurs et l’authentification.

En effet, la librairie expose des composants de haut niveau qui peuvent être des écrans complets :

• PaymentOrderList : écran complet de la liste des ordres de paiement, avec ses propres appels serveur
• PaymentOrderDetail : écran complet du détail d’un ordre de paiement, avec ses propres appels serveur
• PaymentOrderCreation : enchainement d’écrans pour la création d’un ordre de paiement, avec ses propres appels serveur
• PaymentOrderSettings : section de paramètres des ordres de paiement

L’architecture de nos services

Nos deux applications communiquent avec leur back-end respectif (donc URL différentes) qui ont chacun leur méthode d’authentification spécifique.

• Côté PayZen, c’est une authentification à base de cookie et de tokens.
• Côté Lyra Collect, l’authentification s’appuie sur RH-SSO (Keycloak), à base de Bearer Token.

Ce qu’il faut savoir, c’est que la plateforme Lyra Collect se base sur la solution PayZen. Et les ordres de paiement sont une notion portée par PayZen.

Donc pour l’app PayZen, aucun problème avec les ordres de paiement : elle communique avec son back-end, et l’authentification est naturellement gérée.

Par contre pour l’application Lyra Collect, il faut communiquer directement avec le back-end PayZen (sauf à devoir dupliquer l’API des Ordres de Paiement sur Lyra Collect, ce que nous voulons justement éviter).Et bien entendu, il n’est pas souhaitable de gérer plusieurs authentifications sur l’application Lyra Collect (une pour les fonctionnalités des Ordres de Paiement, l’autre pour le reste de l’application).

En revanche, les systèmes d’information Lyra Collect et PayZen communiquent très bien entre eux car ils sont hébergés au sein de la plateforme Lyra.

L’idée est donc d’ajouter une brique de proxy d’API devant le back-end Lyra Collect qui aura les rôles suivant :

1. authentifier l’utilisateur Lyra Collect avec RH-SSO
2. transférer l’appel vers PayZen en lui adjoignant les paramètres d’authentification (PayZen) correspondant

Voici un schéma simplifié qui illustre l’architecture cible. En vert l’existant, en orange les nouveaux composants :

La gestion des appels serveurs dans la librairie

Une fois ces modules en place, la problématique suivante est : comment la librairie va pouvoir effectuer ses requêtes alors qu’elle ne connait ni l’URL du serveur ni la méthode d’authentification à configurer ?

En effet, elle est utilisée à la fois dans l’application Lyra Collect (qui communique avec le backend Lyra-Collect) et PayZen (qui communique… oui, avec le backend PayZen).

Et ce que nous voulons éviter, c’est qu’à chaque appel, la librairie fasse quelque chose comme :

Première hypothèse

Au début, nous avons imaginé que les applications passent des paramètres au niveau du Provider de la librairie :

• baseURL : l’URL de base à utiliser pour tous les appels
• mode : EP / VAD selon le mode d’authentification à utiliser
• token : le token d’authentification

Ce qui donnerait :

import Axios from 'axios'
 
// création de l'instance Axios
export const axios = Axios.create({
  baseURL: 'https://api.example.com',
})

import { useContext, useLayoutEffect, useRef } from 'react'
import { SessionContext } from '../contexts/SessionContext'
import { axios } from './axios'
 
export function useAuthInterceptor() {
  // on récupère le token depuis un contexte
  const { accessToken } = useContext(SessionContext)
  // stockage de l'identifiant de l'intercepteur dans une référence React
  const reqInterceptor = useRef<number>()
 
  useLayoutEffect(() => {
    // si l'interceptor existe déjà, on le libère
    if (reqInterceptor.current !== undefined) {
      axios.interceptors.request.eject(reqInterceptor.current)
    }
 
    // déclaration d'un nouvel intercepteur de requête, appelé avant chaque requête
    reqInterceptor.current = axios.interceptors.request.use((config) => {
      if (accessToken && config.headers) {
        // configuration du header Authorization de la requête
        config.headers.Authorization = `Bearer ${accessToken}`
      }
 
      // on retourne la config modifiée
      return config
    })
 
    return () => {
      // au nettoyage, on libère l'intercepteur
      if (reqInterceptor.current !== undefined) {
        axios.interceptors.request.eject(reqInterceptor.current)
      }
    }
  }, [accessToken])
}

import { Provider } from '@lyra/shared-components'
import { axios, useAuthInterceptor } from './rest'
import { Root } from './components/Root'
 
export const App = () => {
  // initialisation de notre intercepteur d'authentification
  useAuthInterceptor()
 
  return (
    <Provider axios={axios}>
      <Root />
    </Provider>
   )
}

import { useContext } from 'react'
import { ConfigContext } from '../contexts/ConfigContext'
 
export const FooComponent = () => {
  const { axios } = useContext(ConfigContext)
  const result = axios.get('/path/to/resource')
  ...
}

{
  "withSeparateModelsAndApi": true,
  "apiPackage": "api",
  "modelPackage": "model",
  "useSingleRequestParameter": true,
  "enumPropertyNaming": "UPPERCASE",
  "stringEnums": true
}

npx @openapitools/openapi-generator-cli generate -g typescript-axios -c openapi-generator.config.json -i payment-order.yaml -o src/openapi/payment-order

import { useContext } from 'react'
import { ConfigContext } from '../contexts/ConfigContext'
import { PaymentOrderApi, Configuration } from '../openapi/payment-order'
 
export const PaymentOrderList = () => {
  const { axios } = useContext(ConfigContext)
 
  // récupération du basePath depuis l'instance axios
  const basePath = axios.defaults.baseURL
 
  // création d'une configuration et d'un client d'API avec les objets générés
  const configuration = new Configuration({ basePath })
  const paymentOrderApi = new PaymentOrderApi(configuration, basePath, axios)
 
  // on peut maintenant utiliser notre API qui va effectuer les requêtes en utilisant l'instance axios passée en config
  const result = paymentOrderApi.findPaymentOrder({
    page: 1,
    perPage: 10,
    minAmount: 42,
  })
 
  ...
}