Widget checkout integration

// server.js — Create a widget session (Node.js / Express)
const express = require("express");
const app = express();

app.post("/create-checkout", async (req, res) => {
  const { amount, items, buyerPhone } = req.body;

  const response = await fetch("https://api.arosapay.com/v1/widget-checkout", {
    method: "POST",
    headers: {
      "X-API-Key": process.env.AROSAPAY_SECRET_KEY,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      amount,
      title: items[0]?.name || "Order",
      vertical: "general",
      satisfaction_days: 3,
      buyer_phone: buyerPhone,
      items,
    }),
  });

  const session = await response.json();
  res.json(session); // { sessionId, transactionId }
});

// CheckoutButton.tsx — React component
import { useEffect, useRef } from "react";

export function CheckoutButton({ amount, items, buyerPhone }) {
  const containerRef = useRef(null);

  const handleCheckout = async () => {
    // 1. Create session on your server
    const res = await fetch("/create-checkout", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ amount, items, buyerPhone }),
    });
    const { sessionId } = await res.json();

    // 2. Render the ArosaPay widget
    ArosaPay.renderCheckout("#arosapay-widget", {
      sessionId,
      onSuccess: (result) => {
        console.log("Funds secured:", result.transactionId);
        // Redirect to order confirmation
        window.location.href = "/order-confirmed";
      },
      onError: (error) => {
        console.error("Payment failed:", error.message);
      },
    });
  };

  return (
    <>
      <button onClick={handleCheckout}>
        Pay with ArosaPay (Protected)
      </button>
      <div id="arosapay-widget" ref={containerRef} />
    </>
  );
}