Hosted checkout

Create the intent and redirect

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

app/checkout/route.ts

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.

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

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

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.

Get started

Accept payments

Concepts

After a payment

Integrate

Create the intent and redirect

Fulfil on the webhook

What the page handles

​Create the intent and redirect

​Fulfil on the webhook

​What the page handles

Create the intent and redirect

Fulfil on the webhook

What the page handles