AppKit Pay with Exchange - Next.js
AppKit Pay with Exchange unlocks a powerful new flow: users can pay in crypto directly from their Centralized Exchange (CEXs) accounts like Binance or Coinbase, with no new wallets, no app switching, and no lost conversions.
Quickstart
Here you can find a simplified process to integrate AppKit Pay:
Install the library
Usage
In order to run the payment, use the hook usePay
. This hook receives two parameter to manage the success or the error in the process.
Hooks
usePay
Simplifies the modal-based payment flow. It internally handles subscriptions to provide reactive state variables (isPending, isSuccess, isError, data, error) and an open function. Callbacks (onSuccess, onError) are triggered reliably.
usePay(parameters?: UsePayParameters): UsePayReturn
parameters
: OptionalonSuccess
andonError
callbacks.returns
:{ open, isPending, isSuccess, isError, error, data }
useAvailableExchanges
Fetches and manages the state for available exchanges.
useAvailableExchanges(options?: { isFetchOnInit?: boolean, initialPage?: number }): UseAvailableExchangesReturn
options
: Control initial fetch behavior.returns
:{ data, isLoading, error, fetch }
usePayUrlActions
Provides functions (getUrl, openUrl) to interact with specific exchange URLs, returning the sessionId needed for status tracking.
usePayUrlActions(): { getUrl, openUrl }
getUrl(exchangeId, params): Promise<PayUrlResponse>
openUrl(exchangeId, params, openInNewTab?): Promise<PayUrlResponse>
(Returns{ url, sessionId }
)
useExchangeBuyStatus
Fetches and polls for the status of a headless payment transaction using exchangeId and sessionId.
useExchangeBuyStatus(params: UseExchangeBuyStatusParameters): UseExchangeBuyStatusReturn
params
:{ exchangeId, sessionId, pollingInterval?, isEnabled?, onSuccess?, onError? }
returns
:{ data, isLoading, error, refetch }