> ## Documentation Index
> Fetch the complete documentation index at: https://waffo.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Integration guide

> Complete your first payment in 5 minutes and quickly integrate Waffo Payments.

export const CardGroup = ({children, cols = 2}) => {
  const items = Array.isArray(children) ? children.filter(Boolean) : [children];
  const layoutColumns = items.length === 3 ? 3 : cols === 1 ? 1 : 2;
  return <div className="waffo-guide-cards not-prose my-4 grid gap-4" data-columns={layoutColumns}>
      <style>{`
        .waffo-guide-cards {
          grid-template-columns: minmax(0, 1fr) !important;
        }
        .waffo-guide-cards .waffo-clickable-card {
          transition:
            transform 180ms ease,
            border-color 180ms ease,
            box-shadow 180ms ease,
            background 180ms ease !important;
        }
        html:not(.dark) .waffo-guide-cards .waffo-clickable-card:hover {
          border-color: rgba(109, 145, 245, 0.45) !important;
        }
        html.dark .waffo-guide-cards .waffo-clickable-card:hover,
        .dark .waffo-guide-cards .waffo-clickable-card:hover {
          border-color: rgba(109, 145, 245, 0.45) !important;
        }
        @media (min-width: 768px) {
          .waffo-guide-cards[data-columns="2"],
          .waffo-guide-cards[data-columns="3"] {
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
          }
          .waffo-guide-cards[data-columns="3"] .waffo-guide-card:nth-of-type(3) {
            grid-column: 1 / -1 !important;
          }
        }
      `}</style>
      {items}
    </div>;
};

