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

# usePayment

> Low-level hook for direct payment API calls without NFC.

`usePayment` provides direct access to payment creation and processing API calls. Use this when you need to manage the payment lifecycle outside of an NFC flow — for example, processing a payment from a QR code or deep link.

## Import

```ts theme={null}
import { usePayment } from '@taprails/tap-to-pay';
```

## Usage

```tsx theme={null}
const {
  createPaymentRequest,
  processPaymentRequest,
  isCreating,
  isProcessing,
  createdPayment,
  processedPayment,
  error,
  clearError,
  reset,
} = usePayment();
```

## Return Value

<ResponseField name="createPaymentRequest" type="(request: CreatePaymentRequest) => Promise<CreatePaymentResponse | null>">
  Calls `POST /api/v1/sdk/payments/create`. Returns the backend's payment response including `paymentId`, `merchantWallet`, and `expiresAt`.
</ResponseField>

<ResponseField name="processPaymentRequest" type="(request: ProcessPaymentRequest) => Promise<ProcessPaymentResponse | null>">
  Calls `POST /api/v1/sdk/payments/process`. Signals to the backend that a payment should be executed.
</ResponseField>

<ResponseField name="isCreating" type="boolean">
  `true` while `createPaymentRequest` is in-flight.
</ResponseField>

<ResponseField name="isProcessing" type="boolean">
  `true` while `processPaymentRequest` is in-flight.
</ResponseField>

<ResponseField name="createdPayment" type="CreatePaymentResponse | null">
  Response from the most recent `createPaymentRequest` call.
</ResponseField>

<ResponseField name="processedPayment" type="ProcessPaymentResponse | null">
  Response from the most recent `processPaymentRequest` call.
</ResponseField>

<ResponseField name="error" type="APIError | null">
  Error from the most recent API call.
</ResponseField>

<ResponseField name="clearError" type="() => void">
  Clears the `error` state.
</ResponseField>

<ResponseField name="reset" type="() => void">
  Clears all state — useful when starting a new payment cycle.
</ResponseField>

***

## CreatePaymentRequest

```ts theme={null}
interface CreatePaymentRequest {
  amount: string;    // USDC decimal string, e.g. "10.00"
  merchantId: string;
}
```

## CreatePaymentResponse

```ts theme={null}
interface CreatePaymentResponse {
  paymentId: string;
  merchantWallet: string;
  expiresAt: number;  // Unix timestamp (ms)
}
```

## ProcessPaymentRequest

```ts theme={null}
interface ProcessPaymentRequest {
  paymentId: string;
  txHash?: string;
  customerWallet?: string;
}
```

## ProcessPaymentResponse

```ts theme={null}
interface ProcessPaymentResponse {
  transactionId?: string;
  status: PaymentStatus;
  confirmedAt?: number;
}
```

***

## Example

```tsx theme={null}
import { usePayment } from '@taprails/tap-to-pay';

export function ManualPaymentScreen({ paymentId }: { paymentId: string }) {
  const { processPaymentRequest, isProcessing, processedPayment, error } = usePayment();

  const handleProcess = () => {
    processPaymentRequest({ paymentId });
  };

  if (processedPayment) return <Text>Done: {processedPayment.status}</Text>;

  return (
    <>
      {error && <Text style={{ color: 'red' }}>{error.message}</Text>}
      <Button
        title={isProcessing ? 'Processing…' : 'Process Payment'}
        onPress={handleProcess}
        disabled={isProcessing}
      />
    </>
  );
}
```