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

# API Overview

> Choose the right integration for your use case: online payments, billing, or in-person.

export const Badge = ({ children, color = "#e8f5e9", textColor = "#2e7d32" }) => (
  <span style={{
    display: "inline-block",
    padding: "3px 10px",
    borderRadius: "4px",
    fontSize: "12px",
    fontWeight: 600,
    backgroundColor: color,
    color: textColor,
  }}>{children}</span>
);

export const Dots = ({ filled = 1, total = 4 }) => (
  <div style={{ display: "flex", alignItems: "center", gap: "6px", marginTop: "6px" }}>
    <span style={{ fontSize: "12px", color: "#9ca3af", fontWeight: 500 }}>Integration effort:</span>
    <div style={{ display: "flex", gap: "3px" }}>
      {Array.from({ length: total }, (_, i) => (
        <div key={i} style={{
          width: "7px", height: "7px", borderRadius: "50%",
          backgroundColor: i < filled ? "#2465DE" : "#d1d5db"
        }} />
      ))}
    </div>
  </div>
);

export const OptionCard = ({ title, description, href, img, imgContain }) => (
  <a href={href} style={{ textDecoration: "none", color: "inherit", display: "block", border: "none", boxShadow: "none" }} className="no-underline">
    <div style={{
      borderRadius: "10px",
      border: "1px solid #e5e7eb",
      display: "flex",
      flexDirection: "row",
      alignItems: "stretch",
      overflow: "hidden",
      transition: "box-shadow 0.2s, border-color 0.2s",
      minHeight: "220px",
    }} className="hover:shadow-md hover:border-blue-300 dark:border-gray-600 dark:hover:border-blue-500">
      <div style={{ flex: 1, padding: "24px", display: "flex", flexDirection: "column", justifyContent: "center" }}>
        <h4 style={{ margin: "0 0 6px 0", fontSize: "15px", fontWeight: 600 }} className="text-blue-600 dark:text-blue-400">{title}</h4>
        <p style={{ margin: 0, fontSize: "14px", lineHeight: "1.6", fontWeight: 400 }} className="text-gray-700 dark:text-gray-300">{description}</p>
      </div>
      {img && <div style={{ width: "50%", flexShrink: 0, display: "flex", alignItems: "flex-end", justifyContent: "center", overflow: "hidden", paddingTop: "24px", paddingRight: "24px", paddingBottom: imgContain ? "24px" : 0 }}>
        <img src={img} alt={title} style={{ maxHeight: imgContain ? "150px" : "200px", maxWidth: "100%", objectFit: "contain", display: "block", margin: 0, padding: 0, verticalAlign: "bottom" }} />
      </div>}
    </div>
  </a>
);

export const SectionCard = ({ title, subtitle, options }) => (
  <div style={{ marginBottom: "40px" }}>
    <h3 style={{ margin: "0 0 6px 0", fontSize: "22px", fontWeight: 700, letterSpacing: "-0.02em" }} className="text-gray-900 dark:text-white">{title}</h3>
    <p style={{ margin: "0 0 20px 0", fontSize: "15px", lineHeight: "1.6" }} className="text-gray-500 dark:text-gray-400">{subtitle}</p>
    <div style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
      {options.map((opt, i) => (
        <OptionCard key={i} {...opt} />
      ))}
    </div>
  </div>
);

HitPay's payment API lets businesses accept 40+ payment methods — including PayNow, FPX, QRIS, GrabPay, DuitNow, PromptPay, and major card networks — with a single REST API integration. The API supports redirect checkout, embedded QR codes for local payment rails, recurring billing with automated charges, saved payment methods for on-demand billing, and in-person terminal payments via WiFi-connected card readers. HitPay processes payments across 8 countries in Asia-Pacific: Singapore, Malaysia, Philippines, Indonesia, Thailand, Hong Kong, Australia, and New Zealand.

All API requests use HTTPS with HMAC-SHA256 webhook verification. Rate limits are 400 requests per minute (general) and 70 requests per minute (payment creation). A full sandbox environment is available for testing before going live.

Choose the integration that matches your use case below.

<SectionCard
  title="Online Payments"
  subtitle="Accept one-time payments on your website or app. Pick how you want to present the checkout experience."
  defaultImg="/images/api/online-payments-checkout.png"
  options={[
{
  title: "Redirect Checkout",
  href: "/apis/guide/online-payments",
  description: "Redirect to HitPay's hosted checkout. Supports all payment methods with zero frontend work.",
  img: "/images/api/online-payments-checkout.png"
},
{
  title: "Embedded QR Codes",
  href: "/apis/guide/embedded-qr-code-payments/domestic-qr",
  description: "Generate native QR codes (PayNow, DuitNow, QRPH) directly in your UI. Ideal for kiosks and custom flows.",
  img: "/images/api/embedded-qr-checkout.png",
  imgContain: true
}
]}
/>

<SectionCard
  title="Billing"
  subtitle="Set up recurring charges or save payment methods to charge customers later."
  defaultImg="/images/api/recurring_grid.png"
  options={[
{
  title: "Recurring Billing",
  href: "/apis/guide/recurring-billing",
  description: "Create subscription plans with automated weekly, monthly, or yearly charges.",
  img: "/images/api/billing-checkout.png"
},
{
  title: "Save Payment Method",
  href: "/apis/guide/save-payment-method",
  description: "Save cards or wallets, then charge any amount on your own schedule.",
  img: "/images/api/save-payment-method.png",
  imgContain: true
}
]}
/>

<SectionCard
  title="In-Person Payments"
  subtitle="Accept card-present payments using HitPay-supported terminal devices."
  defaultImg="/images/api/in-person_grid.png"
  options={[
{
  title: "Card Reader Integration",
  href: "/apis/guide/in-person-payments/overview",
  description: "Trigger payments on WiFi-connected terminals for kiosks, POS, and vending machines.",
  img: "/images/api/in-person-checkout.png",
  imgContain: true
}
]}
/>