export const Card = ({title, icon, href, children}) => {
  const resolvedHref = (() => {
    if (!href || typeof href !== "string") return href;
    if (!href.startsWith("/") || href.startsWith("//")) return href;
    if (typeof window === "undefined") return href;
    const docsPrefixMatch = window.location.pathname.match(/^\/docs(?=\/|$)/);
    const docsPrefix = docsPrefixMatch ? docsPrefixMatch[0] : "";
    if (!docsPrefix) {
      return href.startsWith("/docs/") ? href.slice(5) : href;
    }
    return href.startsWith(`${docsPrefix}/`) ? href : `${docsPrefix}${href}`;
  })();
  const Wrapper = resolvedHref ? "a" : "div";
  const interactiveClass = resolvedHref ? "waffo-clickable-card" : "";
  return <Wrapper href={resolvedHref} className={`waffo-guide-card waffo-hover-card block rounded-xl border border-slate-200 dark:border-neutral-700 bg-gradient-to-b from-slate-50 to-white dark:from-neutral-900 dark:to-neutral-950 p-6 no-underline ${interactiveClass}`}>
      <div className="flex flex-col items-start gap-3">
        <span className="inline-flex h-10 w-10 items-center justify-center rounded-lg border border-slate-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 text-blue-700 dark:text-[#4D7CFF]">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
            {icon === "arrow-right" && <path d="M5 12h14M13 5l7 7-7 7" />}
            {icon === "bell" && <path d="M10 21h4M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9" />}
            {icon === "code" && <>
                <path d="m16 18 6-6-6-6" />
                <path d="m8 6-6 6 6 6" />
              </>}
            {icon === "globe" && <>
                <circle cx="12" cy="12" r="10" />
                <path d="M2 12h20" />
                <path d="M12 2a15.3 15.3 0 0 1 0 20" />
                <path d="M12 2a15.3 15.3 0 0 0 0 20" />
              </>}
            {icon === "gear" && <>
                <circle cx="12" cy="12" r="3" />
                <path d="M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.6V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1-1.6 1.7 1.7 0 0 0-1.9.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.9 1.7 1.7 0 0 0-1.6-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.6-1 1.7 1.7 0 0 0-.3-1.9l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.9.3H9a1.7 1.7 0 0 0 1-1.6V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.6 1.7 1.7 0 0 0 1.9-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.9v.1a1.7 1.7 0 0 0 1.6 1h.1a2 2 0 1 1 0 4H21a1.7 1.7 0 0 0-1.6 1Z" />
              </>}
            {icon === "shield-check" && <>
                <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z" />
                <path d="m9 12 2 2 4-4" />
              </>}
            {icon === "circle-check" && <>
                <circle cx="12" cy="12" r="10" />
                <path d="m9 12 2 2 4-4" />
              </>}
            {icon === "arrow-trend-up" && <path d="m3 17 6-6 4 4 8-8M14 7h7v7" />}
            {icon === "arrows-rotate" && <>
                <path d="M21 12a9 9 0 0 1-15.5 6.2" />
                <path d="M3 12A9 9 0 0 1 18.5 5.8" />
                <path d="M21 3v6h-6" />
                <path d="M3 21v-6h6" />
              </>}
            {icon === "calendar" && <>
                <rect x="3" y="4" width="18" height="17" rx="2" />
                <path d="M16 2v4M8 2v4M3 10h18" />
              </>}
            {icon === "clock" && <>
                <circle cx="12" cy="12" r="10" />
                <path d="M12 6v6l4 2" />
              </>}
            {icon === "desktop" && <>
                <rect x="3" y="4" width="18" height="12" rx="2" />
                <path d="M8 20h8M12 16v4" />
              </>}
            {icon === "calculator" && <>
                <rect x="5" y="2" width="14" height="20" rx="2" />
                <path d="M8 6h8M8 10h.01M12 10h.01M16 10h.01M8 14h.01M12 14h.01M16 14h.01M8 18h.01M12 18h.01M16 18h.01" />
              </>}
            {icon === "plug" && <>
                <path d="M12 22v-5" />
                <path d="M9 8V2" />
                <path d="M15 8V2" />
                <path d="M18 8v5a6 6 0 0 1-12 0V8Z" />
              </>}
            {icon === "gauge" && <>
                <path d="M12 14l4-4" />
                <path d="M3.3 19a10 10 0 1 1 17.4 0" />
              </>}
            {icon === "layer-group" && <>
                <path d="m12 3 9 5-9 5-9-5 9-5Z" />
                <path d="m3 12 9 5 9-5" />
                <path d="m3 16 9 5 9-5" />
              </>}
            {icon === "laptop-mobile" && <>
                <rect x="3" y="4" width="13" height="10" rx="2" />
                <path d="M2 18h12" />
                <rect x="17" y="8" width="5" height="12" rx="1" />
              </>}
            {icon === "paintbrush" && <>
                <path d="m14 5 5 5" />
                <path d="M4 20c2 0 4-1 4-3 0-1.1-.9-2-2-2-2 0-3 2-3 4 0 .6.4 1 1 1Z" />
                <path d="m6 15 9-9a2.1 2.1 0 0 1 3 3l-9 9" />
              </>}
            {icon === "key" && <>
                <circle cx="7.5" cy="14.5" r="4.5" />
                <path d="m11 11 8-8" />
                <path d="m15 7 2 2" />
              </>}
            {icon === "circle-minus" && <>
                <circle cx="12" cy="12" r="10" />
                <path d="M8 12h8" />
              </>}
            {icon === "wallet" && <>
                <path d="M3 7h15a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H3Z" />
                <path d="M3 7V5a2 2 0 0 1 2-2h11" />
                <path d="M16 14h.01" />
              </>}
            {icon === "users" && <>
                <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
                <circle cx="9" cy="7" r="4" />
                <path d="M22 21v-2a4 4 0 0 0-3-3.9" />
                <path d="M16 3.1a4 4 0 0 1 0 7.8" />
              </>}
            {icon === "link" && <>
                <path d="M10 13a5 5 0 0 0 7.1 0l2-2a5 5 0 0 0-7.1-7.1l-1.1 1.1" />
                <path d="M14 11a5 5 0 0 0-7.1 0l-2 2a5 5 0 0 0 7.1 7.1l1.1-1.1" />
              </>}
            {icon === "eye" && <>
                <path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z" />
                <circle cx="12" cy="12" r="3" />
              </>}
            {icon === "file-lines" && <>
                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z" />
                <path d="M14 2v6h6" />
                <path d="M8 13h8M8 17h6" />
              </>}
            {icon === "sliders" && <>
                <path d="M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3" />
                <path d="M2 14h4M10 8h4M18 16h4" />
              </>}
            {icon === "folder" && <path d="M3 6a2 2 0 0 1 2-2h5l2 2h7a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z" />}
            {icon === "dollar-sign" && <>
                <path d="M12 2v20" />
                <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7H14a3.5 3.5 0 0 1 0 7H6" />
              </>}
            {icon === "toggle-on" && <>
                <rect x="2" y="7" width="20" height="10" rx="5" />
                <circle cx="16" cy="12" r="3" />
              </>}
            {icon === "infinity" && <path d="M18.2 8.2c2.1 0 3.8 1.7 3.8 3.8s-1.7 3.8-3.8 3.8c-4.2 0-8.2-7.6-12.4-7.6C3.7 8.2 2 9.9 2 12s1.7 3.8 3.8 3.8c4.2 0 8.2-7.6 12.4-7.6Z" />}
            {icon === "book-open" && <>
                <path d="M2 4h7a3 3 0 0 1 3 3v14a3 3 0 0 0-3-3H2Z" />
                <path d="M22 4h-7a3 3 0 0 0-3 3v14a3 3 0 0 1 3-3h7Z" />
              </>}
            {icon === "circle-play" && <>
                <circle cx="12" cy="12" r="10" />
                <path d="m10 8 6 4-6 4Z" />
              </>}
            {icon === "gamepad" && <>
                <rect x="3" y="8" width="18" height="10" rx="5" />
                <path d="M8 13h3M9.5 11.5v3M16 13h.01M18 11h.01" />
              </>}
            {icon === "rocket" && <>
                <path d="M4.5 16.5c-1.5 1.3-2 3.5-2 5 1.5 0 3.7-.5 5-2" />
                <path d="M9 15 4 10l6-6c4-4 9-2 10-1 1 1 3 6-1 10l-6 6-5-5Z" />
                <path d="M15 9h.01" />
              </>}
            {(icon === "flask" || icon === "flask-vial") && <>
                <path d="M9 2v6L4 20a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2L15 8V2" />
                <path d="M8 2h8" />
                <path d="M7 16h10" />
              </>}
            {icon === "credit-card" && <>
                <rect x="3" y="5" width="18" height="14" rx="2" />
                <path d="M3 10h18" />
                <path d="M7 15h4" />
              </>}
            {icon === "puzzle-piece" && <path d="M14 7V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v3H3a1 1 0 0 0-1 1v4a2 2 0 0 0 2 2h2v3a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-3h3a2 2 0 0 0 2-2V8a1 1 0 0 0-1-1Z" />}
            {(icon === "arrows-spin" || icon === "repeat") && <>
                <path d="M17 2l4 4-4 4" />
                <path d="M3 11V9a4 4 0 0 1 4-4h14" />
                <path d="M7 22l-4-4 4-4" />
                <path d="M21 13v2a4 4 0 0 1-4 4H3" />
              </>}
            {icon === "coins" && <>
                <ellipse cx="8" cy="7" rx="5" ry="3" />
                <path d="M3 7v6c0 1.7 2.2 3 5 3s5-1.3 5-3V7" />
                <path d="M13 10c2.8 0 5 1.3 5 3v4c0 1.7-2.2 3-5 3-1.2 0-2.3-.2-3.1-.7" />
              </>}
            {icon === "triangle-exclamation" && <>
                <path d="m21.7 18-8-14a2 2 0 0 0-3.4 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.7-3Z" />
                <path d="M12 9v4M12 17h.01" />
              </>}
            {icon === "list" && <>
                <path d="M8 6h13M8 12h13M8 18h13" />
                <path d="M3 6h.01M3 12h.01M3 18h.01" />
              </>}
            {icon === "star" && <path d="m12 2 3.1 6.3 6.9 1-5 4.9 1.2 6.8-6.2-3.3L5.8 21 7 14.2 2 9.3l6.9-1Z" />}
            {(icon === "rotate" || icon === "arrow-rotate-left") && <>
                <path d="M3 12a9 9 0 1 0 3-6.7" />
                <path d="M3 4v6h6" />
              </>}
            {icon === "clock-rotate-left" && <>
                <path d="M3 12a9 9 0 1 0 3-6.7" />
                <path d="M3 4v6h6" />
                <path d="M12 7v5l3 2" />
              </>}
            {icon === "circle-xmark" && <>
                <circle cx="12" cy="12" r="10" />
                <path d="m15 9-6 6M9 9l6 6" />
              </>}
            {icon === "paper-plane" && <path d="m22 2-7 20-4-9-9-4Z" />}
            {icon === "signal" && <>
                <path d="M2 20h.01M7 20v-4M12 20v-8M17 20V8M22 20V4" />
              </>}
            {icon === "circle-question" && <>
                <circle cx="12" cy="12" r="10" />
                <path d="M9.1 9a3 3 0 1 1 5.8 1c0 2-3 2-3 4" />
                <path d="M12 17h.01" />
              </>}
            {icon === "palette" && <>
                <path d="M12 22a10 10 0 1 1 7.5-3.4c-.9 1-2.4.4-2.4-.9 0-1.1-.9-2-2-2h-1.4c-1.2 0-2.2 1-2.2 2.2 0 1.1.9 2.1 2.1 2.1" />
                <circle cx="7.5" cy="10.5" r=".8" />
                <circle cx="12" cy="7.5" r=".8" />
                <circle cx="16.5" cy="10.5" r=".8" />
              </>}
            {icon === "hexagon" && <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />}
            {icon === "coffee" && <>
                <path d="M17 8h1a4 4 0 1 1 0 8h-1" />
                <path d="M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4Z" />
                <path d="M6 2v2" />
                <path d="M10 2v2" />
                <path d="M14 2v2" />
              </>}
            {icon === "box" && <>
                <path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z" />
                <path d="m3.3 7 8.7 5 8.7-5" />
                <path d="M12 22V12" />
              </>}
            {icon === "file-code" && <>
                <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" />
                <path d="M14 2v4a2 2 0 0 0 2 2h4" />
                <path d="m10 13-2 2 2 2" />
                <path d="m14 17 2-2-2-2" />
              </>}
            {icon === "wand-sparkles" && <>
                <path d="m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72" />
                <path d="m14 7 3 3" />
                <path d="M5 6v4" />
                <path d="M19 14v4" />
                <path d="M10 2v2" />
                <path d="M7 8H3" />
                <path d="M21 16h-4" />
                <path d="M11 3H9" />
              </>}
            {(!icon || !["arrow-right", "bell", "code", "globe", "gear", "shield-check", "circle-check", "arrow-trend-up", "arrows-rotate", "calendar", "clock", "desktop", "calculator", "plug", "gauge", "layer-group", "laptop-mobile", "paintbrush", "key", "circle-minus", "wallet", "users", "link", "eye", "file-lines", "sliders", "folder", "dollar-sign", "toggle-on", "infinity", "book-open", "circle-play", "gamepad", "rocket", "flask", "flask-vial", "credit-card", "puzzle-piece", "arrows-spin", "repeat", "coins", "triangle-exclamation", "list", "star", "rotate", "arrow-rotate-left", "clock-rotate-left", "circle-xmark", "paper-plane", "signal", "circle-question", "palette", "hexagon", "coffee", "box", "file-code", "wand-sparkles"].includes(icon)) && <path d="M13 2 4 14h7l-1 8 9-12h-7l1-8Z" />}
          </svg>
        </span>
        <div className="flex flex-col gap-2">
          <h4 className="m-0 text-base font-semibold text-slate-900 dark:text-slate-100">
            {title}
          </h4>
          <div className="m-0 text-sm leading-6 text-slate-600 dark:text-slate-300">
            {children}
          </div>
        </div>
      </div>
    </Wrapper>;
};

