Problème d'intégration et affichage des input du module PayGreen dans un projet React

[NissorYoungTech]

Bonjour à l'équipe de développement PayGreen,

J'espère que ce message vous trouve en pleine forme. :)

Loic de l'équipe support Paygreen m'a conseillé de faire confiance à votre expertise pour résoudre notre problème d'intégration Paygreen. :)

Nous avons rencontré un souci lors de l'intégration de votre service sur notre web app construite avec React js.
Malgré l'absence d'erreurs explicites dans la console, le module ne semble pas s'afficher correctement.

Résumé du problème :

Le script s'initialise, mais aucun champ ne s'affiche.
J'ai suivi les exemples d’initialisation disponibles sur https://developers.paygreen.fr/docs/paygreenjs-customization-styled-examples).

La page affiche le CSS, mais pas les input pour les champs demandés.
Seul un avertissement s'affiche dans la console indiquant le mode sandbox, sans autres erreurs.
Voici le code que j'ai utilisé pour l'intégration :
https://slow-homegrown-a34.notion.site/Message-support-PayGreen-0b8ed8c97baa4637b0646eeb87d2a6a3

• Nous avons déjà méthodiquement testé différents environnements de dev
• vérifié les end point et résolu les premières erreurs que nous avions eu.
• Essayé avec un fichier JS vierge sans réact.
• Stripe à également pu être installé de manière fonctionnelle sur le projet.

Nous aimerions vraiment pouvoir privilégier une solution française comme paygreen

S'il vous plait, j'apprécierais énormément si vous pouviez jeter un coup d'œil à ce problème.
La solution à ce bug est cruciale pour notre projet, et j'ai toute confiance en votre expertise pour m'aider à résoudre ce souci.

Je vous remercie par avance pour votre temps et votre aide. Je reste disponible pour toute information complémentaire.
Au plaisir de vous lire et belle fin de semaine :)

Florian Groussin
hello@mamossa.com
0604534730

[enzobillisPG]

Bonjour NissorYoungTech,
Désolé pour les délais de réponse. Je viens de regarder le code que vous nous avez fourni et à priori je ne vois aucuns soucis sur la logique utilisée.
L'intégration de PGJS dans React est assez délicate. Pour palier à ça, nous avons commencé le développement d'un package disponible pour le moment sur NPM: https://www.npmjs.com/package/@paygreen/pgjs-react
Ce dernier n'est pas encore safe pour la production, nous vous déconseillons donc de l'utiliser comme tel. Cependant, pourriez-vous tester de l'installer et l'initialiser comme le recommandent les exemples et le readme afin de vérifier que le problème n'est pas plus haut dans votre projet ?
Merci d'avance,
Enzo

[NissorYoungTech]

Bonjour Enzo,

Merci pour votre réponse rapide et pour la suggestion du package @paygreen/pgjs-react. Nous avons procédé aux tests comme recommandé et voici nos observations :

L'installation du package s'est déroulée avec succès.
Nous avons réussi à afficher la liste des packets disponibles dans l'interface d'erreur.
Cependant, nous rencontrons un problème avec PaymentForm. L'interface d'erreur indique :
javascript
Copy code
Compiled with problems:X

ERROR in ./src/pages/PaygreenTest.jsx 19:39-50

export 'PaymentForm' (imported as 'PaymentForm') was not found in '@paygreen/pgjs-react' (possible exports: CoreContainer, CvvContainer, ExpContainer, MethodsContainer, PGJSProvider, PanContainer, PaymentContainer, usePGJS)

Lorsque nous retirons la balise PaymentForm, la page se compile sans rencontrer d'erreur. Malheureusement, cela nous ramène au problème initial que nous avions avant d'intégrer le package.
Avez-vous des suggestions ou des pistes à explorer pour résoudre ce souci avec PaymentForm ? Votre expertise est précieuse pour nous à ce stade.

Merci par avance pour votre aide.

Cordialement,

Ci dessous le code utilisé:
import React from "react";
import {
PaymentForm,
CoreContainer,
MethodsContainer,
PaymentContainer,
PanContainer,
CvvContainer,
ExpContainer,
} from "@paygreen/pgjs-react";

const App = () => {
return (

Online Payment with PayGreen

Basic integration example

      <MethodsContainer />
      <PaymentContainer>
        <PanContainer />
        <CvvContainer />
        <ExpContainer />
      </PaymentContainer>

      <button onClick={submitPayment}>Pay</button>
    </CoreContainer>
  </PaymentForm>
</div>

);
};

export default App;

[enzobillisPG]

Hello @NissorYoungTech

En effet vous avez mis le doigt sur une erreur de documentation, cette dernière n'est pas à jour. Nous avons procédé à sa mise à jour la semaine dernière. Les modifications ne sont pas encore sur la branche master, mais vous pouvez les voir en étant sur la branche develop: https://github.com/PayGreen/pgjs-react/tree/develop
Nous allons passer en production la version dans la journée. Pensez à mettre à jour la dépendance chez vous aussi.
N'hésitez pas à revenir vers moi si le problème persiste.

