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

# Inline Checkout SDK

> Launch an escrow checkout widget from your web app with a publishable key.

[`payluk-escrow-inline-checkout`](https://www.npmjs.com/package/payluk-escrow-inline-checkout)
is a lightweight, TypeScript-first client SDK that opens a hosted escrow
checkout widget directly in your web app. It loads the widget script for you,
exposes a promise-based `pay()` function, and ships an optional React hook and
button.

<CardGroup cols={2}>
  <Card title="Zero script tags" icon="bolt">
    The widget script is injected automatically; no manual `<script>` to add.
  </Card>

  <Card title="TypeScript-first" icon="code">
    Full type definitions for every option, result and error.
  </Card>

  <Card title="Multi-escrow" icon="layer-group">
    Pay one or many escrow tokens in a single checkout session.
  </Card>

  <Card title="React-ready" icon="react">
    Optional `useEscrowCheckout()` hook and `<EscrowCheckoutButton>` component.
  </Card>
</CardGroup>

## How it fits with the REST API

The SDK doesn't replace the REST API; it pairs with it. Your **backend**
creates escrows and produces payment tokens; your **frontend** hands those
tokens to the SDK to collect payment.

<Steps>
  <Step title="Create an escrow (server)">
    Call [Create escrow](/api-reference/escrow/create-escrow) (or
    [Create milestone escrow](/api-reference/milestone-escrow/create-milestone-escrow))
    with your **secret key**. Keep the returned `paymentToken`.
  </Step>

  <Step title="Launch checkout (client)">
    Pass the `paymentToken` to the SDK's `pay()` with your **publishable key**.
    The widget collects payment and funds the escrow.
  </Step>

  <Step title="Settle (server)">
    Confirm delivery or resolve disputes through the REST API as usual.
  </Step>
</Steps>

## Installation

```bash theme={null}
npm i payluk-escrow-inline-checkout
```

Requires a browser environment. React is an optional peer dependency
(`react >= 17`) and is only needed if you use the React entry point.

## Keys & environments

The SDK authenticates with a **publishable key**, which is safe to ship in
client-side code. Your secret keys must stay on your backend.

<Warning>
  Never put a secret (`sk_…`) key in front-end code. The SDK only needs the
  publishable key; all sensitive operations (creating escrows, releasing funds)
  happen server-side with your secret key. See
  [Authentication](/authentication).
</Warning>

## Next steps

<CardGroup cols={2}>
  <Card title="JavaScript / TypeScript" icon="js" href="/sdk/javascript">
    Initialize once and call `pay()`.
  </Card>

  <Card title="React" icon="react" href="/sdk/react">
    Use the hook or the drop-in button.
  </Card>

  <Card title="Error handling" icon="triangle-exclamation" href="/sdk/errors">
    Handle `EscrowCheckoutError` codes.
  </Card>

  <Card title="SDK reference" icon="book" href="/sdk/reference">
    Every type, option and default.
  </Card>
</CardGroup>