## Choose an integration path

Choose one path before you start. Both paths end with sandbox testing and submitting acceptance materials to the Waffo technical support group.

### API integration

Use this path if you already have your own checkout, need full server-side control, or want to integrate manually with the API Reference.

<Steps>
  <Step title="Choose the payment product">
    Use one-time payment for single-charge orders, or subscription payment for recurring billing.
  </Step>

  <Step title="Integrate the required APIs">
    Follow the [API direct](/docs/en/developer-docs/integration/api/overview) roadmap and implement the required APIs.
  </Step>

  <Step title="Check API Reference details">
    Use [API Reference](/docs/api-reference/introduction) for fields, requests, responses, and signing details.
  </Step>

  <Step title="Complete extra payment setup">
    If you need Apple Pay or Google Pay, complete the extra testing and configuration in [Sandbox and testing](/docs/en/developer-docs/getting-started/sandbox).
  </Step>

  <Step title="Submit acceptance results">
    Finish sandbox testing, download and fill in the acceptance case template, then submit the results to the Waffo technical support group.
  </Step>
</Steps>

### AI integration tool

Use this path if you want an AI coding tool to generate SDK integration code, tests, and a test report.

<Steps>
  <Step title="Install waffo-integrate">
    Run `npx @waffo/waffo-integrate`.
  </Step>

  <Step title="Trigger the integration">
    Trigger Waffo integration in Codex, Claude Code, or Cursor.
  </Step>

  <Step title="Answer business questions">
    Answer the AI's business questions, such as product type, refund, subscription, and whether Webhook integration is required.
  </Step>

  <Step title="Review code and test report">
    The AI generates code, runs integration tests, and outputs a test report.
  </Step>

  <Step title="Submit the test report">
    Submit the test report to the Waffo technical support group for confirmation.
  </Step>
