Learn how to integrate Phoenix using our pre-built React component
Obtaining Access Token
View Component Code
/src/components/PhoenixPayment.tsx
<style>
tag, so you don’t need to add any additional CSS.walletAddress
: The Ethereum wallet address where USDC will be sentamount
: The amount in USD to convert to USDCaccessToken
: The access token retrieved from your backendonClose
: Function to handle when the user closes the payment modalonComplete
: Callback function to handle payment completion eventsonDone
: Callback function to handle when the payment process is completeonOrderCreated
: Optional callback function to handle when an order is createdtheme
: Optional UI theme, can be set to either ‘light’ or ‘dark’View Input Collection Example
onOrderCreated
callback is triggered when a new order is created in the Phoenix system. This happens before the payment process begins. The callback receives an object containing:
order_id
: Unique identifier for the orderdata
: Object containing additional order details:
created_at
: Timestamp of order creationbuyer_address
: The buyer’s wallet addressseller_address
: The seller’s wallet addresssend_amount
: The amount to be sentreceive_amount
: The amount to be receiveduniqueness_amount
: The amount of cents added to the order for uniquenessreceiving_chain_id
: The chain ID where the payment will be receivedzelle_address
: The Zelle address for paymentonComplete
callback receives three parameters:
success
: Boolean indicating if the operation succeededtransactionId
: Transaction hash (only for successful payments)data
: Object containing additional informationamount
: The USD amounttoken
: The token received (e.g., “USDC”)chain
: The blockchain (e.g., “Base”)walletAddress
: The receiving wallet addresssendAmount
: The amount of tokens senttransactionHash
: The blockchain transaction hashbasescanLink
: Link to view the transaction on BasescanView Complete Example