Intégrer MonCash avec Vue 3

npm install express cors dotenv @moncashconnect/sdk

MCC_SECRET_KEY=sk_proj_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
MCC_WEBHOOK_SECRET=whsec_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
APP_URL=https://votresite.com
FRONTEND_ORIGIN=https://votresite.com
PORT=3001

import "dotenv/config";
import express from "express";
import cors from "cors";
import { MonCashClient, constructEvent, MonCashError } from "@moncashconnect/sdk";

const app    = express();
const client = new MonCashClient(process.env.MCC_SECRET_KEY);

app.use(cors({ origin: process.env.FRONTEND_ORIGIN }));

// JSON pour /api/* mais pas pour le webhook
app.use((req, res, next) => {
  if (req.path.startsWith("/webhooks/")) return next();
  express.json()(req, res, next);
});

app.post("/api/pay", async (req, res) => {
  const { orderId, amount, customerName, customerEmail } = req.body ?? {};
  if (!orderId || !amount) {
    return res.status(400).json({ error: "orderId et amount requis." });
  }

  try {
    const payment = await client.createPayment(Number(amount), String(orderId), {
      returnUrl:     `${process.env.APP_URL}/pay/return`,
      customerName,
      customerEmail,
    });
    res.json({ paymentUrl: payment.paymentUrl, reference: payment.reference });
  } catch (err) {
    if (err instanceof MonCashError) {
      return res.status(err.statusCode).json({ error: err.message });
    }
    res.status(500).json({ error: "Erreur serveur." });
  }
});

app.get("/api/pay-status", async (req, res) => {
  const ref = String(req.query.reference ?? "");
  if (!ref) return res.status(400).json({ error: "Référence manquante." });
  try {
    res.json(await client.getPaymentStatus(ref));
  } catch (err) {
    if (err instanceof MonCashError) {
      return res.status(err.statusCode).json({ error: err.message });
    }
    res.status(500).json({ error: "Erreur serveur." });
  }
});

app.post(
  "/webhooks/moncash",
  express.raw({ type: "application/json" }),
  (req, res) => {
    try {
      const event = constructEvent(
        req.body,
        req.headers["x-mcc-signature"] ?? "",
        req.headers["x-mcc-timestamp"] ?? "",
        process.env.MCC_WEBHOOK_SECRET,
      );
      if (event.event === "payment.completed") {
        // marquer la commande comme payée
      } else if (event.event === "payment.failed") {
        // marquer comme échouée
      }
      res.sendStatus(200);
    } catch (err) {
      if (err instanceof MonCashError) {
        return res.status(err.statusCode).send(err.message);
      }
      res.sendStatus(500);
    }
  },
);

app.listen(process.env.PORT ?? 3001);

VITE_API_URL=https://api.votresite.com

import { ref } from "vue";

type StartArgs = {
  orderId: string;
  amount: number;
  customerName?: string;
  customerEmail?: string;
};

export function usePayment() {
  const loading = ref(false);
  const error   = ref<string | null>(null);

  async function startPayment(args: StartArgs) {
    loading.value = true;
    error.value   = null;
    try {
      const res = await fetch(`${import.meta.env.VITE_API_URL}/api/pay`, {
        method:  "POST",
        headers: { "Content-Type": "application/json" },
        body:    JSON.stringify(args),
      });

      if (!res.ok) {
        const j = await res.json().catch(() => ({}));
        throw new Error(j.error ?? `HTTP ${res.status}`);
      }

      const { paymentUrl } = await res.json();
      window.location.assign(paymentUrl);
    } catch (e) {
      error.value   = e instanceof Error ? e.message : "Erreur inconnue";
      loading.value = false;
    }
  }

  return { loading, error, startPayment };
}

<script setup lang="ts">
import { usePayment } from "@/composables/usePayment";

const props = defineProps<{
  orderId: string;
  amount:  number;
  customerName?:  string;
  customerEmail?: string;
}>();

const { loading, error, startPayment } = usePayment();

function onClick() {
  startPayment({
    orderId:       props.orderId,
    amount:        props.amount,
    customerName:  props.customerName,
    customerEmail: props.customerEmail,
  });
}
</script>

<template>
  <div>
    <button
      type="button"
      :disabled="loading"
      class="rounded-md bg-red-600 px-4 py-2 font-medium text-white disabled:opacity-60"
      @click="onClick"
    >
      <span v-if="loading">Redirection…</span>
      <span v-else>Payer {{ amount }} HTG avec MonCash</span>
    </button>
    <p v-if="error" class="mt-2 text-sm text-red-600">{{ error }}</p>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";

type Tx = { status: "pending" | "completed" | "failed"; amount: number; reference: string };

const tx    = ref<Tx | null>(null);
const error = ref<string | null>(null);

onMounted(async () => {
  const ref_ = new URLSearchParams(window.location.search).get("ref");
  if (!ref_) {
    error.value = "Référence manquante.";
    return;
  }
  try {
    const r = await fetch(
      `${import.meta.env.VITE_API_URL}/api/pay-status?reference=${ref_}`,
    );
    tx.value = await r.json();
  } catch (e) {
    error.value = e instanceof Error ? e.message : "Erreur";
  }
});
</script>

<template>
  <div>
    <p v-if="error">Erreur : {{ error }}</p>
    <p v-else-if="!tx">Vérification du paiement…</p>
    <p v-else-if="tx.status === 'completed'">
      Merci ! Paiement de {{ tx.amount }} HTG reçu.
    </p>
    <p v-else-if="tx.status === 'failed'">Le paiement a échoué.</p>
    <p v-else>Paiement en attente de confirmation MonCash…</p>
  </div>
</template>