Save this file to your components directory, for example:
`components/PhoenixPaymentNative.tsx`
## Step 4: Implement the Component
Follow these steps to implement the component in your application:
### Step 4.1: Import the Component
```tsx theme={null}
import { PhoenixPaymentNative } from './components/PhoenixPaymentNative';
```
### Step 4.2: Prepare Required and Optional Parameters
Before adding the component, you need to collect the following information:
#### Required Parameters
* `walletAddress`: The Ethereum wallet address where USDC will be sent
* `amount`: The amount in USD to convert to USDC
* `accessToken`: The access token retrieved from your backend
* `onClose`: Function to handle when the user closes the payment modal
* `onComplete`: Callback function to handle payment completion events
#### Optional Parameters
* `onDone`: Callback function to handle when the payment process is complete
* `onOrderCreated`: Callback function to handle order creation events
* `theme`: Optional UI theme, can be set to either 'light' or 'dark'
You should create form inputs in your UI to collect the required information:
```tsx theme={null}
// Example of collecting user input
const [walletAddress, setWalletAddress] = useState('');
const [amount, setAmount] = useState('');
const [showPayment, setShowPayment] = useState(false);
const [accessToken, setAccessToken] = useState('');
useEffect(() => {
// Fetch the access token from your backend
fetch('https://your-backend.com/api/token')
.then(response => response.json())
.then(data => setAccessToken(data.access_token))
.catch(error => console.error('Error fetching access token:', error));
}, []);
```
### Step 4.3: Add the Component to Your JSX
Once you have collected these values, you can pass them to the PhoenixPaymentNative component:
```tsx theme={null}
setShowPayment(false)}
onComplete={handlePaymentComplete}
onDone={handlePaymentDone}
onOrderCreated={handleOrderCreated}
theme="dark" // Optional: specify 'light' or 'dark' theme
/>
```
### Step 4.4: Handle Order Created Events
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 order
* `data`: Object containing additional order details:
* `created_at`: Timestamp of order creation
* `buyer_address`: The buyer's wallet address
* `seller_address`: The seller's wallet address
* `send_amount`: The amount to be sent
* `receive_amount`: The amount to be received
* `uniqueness_amount`: The amount of cents added to the order for uniqueness
* `receiving_chain_id`: The chain ID where the payment will be received
* `zelle_address`: The Zelle address for payment
```tsx theme={null}
const handleOrderCreated = ({ order_id, data }) => {
console.log('Order created:', { order_id, data });
// You can store the order details for reference
};
```
### Step 4.5: Handle Payment Completion
The `onComplete` callback receives three parameters:
1. `success`: Boolean indicating if the operation succeeded
2. `transactionId`: Transaction hash (only for successful payments)
3. `data`: Object containing additional information
#### Transaction Success Data
When a transaction is successful, the data object will contain:
* `amount`: The USD amount
* `token`: The token type (e.g., "USDC")
* `chain`: The blockchain network
* `walletAddress`: The recipient wallet
* `sendAmount`: The amount of tokens sent
* `transactionHash`: The blockchain transaction hash
* `basescanLink`: Link to view the transaction
```tsx theme={null}
const handlePaymentComplete = (success, transactionId, data) => {
if (success) {
// For transaction success
if (data?.transactionHash) {
console.log('Transaction completed:', data.transactionHash);
// Uncomment the following line if you want to close the window after transaction success
// setShowPayment(false);
}
} else {
console.log('Payment failed or cancelled');
// Uncomment the following line if you want to close the window after payment failure/cancellation
// setShowPayment(false);
}
};
```
### Step 4.6: Handle Done Events
```tsx theme={null}
const handlePaymentDone = () => {
// Close the payment window
setShowPayment(false);
};
```
### Platform Configuration
#### iOS
Add to your `Info.plist`:
```xml theme={null}
NSAppTransportSecurityNSExceptionDomainsapp-partner.phoenix.marketNSExceptionAllowsInsecureHTTPLoadsNSIncludesSubdomains
```
#### Android
Add to your `AndroidManifest.xml`:
```xml theme={null}
```
## Complete Implementation Example
Here's a complete example showing how to implement the Phoenix payment in a React Native app:
```tsx theme={null}
import React, { useState, useEffect } from 'react';
import { View, Text, TextInput, Button, StyleSheet, Linking } from 'react-native';
import { PhoenixPaymentNative } from './components/PhoenixPaymentNative';
export default function PaymentScreen() {
const [walletAddress, setWalletAddress] = useState('');
const [amount, setAmount] = useState('');
const [showPayment, setShowPayment] = useState(false);
const [accessToken, setAccessToken] = useState('');
useEffect(() => {
// Fetch the access token from your backend
fetch('https://your-backend.com/api/token')
.then(response => response.json())
.then(data => setAccessToken(data.access_token))
.catch(error => console.error('Error fetching access token:', error));
}, []);
const handlePaymentComplete = (success, transactionId, data) => {
if (success) {
// For transaction success
if (data?.transactionHash) {
console.log('Transaction completed:', data.transactionHash);
// Uncomment the following line if you want to close the window after transaction success
// setShowPayment(false);
}
} else {
console.log('Payment failed or cancelled');
// Uncomment the following line if you want to close the window after payment failure/cancellation
// setShowPayment(false);
}
};
const handlePaymentDone = () => {
// Close the payment window
setShowPayment(false);
};
const handleOrderCreated = ({ order_id, data }) => {
console.log('Order created:', { order_id, data });
// You can store the order details for reference
};
return (
Wallet Address:Amount (USD):
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20,
},
label: {
fontSize: 16,
fontWeight: 'bold',
marginBottom: 8,
},
input: {
borderWidth: 1,
borderColor: '#ddd',
borderRadius: 4,
padding: 8,
marginBottom: 16,
},
});
```