> ## 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.

# One-time Payment

> One integration, global payment methods covered — every transaction clear and in control.

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 || !["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"].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>;
};

export const PM = {
  VISA: {
    alt: "Visa",
    src: "https://cdn.waffo.com/payment-method/PMI_CC001.png"
  },
  MASTERCARD: {
    alt: "Mastercard",
    src: "https://cdn.waffo.com/payment-method/PMI_CC008.png"
  },
  JCB: {
    alt: "JCB",
    src: "https://cdn.waffo.com/payment-method/PMI_CC068.png"
  },
  UNIONPAY: {
    alt: "UnionPay",
    src: "https://cdn.waffo.com/payment-method/PMI_CC762.png"
  },
  AMEX: {
    alt: "American Express",
    src: "https://cdn.waffo.com/payment-method/PMI_CC015.png"
  },
  BANCONTACT: {
    alt: "Bancontact",
    src: "/images/essentials/one-time-payment/bancontact-logo.svg"
  },
  APPLE_PAY: {
    alt: "Apple Pay",
    src: "https://cdn-dev.waffo.com/payment-method/PMI_155.png"
  },
  GOOGLE_PAY: {
    alt: "Google Pay",
    src: "https://cdn-dev.waffo.com/payment-method/PMI_161.png"
  },
  WECHAT_PAY: {
    alt: "WeChat Pay",
    src: "https://cdn.waffo.com/payment-method/PMI_170.png"
  },
  ALIPAY: {
    alt: "Alipay",
    src: "https://cdn.waffo.com/payment-method/PMI_168.png"
  },
  DANA: {
    alt: "DANA",
    src: "https://cdn.waffo.com/payment-method/PMI_001.png"
  },
  PAYPAY: {
    alt: "PayPay",
    src: "https://cdn.waffo.com/payment-method/PMI_247.png"
  },
  ZALOPAY: {
    alt: "ZaloPay",
    src: "https://cdn.waffo.com/payment-method/PMI_084.png"
  },
  PIX: {
    alt: "PIX",
    src: "https://cdn.waffo.com/payment-method/PMI_040.png"
  },
  BANK_LOCAL_SEPA: {
    alt: "SEPA",
    src: "/images/essentials/one-time-payment/SEPA.png"
  },
  BANK_LOCAL_IDEAL: {
    alt: "iDEAL",
    src: "/images/essentials/one-time-payment/ideal.png"
  },
  BANK_LOCAL_BANCONTACT: {
    alt: "Bancontact",
    src: "/images/essentials/one-time-payment/Bancontact.png"
  },
  BANK_LOCAL_MORE: {
    alt: "More payment methods",
    src: "/images/essentials/one-time-payment/Payment%20logo.png"
  },
  LOCAL_PAYMENT: {
    alt: "Local Payment",
    src: "/images/essentials/one-time-payment/bank-transfer-2.svg"
  }
};

export const PaymentMethodCards = ({groups = [], lastFull = false}) => {
  return <div className={`grid grid-cols-1 gap-3 my-4 not-prose ${lastFull ? "sm:grid-cols-2" : "sm:grid-cols-3"}`}>
      {groups.map(({title, logos}, i) => <div key={title} className={`waffo-hover-card flex flex-col rounded-xl border border-slate-200 dark:border-neutral-700 overflow-hidden bg-gradient-to-t from-slate-50 to-white dark:from-neutral-900 dark:to-neutral-800${lastFull && i === groups.length - 1 ? " sm:col-span-2" : ""}`}>
          <div className="px-4 pt-4 pb-3">
            <p className="font-semibold text-slate-900 dark:text-slate-100 text-base leading-6 m-0">{title}</p>
          </div>
          <div className="px-4 pb-4">
            <div className="bg-white dark:bg-neutral-900 border border-slate-200 dark:border-neutral-700 rounded-xl p-4">
              <div className="flex flex-wrap gap-2">
                {logos.map(({src, alt, wide}, idx) => <span key={`${src}-${idx}`} className={`inline-flex items-center border border-slate-200 dark:border-neutral-300 rounded-sm bg-white dark:bg-white overflow-hidden p-1 ${wide ? "justify-start h-[36px] px-2" : "justify-center w-[42px] h-[28px]"}`}>
                    <img src={src} alt={alt} style={{
    width: "auto",
    height: wide ? "100%" : "100%",
    objectFit: "contain",
    maxWidth: wide ? "none" : "100%"
  }} />
                  </span>)}
              </div>
            </div>
          </div>
        </div>)}
    </div>;
};

