Intégrer MonCash dans une application React Native

┌──────────────┐    1. demande montant     ┌──────────────┐
│              │ ───────────────────────▶ │              │
│  React       │                          │  Votre       │
│  Native      │ ◀─── 2. paymentUrl ───── │  backend     │
│  (client)    │                          │  (Node/Go/…)  │
│              │                          │              │
└──────┬───────┘                          └──────┬───────┘
       │ 3. Linking.openURL(paymentUrl)          │
       ▼                                         │
┌──────────────┐                                 │
│  Navigateur  │     4. user paie sur MonCash    │
│  système     │ ──────────────────────────────▶ │
│  + MonCash   │                                 │
└──────┬───────┘                                 │
       │ 5. redirect mcc://payment-return?ref=…  │
       ▼                                         │ 6. webhook
┌──────────────┐                                 │    payment.completed
│  React       │ 7. GET /status?ref=…            │    (HMAC signé)
│  Native      │ ──────────────────────────────▶ │
│  (retour)    │ ◀─── statut confirmé ────────── │
└──────────────┘                                 │

{
  "expo": {
    "name": "MaBoutique",
    "slug": "ma-boutique",
    "scheme": "mcc",
    "ios": {
      "bundleIdentifier": "com.maboutique.app"
    },
    "android": {
      "package": "com.maboutique.app",
      "intentFilters": [
        {
          "action": "VIEW",
          "category": ["BROWSABLE", "DEFAULT"],
          "data": [{ "scheme": "mcc", "host": "payment-return" }]
        }
      ]
    }
  }
}

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLName</key>
    <string>com.maboutique.app</string>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>mcc</string>
    </array>
  </dict>
</array>

<activity android:name=".MainActivity" android:launchMode="singleTask">
  <intent-filter android:label="filter_react_native">
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="mcc" android:host="payment-return" />
  </intent-filter>
</activity>

npm install @moncashconnect/sdk express

// server.js
import express from "express";
import { MonCashConnect } from "@moncashconnect/sdk";

const app = express();
app.use(express.json());

const mcc = new MonCashConnect({ secretKey: process.env.MCC_SECRET_KEY });

// Appelé par l'app RN avec { amount, orderId }
app.post("/api/payments", async (req, res) => {
  const { amount, orderId } = req.body;
  if (!amount || !orderId) {
    return res.status(400).json({ error: "amount et orderId requis" });
  }

  try {
    const payment = await mcc.payments.create({
      amount,
      referenceId: orderId,
      // Deep link vers l'app — pas une URL https://
      returnUrl: "mcc://payment-return",
    });

    res.json({
      paymentUrl: payment.paymentUrl,
      reference:  payment.reference,
    });
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

// Lecture de statut — pas de clé sur le client
app.get("/api/payments/:reference", async (req, res) => {
  try {
    const status = await mcc.payments.retrieve(req.params.reference);
    res.json(status);
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

app.listen(3000);

# Expo (recommandé)
npx expo install expo-linking

# Bare RN — Linking est déjà fourni par react-native

// screens/CheckoutScreen.tsx
import { useState } from "react";
import { View, Text, Button, Alert, ActivityIndicator } from "react-native";
import * as Linking from "expo-linking"; // ou: import { Linking } from "react-native";

const API = "https://api.maboutique.com";

export default function CheckoutScreen() {
  const [loading, setLoading] = useState(false);

  const pay = async () => {
    setLoading(true);
    try {
      // 1. Demander au backend de créer le paiement
      const orderId = "ORD-" + Date.now();
      const res = await fetch(`${API}/api/payments`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ amount: 500, orderId }),
      });
      const { paymentUrl, reference } = await res.json();

      // 2. Persister la référence pour la retrouver au retour
      await AsyncStorage.setItem("pendingRef", reference);

      // 3. Ouvrir MonCash dans le navigateur système
      const supported = await Linking.canOpenURL(paymentUrl);
      if (!supported) {
        Alert.alert("Impossible d'ouvrir MonCash sur cet appareil.");
        return;
      }
      await Linking.openURL(paymentUrl);
    } catch (err) {
      Alert.alert("Erreur", String(err));
    } finally {
      setLoading(false);
    }
  };

  return (
    <View style={{ padding: 20 }}>
      <Text>Total : 500 HTG</Text>
      {loading
        ? <ActivityIndicator />
        : <Button title="Payer avec MonCash" onPress={pay} />}
    </View>
  );
}

// App.tsx — listener global de deep link
import { useEffect } from "react";
import * as Linking from "expo-linking";
import AsyncStorage from "@react-native-async-storage/async-storage";

const API = "https://api.maboutique.com";

export default function App() {
  useEffect(() => {
    // Cas 1 : app déjà ouverte, deep link reçu en runtime
    const sub = Linking.addEventListener("url", ({ url }) => handle(url));

    // Cas 2 : app lancée par le deep link à froid
    Linking.getInitialURL().then((url) => { if (url) handle(url); });

    return () => sub.remove();
  }, []);

  return <NavigationContainer>{/* ... */}</NavigationContainer>;
}

async function handle(url: string) {
  const { hostname, queryParams } = Linking.parse(url);
  if (hostname !== "payment-return") return;

  // ref peut venir du callback OU du storage si l'URL est tronquée
  const ref =
    (queryParams?.ref as string | undefined) ??
    (await AsyncStorage.getItem("pendingRef"));
  if (!ref) return;

  // Demander le statut au backend — JAMAIS confiance aux paramètres URL
  const res = await fetch(`${API}/api/payments/${ref}`);
  const tx = await res.json();

  if (tx.status === "completed") {
    // Naviguer vers l'écran "Merci"
  } else if (tx.status === "pending") {
    // Webhook pas encore arrivé — poll quelques secondes ou afficher "en cours"
  }
}

// server.js (suite)
import crypto from "crypto";

// IMPORTANT : raw body, pas express.json()
app.post("/webhooks/moncash",
  express.raw({ type: "application/json" }),
  (req, res) => {
    const signature = req.header("X-MCC-Signature") || "";
    const timestamp = req.header("X-MCC-Timestamp") || "";
    const rawBody   = req.body.toString("utf8");

    const expected = crypto
      .createHmac("sha256", process.env.MCC_WEBHOOK_SECRET)
      .update(`${timestamp}.${rawBody}`)
      .digest("hex");

    if (!crypto.timingSafeEqual(
      Buffer.from(signature, "hex"),
      Buffer.from(expected, "hex"),
    )) {
      return res.status(401).send("invalid signature");
    }

    const event = JSON.parse(rawBody);

    if (event.event === "payment.completed") {
      // Marquer la commande payée + déclencher push notification
      sendPushNotification(event.reference, "Paiement confirmé");
    } else if (event.event === "payment.failed") {
      sendPushNotification(event.reference, "Paiement échoué");
    }

    res.status(200).send("OK");
  },
);