# Introduction (/en)

Payments for Egypt businesses. Take cards and local methods via API, hosted checkout, or your own UI.

XPay is a payment platform for online businesses across Egypt. We take card payments and local methods, handle the 3D Secure challenge, and pay out to your bank account when the money settles. There are four ways to integrate, and you pick based on how much code you want to write.

## What is XPay? [#what-is-xpay]

<Cards>
  <Card icon="<Globe />" title="Built for Egypt">
    Take Visa and Mastercard alongside local methods like Valu and Fawry.
  </Card>

  <Card icon="<CodeXml />" title="A modern API">
    Stripe-shaped resources, real SDKs, and a hosted checkout page that looks like a polished
    consumer product. If you've integrated Stripe before, you'll feel at home in an afternoon.
  </Card>

  <Card icon="<Layers />" title="Payment to payout">
    Take a payment, manage the customer, issue refunds, and pay yourself out. All in one dashboard
    and one API, from sale to bank.
  </Card>

  <Card icon="<Palette />" title="Branded checkout out of the box">
    Hosted forms in English or Arabic, mobile-first, themed with your logo and colors. No design
    work required to launch.
  </Card>
</Cards>

## What XPay handles for you [#what-xpay-handles-for-you]

<Cards>
  <Card icon="<CreditCard />" title="Cards & local methods">
    Visa, Mastercard, Valu, Fawry, and more. One API for every method on offer.
  </Card>

  <Card icon="<ShieldCheck />" title="3D Secure 2">
    The 3DS challenge runs inside the hosted checkout. We deal with the bank redirect, the iframe,
    and the result.
  </Card>

  <Card icon="<Webhook />" title="Webhooks">
    Subscribe once. We notify you the moment a payment succeeds, fails, or refunds. Signed payloads,
    automatic retries, replayable from the dashboard.
  </Card>

  <Card icon="<Undo2 />" title="Refunds">
    Issue full or partial refunds from the dashboard or the API. The customer gets their money back
    through the original payment method.
  </Card>

  <Card icon="<FlaskConical />" title="Test mode">
    A fully separate environment with its own keys, customers, and transactions. Use the test card
    list to simulate any outcome you need.
  </Card>

  <Card icon="<Banknote />" title="Payouts">
    Settled funds land in your bank account on the schedule you configure. Every cent is tracked
    through the balance ledger.
  </Card>
</Cards>

## Quick start [#quick-start]

Five minutes from a fresh signup to a successful test payment, no code involved. You'll create a product, generate a Payment Link, pay yourself with a test card, and watch the transaction land in your dashboard.

<Card icon="<Rocket />" title="Open the Quickstart" href="/get-started/quickstart">
  The fastest path through XPay end to end. Five steps, all from the dashboard.
</Card>

## Pick your integration path [#pick-your-integration-path]

There are four ways to take a payment with XPay. They share the same underlying Checkout Session, so the API call and the webhook you receive are identical across all four. The only thing that changes is how much frontend code you write.

If you're not sure which to pick, start with Payment Links. You can move to a richer integration later without rewriting your backend.

<Cards>
  <Card icon="<LinkIcon />" title="Payment Links" href="/integrate/integration-patterns/payment-links">
    Share a URL. No code at all. Best for invoices, social media checkouts, and proving the
    integration works before you write a line of it.
  </Card>

  <Card icon="<ExternalLink />" title="Hosted Checkout" href="/integrate/integration-patterns/hosted-checkout">
    Your server creates a Checkout Session and redirects the customer to XPay's hosted page. The
    simplest path that involves any code.
  </Card>

  <Card icon="<AppWindow />" title="Drop-in" href="/integrate/integration-patterns/drop-in">
    The hosted checkout opens as a modal on top of your site, or embeds inline as an iframe. The
    customer never leaves your domain.
  </Card>

  <Card icon="<Component />" title="Elements" href="/integrate/integration-patterns/elements">
    Build a fully custom checkout UI using XPay's `PaymentElement` component. Most control, most
    code.
  </Card>
</Cards>

## Built for builders [#built-for-builders]

When you outgrow the basics, every layer is exposed.

<Cards>
  <Card icon="<SearchCheck />" title="Inspector" href="/integrate/workbench/inspector">
    Paste any XPay ID and see the full graph of related resources, the events that fired against it,
    and the request logs that touched it.
  </Card>

  <Card icon="<RefreshCw />" title="Webhook replay" href="/integrate/webhooks/replaying-and-retries">
    Click **Resend** on any past delivery. Your handler gets a fresh, signed event without you
    having to re-trigger the original payment.
  </Card>

  <Card icon="<Terminal />" title="Per-request logs" href="/integrate/workbench/logs-panel">
    Every API call your account made: method, path, status, headers, body, response. Filter by error
    code, drill in by request ID.
  </Card>

  <Card icon="<TriangleAlert />" title="Structured errors" href="/integrate/errors/introduction">
    Stable error codes paired with deep-link doc URLs. The dashboard tooltip and your own error logs
    both link straight to the explanation.
  </Card>

  <Card icon="<HeartPulse />" title="Health monitoring" href="/integrate/workbench/health-panel">
    Recent failures grouped by root cause, sorted by frequency. Spot a deploy regression in seconds.
  </Card>

  <Card icon="<Atom />" title="SDKs and framework support" href="/sdk">
    `@xpayeg/sdk` for vanilla, `@xpayeg/react` for React. Lightweight, typed, framework-agnostic.
  </Card>
</Cards>

## Where to next [#where-to-next]

<Cards>
  <Card icon="<Rocket />" title="Quickstart" href="/get-started/quickstart">
    Take your first test payment in five minutes, no code required.
  </Card>

  <Card icon="<GitBranch />" title="Choose your integration" href="/get-started/choose-your-integration">
    A side-by-side comparison of the four patterns with a decision tree at the top. Pick once and
    don't look back.
  </Card>

  <Card icon="<Network />" title="Object model" href="/integrate/object-model">
    The mental map: how Checkout Session, Payment Intent, Charge, Refund, and Customer fit together,
    and which IDs to keep on your order record.
  </Card>

  <Card icon="<CodeXml />" title="API Reference" href="/api-reference">
    Every endpoint, every field, every status code. Generated from the live OpenAPI spec, never out
    of date.
  </Card>
</Cards>