export const IntegrationModeTable = ({language = "en"}) => {
  const [isDark, setIsDark] = useState(false);
  useEffect(() => {
    const check = () => setIsDark(document.documentElement.classList.contains("dark"));
    check();
    const observer = new MutationObserver(check);
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ["class"]
    });
    return () => observer.disconnect();
  }, []);
  const t = {
    bg: isDark ? "#18181b" : "#ffffff",
    bgAlt: isDark ? "#1f1f23" : "#f8fafc",
    border: isDark ? "#3f3f46" : "#e2e8f0",
    headerText: isDark ? "#f4f4f5" : "#0f172a",
    labelText: isDark ? "#e4e4e7" : "#0f172a",
    cellText: isDark ? "#a1a1aa" : "#475569",
    wrapBorder: isDark ? "#3f3f46" : "#e2e8f0",
    wrapBg: isDark ? "#18181b" : undefined
  };
  const badgeStyles = [{
    light: {
      border: "#e5e5e5",
      color: "#262626",
      bg: "#fafafa"
    },
    dark: {
      border: "#52525b",
      color: "#d4d4d8",
      bg: "#27272a"
    }
  }, {
    light: {
      border: "#bfdbfe",
      color: "#1e40af",
      bg: "#eff6ff"
    },
    dark: {
      border: "#1d4ed8",
      color: "#93c5fd",
      bg: "#1e3a5f"
    }
  }, {
    light: {
      border: "#fef08a",
      color: "#85490e",
      bg: "#fff9e9"
    },
    dark: {
      border: "#a16207",
      color: "#fde047",
      bg: "#3b2a00"
    }
  }];
  const copyByLanguage = {
    en: {
      colHeaders: ["Hosted Checkout", "Embedded Checkout", "API Integration"],
      rows: [{
        label: "Introduction",
        alt: true,
        cells: ["Merchants simply call the API to create a payment session. Users are redirected to a secure checkout page hosted by Waffo to select their payment method and confirm the transaction.", "Merchants integrate the Waffo SDK to embed the checkout component directly into their own website. Users select payment methods and complete the process without leaving the merchant's site.", "Merchants build their own checkout UI entirely and directly call Waffo APIs to process payments."]
      }, {
        label: "Key features",
        alt: false,
        cells: [["No need to build a checkout UI", "Adaptive to multiple devices", "No PCI-DSS certification required for merchants", "Page maintained and updated by Waffo"], ["No page redirection; payment completes on-site", "Maintains brand consistency", "No PCI-DSS certification required for merchants"], ["Full control over the payment flow", "Maximum flexibility for customization", "Requires merchant PCI-DSS certification", "Must handle sensitive card data"]]
      }, {
        label: "Integration cost",
        alt: true,
        badges: ["Low", "Medium", "High"]
      }, {
        label: "Brand customization",
        alt: false,
        cells: ["Supported (Logo, colors, styles, etc.)", "Supported (Logo, colors, styles, etc.)", "Fully custom development"]
      }, {
        label: "Detailed info",
        alt: true,
        links: [{
          text: "Hosted Checkout overview",
          href: "/en/essentials/checkout#hosted-checkout"
        }, {
          text: "Embedded Checkout overview",
          href: "/en/essentials/checkout#embedded-checkout"
        }, {
          text: "-",
          href: null
        }]
      }, {
        label: "Demo",
        alt: false,
        links: [{
          text: "Hosted Checkout demo",
          href: "/en/essentials/checkout#payment-flow-experience"
        }, {
          text: "Embedded Checkout demo",
          href: "/en/essentials/checkout#payment-flow-experience"
        }, {
          text: "-",
          href: null
        }]
      }, {
        label: "Documentation",
        alt: true,
        links: [{
          text: "Hosted Checkout integration guide",
          href: "/en/developer-docs/integration/checkout/steps"
        }, {
          text: "Embedded Checkout integration guide",
          href: "/en/developer-docs/integration/elements/usage"
        }, {
          text: "API integration guide",
          href: "/en/developer-docs/integration/api/overview"
        }]
      }]
    },
    zh: {
      colHeaders: ["收银台模式", "内嵌式模式", "纯API模式"],
      rows: [{
        label: "简介",
        alt: true,
        cells: ["商户侧只需调用API创建支付会话，用户点击后跳转进入 Waffo 托管的收银台页面进行支付方式的选择及支付确认。", "商户侧通过集成 Waffo SDK，将收银台组件直接嵌入商户页面中。用户可在商户页面内完成支付方式选择，进入支付流程。", "商户自行构建收银台页面，直接调用 Waffo API 进行支付。"]
      }, {
        label: "特点",
        alt: false,
        cells: [["无需构造收银台页面", "支持多设备适配", "商户无需PCI-DSS 认证资质", "页面由 Waffo 维护和更新"], ["用户无需页面跳转，站内完成支付", "保持品牌一致性", "商户无需PCI-DSS 认证资质"], ["商户完全自主控制支付流程", "可自行定制，有更高灵活性", "商户具备PCI-DSS 认证资质", "需处理敏感卡信息"]]
      }, {
        label: "集成成本",
        alt: true,
        badges: ["低", "中等", "高"]
      }, {
        label: "品牌客制化",
        alt: false,
        cells: ["支持（Logo、颜色、样式等）", "支持（Logo、颜色、样式等）", "完全自主开发"]
      }, {
        label: "详细介绍",
        alt: true,
        links: [{
          text: "收银台模式介绍",
          href: "/zh/essentials/checkout#%E6%89%98%E7%AE%A1%E7%BB%93%E8%B4%A6"
        }, {
          text: "内嵌式模式介绍",
          href: "/zh/essentials/checkout#%E5%B5%8C%E5%85%A5%E5%BC%8F%E7%BB%93%E8%B4%A6"
        }, {
          text: "-",
          href: null
        }]
      }, {
        label: "Demo示例",
        alt: false,
        links: [{
          text: "收银台模式Demo",
          href: "/zh/essentials/checkout#%E6%94%AF%E4%BB%98%E6%B5%81%E7%A8%8B%E4%BD%93%E9%AA%8C"
        }, {
          text: "内嵌式模式Demo",
          href: "/zh/essentials/checkout#%E6%94%AF%E4%BB%98%E6%B5%81%E7%A8%8B%E4%BD%93%E9%AA%8C"
        }, {
          text: "-",
          href: null
        }]
      }, {
        label: "集成文档",
        alt: true,
        links: [{
          text: "收银台模式集成",
          href: "/zh/developer-docs/integration/checkout/steps"
        }, {
          text: "内嵌式模式集成",
          href: "/zh/developer-docs/integration/elements/usage"
        }, {
          text: "纯API模式集成",
          href: "/zh/developer-docs/integration/api/overview"
        }]
      }]
    },
    ja: {
      colHeaders: ["ホスト型チェックアウト", "埋め込み型チェックアウト", "API連携"],
      rows: [{
        label: "概要",
        alt: true,
        cells: ["加盟店はAPIを呼び出して決済セッションを作成するだけです。ユーザーはWaffoがホストする安全なチェックアウトページにリダイレクトされ、決済手段を選択して決済を確認します。", "加盟店はWaffo SDKを連携し、チェックアウトコンポーネントを自社サイトに直接埋め込みます。ユーザーは加盟店サイト内で決済手段を選択し、決済フローを完了できます。", "加盟店が独自のチェックアウト画面を構築し、Waffo APIを直接呼び出して決済を処理します。"]
      }, {
        label: "特徴",
        alt: false,
        cells: [["チェックアウトUIの構築が不要", "複数デバイスに対応", "加盟店側のPCI-DSS認証は不要", "ページはWaffoが保守・更新"], ["ページ遷移なしでサイト内決済が完了", "ブランドの一貫性を維持", "加盟店側のPCI-DSS認証は不要"], ["決済フローを完全に制御可能", "高い柔軟性でカスタマイズ可能", "加盟店側でPCI-DSS認証が必要", "機密性の高いカード情報の取り扱いが必要"]]
      }, {
        label: "連携コスト",
        alt: true,
        badges: ["低", "中", "高"]
      }, {
        label: "ブランドカスタマイズ",
        alt: false,
        cells: ["対応（ロゴ、色、スタイルなど）", "対応（ロゴ、色、スタイルなど）", "完全な自社開発"]
      }, {
        label: "詳細情報",
        alt: true,
        links: [{
          text: "ホスト型チェックアウト概要",
          href: "/ja/essentials/checkout#%E3%83%9B%E3%82%B9%E3%83%88%E5%9E%8BCheckout"
        }, {
          text: "埋め込み型チェックアウト概要",
          href: "/ja/essentials/checkout#%E5%9F%8B%E3%82%81%E8%BE%BC%E3%81%BF%E5%9E%8BCheckout"
        }, {
          text: "-",
          href: null
        }]
      }, {
        label: "Demo",
        alt: false,
        links: [{
          text: "ホスト型チェックアウトDemo",
          href: "/ja/essentials/checkout#%E6%B1%BA%E6%B8%88%E3%83%95%E3%83%AD%E3%83%BC%E3%81%AE%E4%BD%93%E9%A8%93"
        }, {
          text: "埋め込み型チェックアウトDemo",
          href: "/ja/essentials/checkout#%E6%B1%BA%E6%B8%88%E3%83%95%E3%83%AD%E3%83%BC%E3%81%AE%E4%BD%93%E9%A8%93"
        }, {
          text: "-",
          href: null
        }]
      }, {
        label: "ドキュメント",
        alt: true,
        links: [{
          text: "ホスト型チェックアウト連携ガイド",
          href: "/ja/developer-docs/integration/checkout/steps"
        }, {
          text: "埋め込み型チェックアウト連携ガイド",
          href: "/ja/developer-docs/integration/elements/usage"
        }, {
          text: "API連携ガイド",
          href: "/ja/developer-docs/integration/api/overview"
        }]
      }]
    }
  };
  const copy = copyByLanguage[language] || copyByLanguage.en;
  const rows = copy.rows.map(row => ({
    ...row,
    badges: row.badges && row.badges.map((text, index) => ({
      text,
      ...badgeStyles[index]
    }))
  }));
  const colHeaders = copy.colHeaders;
  const linkColor = isDark ? "#60a5fa" : "#2563eb";
  const linkHoverColor = isDark ? "#93c5fd" : "#1d4ed8";
  const mutedColor = isDark ? "#71717a" : "#94a3b8";
  const cell = (rowBg, borderBottom, extra = {}) => ({
    padding: "16px",
    background: rowBg,
    borderBottom,
    ...extra
  });
  return <div className="not-prose" style={{
    width: "100%",
    overflowX: "auto",
    margin: "24px 0",
    background: t.wrapBg
  }}>
      {}
      <div style={{
    display: "grid",
    gridTemplateColumns: "180px 1fr 1fr 1fr",
    minWidth: "1240px",
    fontSize: "14px",
    textAlign: "left"
  }}>
        {}
        <div style={{
    padding: "16px",
    borderBottom: `1px solid ${t.border}`,
    background: t.bg
  }} />
        {colHeaders.map(h => <div key={h} style={{
    padding: "16px",
    borderBottom: `1px solid ${t.border}`,
    background: t.bg,
    fontWeight: 600,
    fontSize: "15px",
    color: t.headerText,
    whiteSpace: "pre-line"
  }}>
            {h}
          </div>)}

        {}
        {rows.map((row, rowIndex) => {
    const rowBg = row.alt ? t.bgAlt : t.bg;
    const isLast = rowIndex === rows.length - 1;
    const borderBottom = isLast ? undefined : `1px solid ${t.border}`;
    return <div key={row.label} style={{
      display: "contents"
    }}>
              {}
              <div style={cell(rowBg, borderBottom, {
      fontWeight: 500,
      color: t.labelText
    })}>
                {row.label}
              </div>

              {}
              {row.cells && row.cells.map((c, i) => <div key={i} style={cell(rowBg, borderBottom, {
      color: t.cellText,
      lineHeight: "1.6"
    })}>
                  {Array.isArray(c) ? <ul style={{
      margin: 0,
      padding: 0,
      listStyle: "none",
      display: "flex",
      flexDirection: "column",
      gap: "8px"
    }}>
                      {c.map(item => <li key={item}>{item}</li>)}
                    </ul> : c}
                </div>)}

              {}
              {row.badges && row.badges.map((b, i) => {
      const bs = isDark ? b.dark : b.light;
      return <div key={i} style={cell(rowBg, borderBottom)}>
                    <span style={{
        display: "inline-block",
        border: `1px solid ${bs.border}`,
        borderRadius: "4px",
        padding: "2px 10px",
        fontSize: "13px",
        fontWeight: 500,
        color: bs.color,
        background: bs.bg
      }}>
                      {b.text}
                    </span>
                  </div>;
    })}

              {}
              {row.links && row.links.map((l, i) => <div key={i} style={cell(rowBg, borderBottom)}>
                  {l.href ? <a href={l.href} style={{
      color: linkColor,
      textDecoration: "underline",
      textUnderlineOffset: "2px",
      textDecorationThickness: "1px",
      fontWeight: 500,
      whiteSpace: "nowrap"
    }} onMouseEnter={e => e.target.style.color = linkHoverColor} onMouseLeave={e => e.target.style.color = linkColor}>
                      {l.text}
                    </a> : <span style={{
      color: mutedColor
    }}>{l.text}</span>}
                </div>)}
            </div>;
  })}
      </div>
    </div>;
};

