Follow these steps to integrate using our pre-built React Native component.

Step 1: Obtain Access Token

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.

Step 2: Install Required Dependencies

# Install the WebView package
npm install react-native-webview

# For iOS, install pods
cd ios && pod install && cd ..

Step 3: Download the Component

You can view the component code or download it directly:
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

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:

Step 4.3: Add the Component to Your JSX

Once you have collected these values, you can pass them to the PhoenixPaymentNative component:
<PhoenixPaymentNative
  walletAddress={walletAddress}
  amount={amount}
  accessToken={accessToken}
  onClose={() => 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
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
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

const handlePaymentDone = () => {
  // Close the payment window
  setShowPayment(false);
};

Platform Configuration

iOS

Add to your Info.plist:
<key>NSAppTransportSecurity</key>
<dict>
  <key>NSExceptionDomains</key>
  <dict>
    <key>app-partner.phoenix.market</key>
    <dict>
      <key>NSExceptionAllowsInsecureHTTPLoads</key>
      <false/>
      <key>NSIncludesSubdomains</key>
      <true/>
    </dict>
  </dict>
</dict>

Android

Add to your AndroidManifest.xml:
<uses-permission android:name="android.permission.INTERNET" />

Complete Implementation Example