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

# Waffo Product Overview

> Building global payment infrastructure. A full-stack solution from acquiring to growth.

export const ProductOverviewCards = ({items = [], columns = 2}) => {
  const layoutColumns = items.length === 3 ? 3 : items.length === 2 ? 2 : columns;
  return <div className="product-overview-cards not-prose my-4 grid gap-4" data-columns={layoutColumns}>
      <style>{`
        .product-overview-cards {
          grid-template-columns: minmax(0, 1fr) !important;
        }
        .product-overview-cards .product-overview-card {
          padding: 24px !important;
          box-sizing: border-box;
        }
        @media (min-width: 768px) {
          .product-overview-cards[data-columns="2"],
          .product-overview-cards[data-columns="3"] {
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
          }
          .product-overview-cards[data-columns="3"] .product-overview-card:nth-of-type(3) {
            grid-column: 1 / -1 !important;
          }
        }
      `}</style>
      {items.map(item => <div key={item.title} className="product-overview-card 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">
          <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">
                {item.icon === "cart-shopping" && <>
                    <circle cx="8" cy="21" r="1" />
                    <circle cx="19" cy="21" r="1" />
                    <path d="M2 3h3l3 12h10l3-8H6" />
                  </>}
                {item.icon === "rotate" && <>
                    <path d="M21 12a9 9 0 1 1-3-6.7" />
                    <path d="M21 4v6h-6" />
                  </>}
                {item.icon === "credit-card" && <>
                    <rect x="3" y="5" width="18" height="14" rx="2" />
                    <path d="M3 10h18" />
                    <path d="M7 15h4" />
                  </>}
                {item.icon === "desktop" && <>
                    <rect x="3" y="4" width="18" height="12" rx="2" />
                    <path d="M8 20h8" />
                    <path d="M12 16v4" />
                  </>}
                {item.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" />
                  </>}
                {item.icon === "location-dot" && <>
                    <path d="M12 21s7-5.2 7-11a7 7 0 0 0-14 0c0 5.8 7 11 7 11Z" />
                    <circle cx="12" cy="10" r="2.5" />
                  </>}
                {item.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" />
                  </>}
                {item.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" />
                  </>}
                {item.icon === "calendar-days" && <>
                    <rect x="3" y="4" width="18" height="17" rx="2" />
                    <path d="M16 2v4" />
                    <path d="M8 2v4" />
                    <path d="M3 10h18" />
                    <path d="M8 14h.01M12 14h.01M16 14h.01M8 18h.01M12 18h.01" />
                  </>}
                {item.icon === "calculator" && <>
                    <rect x="5" y="2" width="14" height="20" rx="2" />
                    <path d="M8 6h8" />
                    <path d="M8 10h.01M12 10h.01M16 10h.01M8 14h.01M12 14h.01M16 14h.01M8 18h.01M12 18h.01M16 18h.01" />
                  </>}
                {item.icon === "building" && <>
                    <rect x="4" y="3" width="16" height="18" rx="2" />
                    <path d="M8 7h.01M12 7h.01M16 7h.01M8 11h.01M12 11h.01M16 11h.01M8 15h.01M12 15h.01M16 15h.01" />
                  </>}
                {item.icon === "chart-line" && <>
                    <path d="M3 3v18h18" />
                    <path d="m6 16 4-5 4 3 5-8" />
                  </>}
                {item.icon === "brain" && <>
                    <path d="M9 3a3 3 0 0 0-3 3v1a3 3 0 0 0-2 5.2A4 4 0 0 0 8 19h1" />
                    <path d="M15 3a3 3 0 0 1 3 3v1a3 3 0 0 1 2 5.2A4 4 0 0 1 16 19h-1" />
                    <path d="M12 3v18" />
                  </>}
                {item.icon === "chart-pie" && <>
                    <path d="M21 12a9 9 0 1 1-9-9v9Z" />
                    <path d="M12 3a9 9 0 0 1 9 9h-9Z" />
                  </>}
                {item.icon === "shield-halved" && <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z" />}
                {item.icon === "user-gear" && <>
                    <circle cx="9" cy="8" r="4" />
                    <path d="M3 21a6 6 0 0 1 10.5-4" />
                    <path d="M19 15v2M19 21v1M16.6 16.4l1.4 1.4M20 20l1.4 1.4M16 19h2M20 19h2" />
                  </>}
                {item.icon === "lock" && <>
                    <rect x="5" y="11" width="14" height="10" rx="2" />
                    <path d="M8 11V7a4 4 0 0 1 8 0v4" />
                  </>}
                {item.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" />
                  </>}
                {item.icon === "hand-pointer" && <>
                    <path d="M8 13V5a2 2 0 0 1 4 0v6" />
                    <path d="M12 11V9a2 2 0 0 1 4 0v4" />
                    <path d="M16 13v-1a2 2 0 0 1 4 0v3c0 4-2 7-7 7h-1a6 6 0 0 1-5.3-3.2L4 14a2 2 0 1 1 3.5-2l1.5 2" />
                  </>}
                {item.icon === "snowflake" && <>
                    <path d="M12 2v20M4.9 4.9l14.2 14.2M2 12h20M4.9 19.1 19.1 4.9" />
                    <path d="m8 4 4 4 4-4M8 20l4-4 4 4" />
                  </>}
                {item.icon === "sliders" && <>
                    <path d="M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3" />
                    <path d="M2 14h4M10 8h4M18 16h4" />
                  </>}
                {item.icon === "ban" && <>
                    <circle cx="12" cy="12" r="10" />
                    <path d="m4.9 4.9 14.2 14.2" />
                  </>}
                {(!item.icon || item.icon === "bolt") && <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">
                {item.title}
              </h4>
              <p className="m-0 text-sm leading-6 text-slate-600 dark:text-slate-300">
                {item.description}
              </p>
              {item.logos && <div className="mt-1 flex flex-wrap gap-2">
                  {item.logos.map(({src, alt}) => <span key={alt} className="inline-flex h-7 w-[42px] items-center justify-center rounded border border-slate-200 bg-white p-1 dark:border-neutral-300">
                      <img src={src} alt={alt} className="m-0 h-full w-full object-contain" />
                    </span>)}
                </div>}
            </div>
          </div>
        </div>)}
    </div>;
};

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"
  }
};

