Skip to main content
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

import { usePayment } from '@taprails/tap-to-pay';

​
Usage

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

​
Return Value

​
createPaymentRequest
(request: CreatePaymentRequest) => Promise<CreatePaymentResponse | null>
Calls POST /api/v1/sdk/payments/create. Returns the backend’s payment response including paymentId, merchantWallet, and expiresAt.
​
processPaymentRequest
(request: ProcessPaymentRequest) => Promise<ProcessPaymentResponse | null>
Calls POST /api/v1/sdk/payments/process. Signals to the backend that a payment should be executed.
​
isCreating
boolean
true while createPaymentRequest is in-flight.
​
isProcessing
boolean
true while processPaymentRequest is in-flight.
​
createdPayment
CreatePaymentResponse | null
Response from the most recent createPaymentRequest call.
​
processedPayment
ProcessPaymentResponse | null
Response from the most recent processPaymentRequest call.
​
error
APIError | null
Error from the most recent API call.
​
clearError
() => void
Clears the error state.
​
reset
() => void
Clears all state — useful when starting a new payment cycle.

​
CreatePaymentRequest

interface CreatePaymentRequest {
  amount: string;    // USDC decimal string, e.g. "10.00"
  merchantId: string;
}

​
CreatePaymentResponse

interface CreatePaymentResponse {
  paymentId: string;
  merchantWallet: string;
  expiresAt: number;  // Unix timestamp (ms)
}

​
ProcessPaymentRequest

interface ProcessPaymentRequest {
  paymentId: string;
  txHash?: string;
  customerWallet?: string;
}

​
ProcessPaymentResponse

interface ProcessPaymentResponse {
  transactionId?: string;
  status: PaymentStatus;
  confirmedAt?: number;
}

​
Example

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}
      />
    </>
  );
}