# Introduction (/en/sdk)

Reference for the XPay client SDKs. The integrate guides cover how to use them; this tab lists every public symbol.

XPay ships two official client libraries today: a JavaScript loader for the browser and a thin React wrapper that builds on top of it. This tab is a **reference** for what each package exports, the function signatures, and the option types. For walkthroughs of how to integrate each pattern (Drop-in, Elements, Hosted Checkout, Payment Links), see [Integration patterns](/integrate/integration-patterns/hosted-checkout) under the Integrate tab.

## Pick the right package [#pick-the-right-package]

<Cards>
  <Card icon="<Code />" title="JavaScript SDK" href="/sdk/sdk-js">
    `@xpayeg/sdk`. The browser SDK loader, factory, Elements, drop-in checkout, and types. Use this
    directly if you're not on React.
  </Card>

  <Card icon="<FileCode />" title="React SDK" href="/sdk/sdk-react">
    `@xpayeg/react`. `XPayProvider`, hooks (`useCheckout`, `useXPay`, `useElements`,
    `useConfirmPayment`), and the `PaymentElement` and `CheckoutButton` components. Wraps the JS SDK
    for React apps.
  </Card>

  <Card icon="<Smartphone />" title="Mobile" href="/sdk/mobile">
    iOS / Android / React Native SDKs are not yet shipped. Placeholder for when they land.
  </Card>
</Cards>

## What this tab is for [#what-this-tab-is-for]

The pages under this tab are reference pages. Every public export of each package gets one section, with its signature and a minimum example. They're optimized for lookup, not learning.

* For a guided walkthrough on **Drop-in checkout**: [Drop-in pattern](/integrate/integration-patterns/drop-in).
* For a guided walkthrough on **Elements**: [Elements pattern](/integrate/integration-patterns/elements).
* For the **Hosted Checkout** pattern (no SDK needed): [Hosted Checkout](/integrate/integration-patterns/hosted-checkout).
* For **Payment Links** (no code at all): [Payment Links](/integrate/integration-patterns/payment-links).

## Example apps [#example-apps]

Prefer reading working code? Both SDKs ship with a runnable example in the [xpay-examples](https://github.com/xpayeg/xpay-examples) repo. Clone, plug in your test keys, run.

<Cards>
  <Card icon="<SquareCode />" title="Vanilla HTML example" href="https://github.com/xpayeg/xpay-examples/tree/main/vanilla-html">
    Runnable plain-HTML pages for every pattern: CDN script tag + global `XPay()`, a tiny Express
    server, no build step.
  </Card>

  <Card icon="<Atom />" title="Next.js example store" href="https://github.com/xpayeg/xpay-examples/tree/main/nextjs-react">
    A working storefront covering hosted checkout, drop-in, inline, and Elements, plus a
    signature-verified webhook receiver.
  </Card>
</Cards>

- [@xpayeg/sdk](/en/sdk/sdk-js) — The browser JavaScript SDK. Reference for every public export, method signature, and option type.
- [@xpayeg/react](/en/sdk/sdk-react) — The React SDK. XPayProvider, hooks, and components built on top of @xpayeg/sdk.
- [Mobile](/en/sdk/mobile) — Native iOS, Android, and React Native SDKs are not yet shipped.