## Overview

Providing clear and stable payment capabilities for individual transactions. Through a unified API interface, we support a wide range of global payment methods, helping merchants complete every transaction efficiently.

<div className="flex gap-4 mt-2 mb-2">
  <a href="/api-reference/introduction" className="inline-flex items-center gap-2 px-6 py-2 rounded-lg text-white text-base font-medium no-underline bg-primary hover:opacity-90">
    Start Integration →
  </a>

  <a href="mailto:support@waffo.com" className="inline-flex items-center px-4 py-2 rounded-lg border border-slate-200 bg-white text-slate-600 text-base font-medium no-underline hover:bg-slate-50 dark:border-neutral-700 dark:bg-neutral-800 dark:text-slate-300 dark:hover:bg-neutral-700">
    Contact Sales
  </a>
</div>

***

## What is One-time Payment?

One-time Payment refers to a payment model where a fee is charged for a single, standalone transaction. In this model, every payment is independent, involving no recurring charges or automatic renewals. Due to its clear structure and direct process, it is the most fundamental and common form of payment, applicable to a wide range of business scenarios.

## Core capabilities

<CardGroup cols={2}>
  <Card title="Unified Integration" icon="plug">
    One set of interfaces integrates multiple payment methods including credit cards and e-wallets, reducing system complexity.
  </Card>

  <Card title="Clear Feedback" icon="bell">
    End-to-end visibility of payment status with real-time feedback at critical nodes, facilitating merchant tracking and handling.
  </Card>

  <Card title="Centralized Management" icon="gauge">
    A unified transaction management Dashboard that supports reconciliation, queries, and report exporting.
  </Card>

  <Card title="Flexible Checkout Integration" icon="gear">
    With unified API access, merchants can freely choose between a Hosted Page or Embedded Components, flexibly adapting to various business scenarios.
  </Card>