## Acquiring & Payments

Connect to global payment networks with flexible collection methods tailored to diverse business models.

### One-time Payment

Standard immediate transaction model (Sale), supporting major global credit cards and local payment methods.

<ProductOverviewCards
  columns={2}
  items={[
{
title: "Feature",
icon: "bolt",
description: "Instant approval and real-time payment feedback.",
},
{
title: "Value",
icon: "cart-shopping",
description: "Ideal for e-commerce retail and digital games where goods are exchanged for payment instantly, ensuring rapid cash flow recovery.",
},
]}
/>

[Explore One-time Payment Solutions →](/en/essentials/one-time-payment)

***

### Subscription & Recurring Payment

A recurring billing engine built for SaaS and membership businesses.

<ProductOverviewCards
  columns={2}
  items={[
{
title: "Smart Retry",
icon: "rotate",
description: "Leverages big data to retry transactions at optimal times, recovering failures caused by insufficient funds.",
},
{
title: "Involuntary Churn Management",
icon: "credit-card",
description: "Effectively reduces churn caused by card issues rather than user intent.",
},
]}
/>

<Tip>
  **Use Cases:** Software subscriptions, membership renewals, recurring orders.
</Tip>

[Explore Subscription Solutions →](/en/essentials/subscription-recurring)

***

### Hosted Checkout

Out-of-the-box hosted payment pages requiring no frontend coding to launch.

<ProductOverviewCards
  columns={3}
  items={[
{
title: "Multi-Device Adaptation",
icon: "desktop",
description: "Automatically adapts to PC, Mobile, and Tablet screens.",
},
{
title: "Brand Customization",
icon: "palette",
description: "Supports logo upload and custom color schemes to maintain brand consistency.",
},
{
title: "Dynamic Routing",
icon: "location-dot",
description: "Automatically displays the most popular local payment methods based on user location.",
},
]}
/>

[View Checkout →](/en/essentials/checkout)

***

### Payment Methods

One-stop access to global mainstream payment channels.

<ProductOverviewCards
  columns={1}
  items={[
{
title: "Coverage",
icon: "globe",
description: "International Card Schemes (Visa, Mastercard, Amex) and 100+ Local Wallets (Apple Pay, Google Pay, Alipay, etc.).",
logos: [PM.VISA, PM.MASTERCARD, PM.AMEX, PM.APPLE_PAY, PM.GOOGLE_PAY, PM.ALIPAY, PM.WECHAT_PAY],
},
]}
/>

[Explore Payment Methods →](/en/essentials/payment-methods)

