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

# Hosted checkout

> Send your user to a payment page Useroutr hosts. No frontend code.

Every funding intent comes with `hosted_funding_url`, a payment page for that intent alone. It
shows your logo and colour, lets the user pick how to pay, shows exactly what to send and
follows the payment through to completion.

<Frame caption="The hosted checkout for a 25 XLM funding intent">
  <img src="https://mintcdn.com/thirtn/So4JhtTsHsf8CrxE/images/hosted-checkout.png?fit=max&auto=format&n=So4JhtTsHsf8CrxE&q=85&s=196383053655653a34051ad221024e69" alt="The hosted checkout, showing the amount due and the ways to pay" style={{ maxWidth: "360px", margin: "0 auto" }} width="872" height="898" data-path="images/hosted-checkout.png" />
</Frame>

## Create the intent and redirect

Create the funding intent on your server, then redirect your user to its page.

```ts app/checkout/route.ts theme={null}
import { Useroutr } from "@useroutr/sdk";
import { redirect } from "next/navigation";

const useroutr = new Useroutr({ apiKey: process.env.USEROUTR_API_KEY });

export async function POST(request: Request) {
  const { orderId } = await request.json();

  const intent = await useroutr.fundingIntents.create(
    { amount: "25", asset: "asset_usdc_stellar", reference: orderId },
    { idempotencyKey: orderId },
  );

  redirect(intent.hosted_funding_url!);
}
```

Use your own order id as the idempotency key. If the request is retried, you get the same
intent back instead of a second one.

## Fulfil on the webhook

The page tells your user when their payment is confirmed, but your server should fulfil the
order when it receives `funding.credited`. That event arrives only once the payment is settled
and your ledger is credited, and it arrives even if your user closes the tab.

```ts theme={null}
if (event.type === "funding.credited") {
  await fulfilOrder(event.data.object.reference);
}
```

See [Webhooks](/guides/webhooks) for verifying and handling events.

## What the page handles

* The ways your user can pay, with the amount due in the asset they pick.
* A deposit address and exact amount, with copy buttons and a QR code.
* Partial payments, which it keeps asking to complete.
* Expiry: once `expires_at` passes, the page stops taking payment.
* Your branding. Set your logo and colour once in the dashboard; see [Branding](/payments/branding).

<Tip>
  The link grants access to one funding intent and nothing else, so it is safe to email or put in
  a QR code. Give it only to the person paying.
</Tip>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.