Learn how to integrate Phoenix payments in your React Native application
Follow these steps to integrate using our pre-built React Native component.
Obtaining Access Token
Before using the Phoenix component, you need to obtain an access token from your backend.
See the Obtaining Access Token page for detailed instructions on setting up the backend endpoint.
This is example code for obtaining an access token. You will need to adapt the endpoint URL and request format based on your specific backend implementation. Refer to the Obtaining Access Token page for a complete example of setting up a backend service.
You can view the component code or download it directly:
View Component Code
Save this file to your components directory, for example:
components/PhoenixPaymentNative.tsx
Follow these steps to implement the component in your application:
Before adding the component, you need to collect the following information:
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
: Callback function to handle order creation eventstheme
: Optional UI theme, can be set to either ‘light’ or ‘dark’You should create form inputs in your UI to collect the required information:
View Input Collection Example
Once you have collected these values, you can pass them to the PhoenixPaymentNative component:
The 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 paymentThe onComplete
callback receives three parameters:
success
: Boolean indicating if the operation succeededtransactionId
: Transaction hash (only for successful payments)data
: Object containing additional informationWhen a transaction is successful, the data object will contain:
amount
: The USD amounttoken
: The token type (e.g., “USDC”)chain
: The blockchain networkwalletAddress
: The recipient walletsendAmount
: The amount of tokens senttransactionHash
: The blockchain transaction hashbasescanLink
: Link to view the transactionAdd to your Info.plist
:
Add to your AndroidManifest.xml
:
View Complete Example
Here’s a complete example showing how to implement the Phoenix payment in a React Native app: