Hooks

`usePayment`

Description

A hook that provides payment modal controls and real-time payment intent status. It handles the complete payment flow from modal interactions to transaction monitoring.

Usage

Name	Type	Description
openPaymentModal	`function(fiat_amount: string, fiat_currency: 'TWD' \| 'USD', callback_url?: string, order_data?: Record<string, any>)`	Opens the payment modal and starts a new payment process.
closePaymentModal	`function(): void`	Closes the payment modal and cancels the ongoing payment process.
data	{ `payment_intent_id: string`; `payment_chain_id: string`; `payment_address: string`; `token_address: string`; `symbol: string`; `decimals: number`; `crypto_amount: string`; `fiat_amount: string`; `fiat_currency: 'TWD' \| 'USD'`; `payment_deadline: number`; `status: PaymentStatus`; `payment_tx_hash: string \| null`; `callback_url: string \| null`; `order_data: Record<string, any> \| null`; } `\| undefined`	The details of the current payment, including its status and metadata.
txHash	`string \| undefined`	The transaction hash of the current payment.
error	`Error \| undefined`	The error of the current payment.
isLoading	`boolean`	Indicates whether the payment process is in progress (e.g., waiting for user action or blockchain confirmation).
isSuccess	`boolean`	Indicates whether the payment was successfully completed.
isError	`boolean`	Indicates whether the payment has failed.

The callback_url is optional. If provided, a notification will be sent to the specified callback endpoint when the payment status becomes successful. Your server can then record the payment information for further processing.

When using order_data, you can include any order-related information, and your server will receive this information at your configured callback endpoint. (if provided)

Example


const { 
  openPaymentModal, 
  closePaymentModal, 
  data, 
  txHash, 
  error, 
  isLoading, 
  isSuccess, 
  isError 
} = usePayment();
 
<Button onClick={() => openPaymentModal({ 
    fiat_amount: '10', 
    fiat_currency: 'TWD', 
    callback_url: 'https://{{endpoint-to-server}}',
    order_data: {
      order_product_id: '1234567890',
      order_product_name: 'Good Thing',
    }
  })}>
  Open Payment Modal
</Button>