Implementation du widget de Nokash dans une app utilisant React pour le frontend

README.md

Ceci décrit les étapes d'implementation du widget de Nokash dans une app utilisant React pour le frontend.

Il faut noter que l'app est en TypeScript, donc le code partagé ici le sera. Vous pouvez facilement l'adapter au JavaScript.

1. Créer le widget dans le dashboard

La première chose à faire est de créer le widget dans votre dashboard de Nokash et récupérer sa clé dans la colonne Référence.

2. Copier et modifier le script du widget

Ensuite vous remarquerez que le script de Nokash n'est pas encore adapté à l'utilisation avec React, donc il faudra le copier et le modifier légèrement.

Ce script charge d'autres scripts et CSS au chargement de la page. On voudra le modifier pour controler le chargement dans React, en utilisant plutot une fonction qui sera appelée dans le code React.

- window.addEventListener("load", function() {
+ function initNokash() {

Voir le résultat dans le fichier widget.ts dans lequel nous avons aussi fait d'autres modifications pour faire convertir le code en TypeScript.

3. Créer un bouton (ou un autre élément) pour ouvrir le widget

Créez l'élément en utilisant le hook useEffect pour appeler la fonction initNokash précédemment créée dans widget.ts.

Voir button.tsx ci-dessous pour un exemple. Vous pourrez appeler le bouton de l'exemple avec le code suivant :

<NokashButton price="100" orderId="XXX" />

4. C'est tout. Plutôt simple, n'est-ce pas ? :)

Merci à l'équipe de Nokash pour cette solution très utile.

button.tsx

import { useEffect, useRef } from "react";
import initNokash from "./lib/widget";

declare const window: Window &
  typeof globalThis & {
    paiement: any;
  };

const widgetKey = ""; // La référence du widget ici.

export default function NokashButton({
  price = 100,
  orderId
}: {
  price?: number;
  orderId?: string;
}) {
  const buttonRef = useRef(null);

  useEffect(() => {
    initNokash();
  });

  function onSuccessCallback(data: any) {
    console.log("Le paiement a réussi !", data);
  }

  function onErrorCallback(data: any) {
    console.log("Le paiement a échoué !", data);
  }

  function openWidget() {
    window.paiement(
      onSuccessCallback,
      onErrorCallback,
      widgetKey,
      price,
      orderId,
    );
  }

  return (
    <button
      ref={buttonRef}
      onClick={openWidget}
    >
      Passer la commande
    </button>
  );
}

LICENSE.md

No Rights Reserved

Ce tutoriel est sous license CC0, vous pouvez le copier, le modifier, le redistribuer ou autre sans attribution à l'auteur, selon les termes de la license CC0: https://creativecommons.org/publicdomain/zero/1.0/legalcode.fr.

widget.ts

declare const window: Window &
  typeof globalThis & {
    jQuery: any;
  };

let scriptUrls = [
  "https://widget.nokash.app/assets/plugins/dls/js/dl.min.js",
  "https://widget.nokash.app/assets/plugins/jbox/jBox.min.js",
];

let scriptJQ = ["https://widget.nokash.app/assets/admin/js/jquery.min.js"];
let scriptwg = ["https://widget.nokash.app/app/views/Widget/js/wg.min.js"];
const cssUrls = [
  "https://widget.nokash.app/app/views/Widget/css/style.min.css",
  "https://widget.nokash.app/assets/plugins/jbox/jBox.min.css",
  "https://widget.nokash.app/assets/plugins/dls/css/dl.css",
  "https://widget.nokash.app/assets/css/styles/gradual.min.css",
];

function loadScriptAsync(url: string) {
  return new Promise((resolve, reject) => {
    let script = document.createElement("script");
    script.src = url;
    script.async = true;
    script.onload = resolve;
    script.onerror = reject;
    document.body.appendChild(script);
  });
}

function loadCSSAsync(urls: string[]) {
  return Promise.all(
    urls.map((url) => {
      return new Promise((resolve, reject) => {
        const link = document.createElement("link");
        link.rel = "stylesheet";
        link.href = url;
        link.onload = resolve;
        link.onerror = reject;
        document.head.appendChild(link);
      });
    }),
  );
}

export default function initNokash() {
  Promise.all(scriptJQ.map(loadScriptAsync))
    .then(() => {
      Promise.all(scriptUrls.map(loadScriptAsync))
        .then(() => {
          Promise.all(scriptwg.map(loadScriptAsync)).catch((error) => {
            console.log("Erreur lors du chargement des scripts :", error);
          });
        })
        .catch((error) => {
          console.log("Erreur lors du chargement des scripts :", error);
        });
    })
    .catch((error) => {
      console.log("Erreur lors du chargement des scripts :", error);
    });

  loadCSSAsync(cssUrls).catch((error) => {
    console.error("Erreur lors du chargement des fichiers CSS :", error);
  });
}