Code examples

Two ways in: raw HTTP, or the @loofta/pay-sdk package.

curl

curl -X POST https://api.loofta.xyz/payment-links \
  -H "Authorization: Bearer $LOOFTA_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"amount": 25, "message": "Invoice #1042"}'

TypeScript / JavaScript SDK

npm install @loofta/pay-sdk

import { LooftaPayClient } from "@loofta/pay-sdk";

const client = new LooftaPayClient({ apiKey: process.env.LOOFTA_API_KEY });

const link = await client.createPaymentLink({
  amount: 25,
  message: "Invoice #1042",
});

console.log(link.url); // https://pay.loofta.com/checkout/aB3xK9pQ

Embedding a checkout button

@loofta/pay-sdk is server-side only — it never exposes your API key to the browser, so it doesn't ship a React component either. Copy components/sdk/PayButton.tsx from the Loofta repo into your project, or write your own equivalent against a "create checkout" endpoint on your own backend. Real integration pattern — one fresh link per click, not one static URL reused across every order:

<PayButton
  onGenerateLink={async () => {
    const res = await fetch("/api/create-checkout", { method: "POST" }); // your own backend, calls createPaymentLink server-side
    const { url } = await res.json();
    return url;
  }}
  buttonText="Buy now"
  onSuccess={(paymentId) => console.log("Paid:", paymentId)}
/>

See the for this pattern actually wired up end to end.

Building with an AI coding agent? Grab the copyable — it has all of this in a format Claude Code and similar tools can follow directly.