</CardGroup>

***

## Supported payment methods

With Waffo, integrate once to support multiple mainstream payment methods—no need to develop separately for each one.

<PaymentMethodCards
  lastFull
  groups={[
{
title: "Credit Cards",
logos: [PM.JCB, PM.VISA, PM.MASTERCARD, PM.UNIONPAY, PM.AMEX],
},
{
title: "E-wallets",
logos: [PM.WECHAT_PAY, PM.ALIPAY, PM.APPLE_PAY, PM.GOOGLE_PAY],
},
{
title: "Bank Transfers & Local Payment Methods",
logos: [PM.BANK_LOCAL_SEPA, PM.BANK_LOCAL_IDEAL, PM.BANK_LOCAL_BANCONTACT, PM.BANK_LOCAL_MORE],
},
]}
/>

[View full list of supported payment methods →](/en/essentials/payment-methods)

***

## Integration mode

Waffo offers three flexible integration modes to meet diverse business scenarios and technical requirements. The differences between these modes are as follows:

<IntegrationModeTable language="en" />

***

## Security & compliance

Waffo follows the strictest global financial data security standards to ensure the safety of every transaction.

<Note>
  Waffo protects payment data with tokenization, encrypted transmission, and strict access controls designed for PCI DSS-aligned payment flows.
</Note>

[Contact support for security and compliance details →](mailto:support@waffo.com)

***

## Frequently asked questions

<AccordionGroup>
  <Accordion title="Does One-time Payment support refunds?" defaultOpen>
    Yes (subject to the specific payment method's capabilities). Most mainstream payment methods support refunds. However, whether full or partial refunds are supported strictly depends on the rules and capabilities of the underlying payment method.
  </Accordion>

  <Accordion title="How do I query transaction records?">
    All transaction data is synced in real-time to the Waffo Dashboard. It supports filtering by time, amount, and status, as well as exporting reports in CSV format.
  </Accordion>

  <Accordion title="How should payment failures be handled?">
    Waffo returns specific failure reason codes (e.g., "Insufficient Funds," "Declined by Issuer"). We recommend that merchants prompt users on the front end to switch payment methods and retry.
  </Accordion>
</AccordionGroup>

***

Need help? [Contact support](mailto:support@waffo.com)