FYI: We are also english speakers if you prefer ;)

Enzo

[dbslm31]

Bonjour @enzobillisPG,

Je travaille avec @NissorYoungTech et j'ai essayé d'intégrer Paygreen avec le package NPM et la nouvelle doc de la branche : https://github.com/PayGreen/pgjs-react/tree/develop

Après un essai sur notre application et un essai de manière isolée dans une nouvelle application créée uniquement pour le test, nous n'avons toujours pas de résultat.

Voici le code que nous avons utilisé :

import React from "react";
import { BrowserRouter as Router } from "react-router-dom";
import Pages from "./pages/routes";

//Paygreen
import { PGJSProvider } from "@paygreen/pgjs-react";

function App() {
  return (
    <PGJSProvider devMode>
      <Router className="App">
        <Pages />
      </Router>
    </PGJSProvider>
  );
}

export default App;

import {
  CvvContainer,
  ExpContainer,
  MethodsContainer,
  PanContainer,
  PaymentContainer,
  usePGJS,
} from "@paygreen/pgjs-react";
import { useEffect, useState } from "react";

const PayGreenForm = () => {
  const [error, setError] = useState(false);
  const [isSuccess, setIsSuccess] = useState(false);
  const [eventsAttached, setEventsAttached] = useState(false);

  const {
    isPGJSInit,
    initPGJS,
    isPGJSAvailable,
    submitPayment,
    unmount,
    attachEventListener,
    isAuthenticating,
    Events,
  } = usePGJS();

  useEffect(() => {
    if (isPGJSAvailable && !isPGJSInit) {
      // Replace the initPGJS configuration with yours
      initPGJS({
        mode: "payment",
        paymentMethod: "bank_card",
        publicKey: "pk_xxxx",
        paymentOrderID: "po_xxxxx",
        objectSecret: "xxxxxxxxxx",
      });
    }
  }, [initPGJS, isPGJSAvailable, isPGJSInit, unmount]);

  useEffect(() => {
    if (!eventsAttached && attachEventListener) {
      attachEventListener(Events.ERROR, (event) => {
        setError(true);
      });
      attachEventListener(Events.INSTRUMENT_READY, (event) => {
        console.log(event?.detail);
      });
      attachEventListener(Events.FULL_PAYMENT_DONE, () => {
        setIsSuccess(true);
      });
      setEventsAttached(true);
    }
  }, [Events, attachEventListener, eventsAttached, unmount]);

  if (error) {
    return <div>An error occured</div>;
  }
  if (isSuccess) {
    return <div>Payment Success</div>;
  }
  return (
    <PaymentContainer>
      <MethodsContainer />
      <PanContainer />
      <CvvContainer />
      <ExpContainer />

      {!isAuthenticating && <button onClick={submitPayment}>Pay</button>}
    </PaymentContainer>
  );
};

export default PayGreenForm;

Nous avons bien rempli la configuration de PGJS avec nos informations.

Test sur l'application

Test isolé

Dans les deux cas nous avons le message suivant dans la console :
PaygreenJS can't be init twice, please use paygreenjs.unmount() before use init() again

Merci,
Dalila

[enzobillisPG]

Bonjour Dalila,

Merci pour votre retour. Le message d'erreur que vous avez à l'affichage et celui dans la console sont deux problèmes bien distincts:

• Pour le premier, dans votre backoffice quel domaine avez-vous mis lors de la création de votre clé publique ? Avez vous bien mis le domaine sur lequel se lance PGJS actuellement ?
• Le second problème est sûrement une issue dans le package PGJS-React que nous devons corriger à la source, lié au life cycle du hook. Cette dernière ne doit pas vous empêcher de faire fonctionner le package.

Dans l'attente de votre retour,
Enzo

[NissorYoungTech]

Hello Enzo, J espere que vous allez bien Merci bien top pour le package npm on a utilisé ca aussi pour stripe. Je vais regarder ca dans la semaine et vous reviens. Merci pour votre retour. Belle journée El El mar, 29 ago 2023 a las 17:09, enzobillisPG ***@***.***> escribió:

…

Bonjour NissorYoungTech, Désolé pour les délais de réponse. Je viens de regarder le code que vous nous avez fourni et à priori je ne vois aucuns soucis sur la logique utilisée. L'intégration de PGJS dans React est assez délicate. Pour palier à ça, nous avons commencé le développement d'un package disponible pour le moment sur NPM: ***@***.***/pgjs-react Ce dernier n'est pas encore safe pour la production, nous vous déconseillons donc de l'utiliser comme tel. Cependant, pourriez-vous tester de l'installer et l'initialiser comme le recommandent les exemples et le readme afin de vérifier que le problème n'est pas plus haut dans votre projet ? Merci d'avance, Enzo — Reply to this email directly, view it on GitHub <#15 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A2EV575TD3HAR23PU2XNUKDXXYAZXANCNFSM6AAAAAA35WAFUE> . You are receiving this because you authored the thread.Message ID: ***@***.***>