***

## Settlement & Fund Management

A transparent, compliant global fund and tax management system, eliminating cross-border operational worries.

### Merchant Settlement

A flexible global fund distribution network.

<ProductOverviewCards
  columns={2}
  items={[
{
title: "Multi-Currency Aggregation",
icon: "coins",
description: "Supports settlement in original currencies or automated FX settlement to minimize exchange losses.",
},
{
title: "Flexible Cycles",
icon: "calendar-days",
description: "Options ranging from T+1 Express Settlement to monthly terms.",
},
]}
/>

[Explore Merchant Settlement →](/en/essentials/merchant-settlement)

***

### Global Tax (MoR)

Automated tax handling service based on the Merchant of Record (MoR) model.

<ProductOverviewCards
  columns={2}
  items={[
{
title: "Automated Calculation & Filing",
icon: "calculator",
description: "Real-time calculation of VAT/GST for 100+ countries, with Waffo handling filing and remittance to tax authorities.",
},
{
title: "Smart B2B/B2C Logic",
icon: "building",
description: "Supports Reverse Charge mechanisms to automatically exempt tax for compliant businesses.",
},
]}
/>

<Tip>
  **Value:** Operate compliantly without registering local entities overseas, completely avoiding tax risks.
</Tip>

[Explore Global Tax Compliance →](/en/essentials/tax)

***

## Value-Added Services

Beyond payments—empowering business growth through data insights and risk management.

### Data Analysis

A panoramic payment health monitoring and diagnostic center.

<ProductOverviewCards
  columns={3}
  items={[
{
title: "Panoramic Dashboard",
icon: "chart-line",
description: "Real-time monitoring of Auth Rates, TPV, and Omnichannel Conversion Funnels.",
},
{
title: "Smart Attribution",
icon: "brain",
description: "Translates obscure bank decline codes into actionable strategies (distinguishing Technical Glitches vs. Risk Blocks vs. User Drop-off).",
},
{
title: "Churn Analysis",
icon: "chart-pie",
description: "Quantifies recovered revenue and pinpoints the root causes of subscription churn.",
},
]}
/>

[Explore Data Intelligence →](/en/essentials/data-intelligence)

***

### Merchant Portal & Dispute Management

An integrated visual dashboard that serves as both an operation center and a risk defense stronghold.

<ProductOverviewCards
  columns={2}
  items={[
{
title: "Dispute Defense Loop",
icon: "shield-halved",
description: "Integrates Visa RDR/Ethoca Alerts to resolve disputes before they become cases; provides structured evidence uploads and Automated Representment tools.",
},
{
title: "Permission Management",
icon: "user-gear",
description: "Supports role-based collaboration (Finance, Ops, Devs).",
},
]}
/>

[Explore Dispute Defense →](/en/essentials/dispute-chargeback)

***

## Advanced Features

Deep customization capabilities for complex business scenarios, optimizing experience and risk control through technology.

### Tokenization

Financial-grade data security hosting and lifecycle management technology.

<ProductOverviewCards
  columns={3}
  items={[
{
title: "PCI-DSS Level 1 Compliance",
icon: "lock",
description: "Replaces sensitive card numbers with Tokens, drastically reducing compliance scope.",
},
{
title: "Account Updater",
icon: "arrows-rotate",
description: "Automatically updates expired or replaced card mappings to ensure Zero Interruption for recurring billing.",
},
{
title: "One-Click Payment",
icon: "hand-pointer",
description: "Tokens are shared across channels, providing an ultra-smooth repeat payment experience.",
},
]}
/>

[Explore Tokenization Technology →](/en/essentials/tokenization)

***

### Auth & Capture

A flexible transaction model separating "Freeze" and "Charge" steps.

<ProductOverviewCards
  columns={3}
  items={[
{
title: "Authorization",
icon: "snowflake",
description: "Freezes credit limits before service begins to guarantee fund security.",
},
{
title: "Partial Capture",
icon: "sliders",
description: 'Supports "Charge Actuals," deducting based on actual usage (e.g., AI Tokens, shipment volume).',
},
{
title: "Void",
icon: "ban",
description: "Instantly releases limits upon cancellation with no banking fees.",
},
]}
/>

<Tip>
  **Use Cases:** AI Usage-Based Billing, E-commerce Shipment Model, Hotel/Rental Deposits.
</Tip>

[Explore Auth & Capture Mechanism →](/en/essentials/auth-capture)

***

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