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(params: {fiat_amount: string, fiat_currency: 'TWD' \| 'USD', callback_url?: string, order_data?: Record<string, any>, group_key?: string} \| {payment_intent_id: string})`	Opens the payment modal. Can either start a new payment process or resume an existing one using a payment_intent_id.
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`; `received_amount: string \| null`; `aggregated_amount: string \| null`; `refund_amount: string \| null`; `refund_tx_hash: string \| null`; `callback_url: string \| null`; `order_data: Record<string, any> \| null`; `group_key: string \| null`; } `\| undefined`	The details of the current payment, including its status and metadata. For detailed field descriptions, please refer to the Payment Intent Fields section.
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 changes. Your server can then record the payment information for further processing.

⚠️

The fiat_amount must be at least 0.01. Values less than 0.01 will be rejected.

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

The group_key parameter is optional and can be used to classify payment intents, making it easier to filter them in the KryptoGO Studio or via the API.

Example


const { 
  openPaymentModal, 
  closePaymentModal, 
  data, 
  txHash, 
  error, 
  isLoading, 
  isSuccess, 
  isError 
} = usePayment();
 
// Start a new payment
<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',
    },
    group_key: 'product_purchase'
  })}>
  Open Payment Modal
</Button>
 
// Resume an existing payment
<Button onClick={() => openPaymentModal({ 
    payment_intent_id: 'pi_xxxxxxxxxxxx' 
  })}>
  Resume Payment
</Button>