Embedded checkout

@useroutr/checkout-react is the same checkout as the hosted page, as a React component. It opens as a modal or renders inline, shows your user what to send and follows the payment to completion. Your API key never touches the browser: the component needs only the intent’s funding token.

npm install @useroutr/sdk @useroutr/checkout-react

pnpm add @useroutr/sdk @useroutr/checkout-react

yarn add @useroutr/sdk @useroutr/checkout-react

Create the intent on your server

The amount is yours to decide, so decide it where your user cannot change it. Return only the funding token, the last segment of hosted_funding_url.

app/actions.ts

"use server";

import { Useroutr } from "@useroutr/sdk";

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

export async function startCheckout(orderId: string) {
  const intent = await useroutr.fundingIntents.create(
    { amount: "25", asset: "asset_usdc_stellar", reference: orderId },
    { idempotencyKey: orderId },
  );
  const url = intent.hosted_funding_url ?? "";
  return url.slice(url.lastIndexOf("/") + 1);
}

Render the checkout

app/pay-button.tsx

"use client";

import { UseroutrCheckout } from "@useroutr/checkout-react";
import { useState } from "react";
import { startCheckout } from "./actions";

export function PayButton({ orderId }: { orderId: string }) {
  const [token, setToken] = useState<string | null>(null);

  return (
    <>
      <button onClick={async () => setToken(await startCheckout(orderId))}>Pay</button>
      {token === null ? null : (
        <UseroutrCheckout
          token={token}
          baseUrl="https://api.sandbox.useroutr.com/v1/public"
          mode="modal"
          onSuccess={() => console.log("paid")}
          onClose={() => setToken(null)}
        />
      )}
    </>
  );
}

Use https://api.useroutr.com/v1/public in production.

Fulfil on the webhook

onSuccess is for your interface: close the modal, show a thank-you. Fulfil the order on your server when the funding.credited webhook arrives. It is signed, and it reaches you even if your user closes the page before the payment completes.

Props

string

required

The funding token from the intent’s hosted_funding_url. It grants exactly one intent.

string

default:"/api/public"

Where the checkout’s three public endpoints live: https://api.sandbox.useroutr.com/v1/public or https://api.useroutr.com/v1/public. They answer any origin, so you do not need to proxy them.

"modal" | "inline"

default:"modal"

Open over your page, or render in place.

"light" | "dark"

default:"light"

The colour scheme.

CheckoutAppearance

Override your saved branding for this checkout: brandColor, logoUrl, radius and fontFamily. See Branding.

(intent) => void

Called once, when the funding intent is credited, with the payer’s view of the intent.

(failure) => void

Called once, when the checkout cannot complete: the intent failed, expired or cannot be loaded.

() => void

Called when your user closes the modal.

The token is the credential

The endpoints the checkout calls take no API key, cookie or session. They are addressed by the funding token, which is unguessable and grants one intent. Treat it like a payment link: give it to the person paying and nobody else.

If you find yourself putting an API key in the browser, the funding intent is being created in the wrong place. Move it to your server.

Get started

Accept payments

Concepts

After a payment

Integrate

Embedded checkout

Props

The token is the credential

​Props

​The token is the credential

Props

The token is the credential