</Steps>

## Recommended: Use the AI integration tool (waffo-integrate)

**waffo-integrate** is Waffo's official AI integration Skill. It uses an interactive wizard to generate production-ready SDK integration code, then checks the result through Step 6 verification. Version `1.7.0` supports Node.js, Java, Go, Python, and PHP projects.

### Installation

<CodeGroup>
  ```bash Auto-detect (recommended) theme={null}
  npx @waffo/waffo-integrate
  ```

  ```bash Codex theme={null}
  npx @waffo/waffo-integrate --codex
  ```

  ```bash Shared agents theme={null}
  npx @waffo/waffo-integrate --agents
  ```

  ```bash Claude Code theme={null}
  npx @waffo/waffo-integrate --claude
  ```

  ```bash Cursor theme={null}
  npx @waffo/waffo-integrate --cursor
  ```
</CodeGroup>

### Usage

After installation, trigger it in your AI assistant:

* Type `integrate waffo`
* The Skill will guide you through: selecting a feature (payment / refund / subscription / Webhook) → detecting your language → generating code → running validation tests

### Supported languages and features

| Language | SDK                                | Frameworks                        |
| -------- | ---------------------------------- | --------------------------------- |
| Node.js  | `@waffo/waffo-node`                | Express, NestJS, Fastify          |
| Java     | `com.waffo:waffo-java`             | Spring Boot                       |
| Go       | `github.com/waffo-com/waffo-go/v2` | Gin, Echo, Fiber, Chi             |
| Python   | `waffo`                            | FastAPI, Flask, Django            |
| PHP      | `waffo/waffo-php`                  | Laravel, Symfony, Slim, plain PHP |

