HandyPay

Recettes pour l'intégration

Copier-coller des exemples pour les modèles d'intégration communs. Tous les exemples utilisent le handypay aide de la Démarrer rapidement.

Next.js : liste de produits côté serveur

Récupérez et affichez les produits dans un composant serveur Next.js App Router.

app/products/page.tsx
import { handypay } from "@/lib/handypay";

export default async function ProductsPage() {
  const { data: products, has_more } = await handypay("/products?limit=20");

  return (
    <div>
      {products.map((product: any) => (
        <div key={product.id}>
          <h2>{product.name}</h2>
          <p>{product.description}</p>
          {product.default_price && (
            <span>${(product.default_price.amount / 100).toFixed(2)}</span>
          )}
        </div>
      ))}
    </div>
  );
}
typescript

Next.js : bouton Checkout (action serveur)

Créez une action serveur qui génère une session de checkout et redirige l'utilisateur.

app/actions/checkout.ts
"use server";

import { redirect } from "next/navigation";
import { handypay } from "@/lib/handypay";

export async function createCheckout(priceId: string) {
  const session = await handypay("/payment-sessions", {
    method: "POST",
    body: JSON.stringify({
      line_items: [{ price_id: priceId, quantity: 1 }],
      success_url: `${process.env.NEXT_PUBLIC_APP_URL}/success`,
      cancel_url: `${process.env.NEXT_PUBLIC_APP_URL}/pricing`,
    }),
  });

  redirect(session.url);
}
typescript

Appeler ceci d'un composant client avec une action de formulaire ou onClick.

React Native : ouvrir Checkout dans le navigateur

Créez une session de paiement et ouvrez la caisse hébergée URL en utilisant Expo WebBrowser.

hooks/useCheckout.ts
import * as WebBrowser from "expo-web-browser";

const API_URL = "https://api.handypay.me/api/v1";
const API_KEY = "hp_live_..."; // Load from secure storage

export async function openCheckout(priceId: string) {
  const res = await fetch(`${API_URL}/payment-sessions`, {
    method: "POST",
    headers: {
      Authorization: `Bearer ${API_KEY}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      line_items: [{ price_id: priceId, quantity: 1 }],
      success_url: "https://yourapp.com/mobile-success",
      cancel_url: "https://yourapp.com/mobile-cancel",
    }),
  });

  const { data } = await res.json();
  await WebBrowser.openBrowserAsync(data.url);
}
typescript

Flux de gestion de l'abonnement

Cycle de vie de l'abonnement de bout en bout : créer un plan, commencer une caisse multiplaces, changer de siège avec une proration explicite et annuler.

TypeScript
// 1. Create a subscription product (do this once, e.g. in a seed script)
const plan = await handypay("/subscription-products", {
  method: "POST",
  body: JSON.stringify({
    name: "Pro Plan",
    amount: 1999,
    currency: "usd",
    interval: "monthly",
    trial_period_days: 7,
  }),
});

// 2. Create a subscription checkout session for a customer
const session = await handypay("/subscription-sessions", {
  method: "POST",
  body: JSON.stringify({
    price_id: plan.price.id,
    quantity: 5,
    customer_email: "user@example.com",
    success_url: "https://yoursite.com/welcome",
    cancel_url: "https://yoursite.com/pricing",
  }),
});

// 3. Redirect to session.url

// 4. List active subscriptions
const { data: subs } = await handypay("/subscriptions?limit=10");

// 5. Add seats and place the proration on the next invoice
await handypay(`/subscriptions/${subs[0].id}/quantity`, {
  method: "PATCH",
  body: JSON.stringify({
    quantity: 8,
    proration_behavior: "create_prorations",
  }),
});

// 6. Cancel a subscription
await handypay(`/subscriptions/${subs[0].id}/cancel`, { method: "POST" });
typescript