All features can be integrated automatically via the Skill: payments, refunds, subscriptions (including upgrades and downgrades), Webhooks, merchant config queries, and payment method queries.

### Advantages

| Metric                | Using the Skill                          | Manual integration                |
| --------------------- | ---------------------------------------- | --------------------------------- |
| Eval coverage         | 36 prompt scenarios / 117 assertions     | Must maintain cases manually      |
| Code generation rules | 33 guardrails                            | Must consult docs manually        |
| Verification flow     | Step 6 phased verification + report gate | Must organize acceptance manually |

<Tip>
  For full documentation, see [waffo-integrate on GitHub](https://github.com/waffo-com/waffo-integrate).
</Tip>

***

## Manual integration

If you prefer not to use an AI tool, follow these steps to integrate manually.

## Prerequisites

* Waffo Merchant account
* API Key (from the Dashboard)
* RSA key pair (see [Authentication and signing](/docs/en/developer-docs/integration/api/overview))

<Steps>
  <Step title="Install the SDK">
    <CodeGroup>
      ```bash Node.js theme={null}
      npm install @waffo/waffo-node
      ```

      ```xml Java theme={null}
      <dependency>
          <groupId>com.waffo</groupId>
          <artifactId>waffo-java</artifactId>
          <version>3.1.0</version>
      </dependency>
      ```

      ```bash Go theme={null}
      go get github.com/waffo-com/waffo-go/v2
      ```

      ```bash Python theme={null}
      python -m pip install "waffo==0.5.0b0"
      python -m pip install --pre waffo
      ```

      ```bash PHP theme={null}
      composer require waffo/waffo-php
      ```
    </CodeGroup>
  </Step>

  <Step title="Initialize the client">
    <CodeGroup>
      ```typescript Node.js theme={null}
      import { Waffo, Environment } from '@waffo/waffo-node';

      const waffo = new Waffo({
        apiKey: process.env.WAFFO_API_KEY,
        privateKey: process.env.WAFFO_PRIVATE_KEY,
        waffoPublicKey: process.env.WAFFO_PUBLIC_KEY,
        merchantId: process.env.WAFFO_MERCHANT_ID,
        environment: Environment.SANDBOX,
      });
      ```

      ```java Java theme={null}
      import com.waffo.Waffo;
      import com.waffo.types.config.WaffoConfig;
      import com.waffo.types.config.Environment;

      WaffoConfig config = WaffoConfig.builder()
          .apiKey(System.getenv("WAFFO_API_KEY"))
          .privateKey(System.getenv("WAFFO_PRIVATE_KEY"))
          .waffoPublicKey(System.getenv("WAFFO_PUBLIC_KEY"))
          .merchantId(System.getenv("WAFFO_MERCHANT_ID"))
          .environment(Environment.SANDBOX)
          .build();

      Waffo waffo = new Waffo(config);
      ```

      ```go Go theme={null}
      import (
          waffo "github.com/waffo-com/waffo-go/v2"
          "github.com/waffo-com/waffo-go/v2/config"
      )

      cfg, _ := config.NewConfigBuilder().
          APIKey(os.Getenv("WAFFO_API_KEY")).
          PrivateKey(os.Getenv("WAFFO_PRIVATE_KEY")).
          WaffoPublicKey(os.Getenv("WAFFO_PUBLIC_KEY")).
          MerchantID(os.Getenv("WAFFO_MERCHANT_ID")).
          Environment(config.Sandbox).
          Build()

      client := waffo.New(cfg)
      ```

      ```python Python theme={null}
      import os

      from waffo import Environment, Waffo, WaffoConfig

      config = WaffoConfig(
          api_key=os.environ["WAFFO_API_KEY"],
          private_key=os.environ["WAFFO_PRIVATE_KEY"],
          waffo_public_key=os.environ["WAFFO_PUBLIC_KEY"],
          merchant_id=os.environ["WAFFO_MERCHANT_ID"],
          environment=Environment.SANDBOX,
      )

      waffo = Waffo(config)
      ```

      ```php PHP theme={null}
      <?php

      require __DIR__ . '/vendor/autoload.php';

      use Waffo\Config\Environment;
      use Waffo\Config\WaffoConfig;
      use Waffo\Waffo;

      $waffo = new Waffo(new WaffoConfig(
          apiKey: 'your-api-key',
          privateKey: 'your-base64-private-key',
          waffoPublicKey: 'waffo-base64-public-key',
          environment: Environment::Sandbox,
          merchantId: 'your-merchant-id',
      ));
      ```
    </CodeGroup>
  </Step>

  <Step title="Create a payment">
    ```typescript theme={null}
    import { randomUUID } from 'crypto';

    const paymentRequestId = randomUUID().replace(/-/g, '');

    const response = await waffo.order().create({
      paymentRequestId,
      merchantOrderId: `ORDER_${Date.now()}`,
      orderCurrency: 'HKD',
      orderAmount: '100.00',
      orderDescription: 'Premium Plan',
      notifyUrl: 'https://your-site.com/webhook/waffo',
      successRedirectUrl: 'https://your-site.com/payment/success',
      failedRedirectUrl: 'https://your-site.com/payment/failed',
      cancelRedirectUrl: 'https://your-site.com/payment/cancel',
      userInfo: {
        userId: 'user_123',
        userEmail: 'user@example.com',
        userTerminal: 'WEB',
      },
      paymentInfo: { productName: 'ONE_TIME_PAYMENT' },
      goodsInfo: {
        goodsName: 'Premium Plan',
        goodsUrl: 'https://your-site.com/product/001',
      },
    });

    if (response.isSuccess()) {
      const data = response.getData();
      // Redirect the user to the Waffo checkout page
      redirect(data.orderAction);
    }
    ```
  </Step>

  <Step title="Handle the Webhook callback">
    See the [Webhook](/docs/en/developer-docs/webhook/overview) section.
  </Step>
</Steps>

## Next steps

<CardGroup cols={3}>
  <Card title="Checkout integration" icon="credit-card" href="/docs/en/developer-docs/integration/checkout/steps">
    The simplest integration approach
  </Card>

  <Card title="Core concepts" icon="book-open" href="/docs/en/developer-docs/core-concepts/payment-lifecycle">
    Understand the payment lifecycle
  </Card>

  <Card title="Sandbox and testing" icon="flask" href="/docs/en/developer-docs/getting-started/sandbox">
    Overview of the test environment
  </Card>
</CardGroup>