> ## Documentation Index
> Fetch the complete documentation index at: https://walletconnect-pay-docs-wcagent-expires-at-seconds-warning-3.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# WalletConnect Pay SDK - React Native

> Integrate WalletConnect Pay into your React Native wallet to enable seamless crypto payments for your users.

The WalletConnect Pay SDK allows wallet users to pay merchants using their crypto assets. The SDK handles payment option discovery, permit signing coordination, and payment confirmation while leveraging your wallet's existing signing infrastructure.

## Sample Wallet

For a complete working example, check out our sample wallet implementation:

<Card title="Sample Wallet - React Native" icon="github" href="https://github.com/reown-com/react-native-examples/tree/main/wallets/rn_cli_wallet">
  A reference React Native wallet app demonstrating WalletConnect Pay integration.
</Card>

## Requirements

* React Native 0.70+
* `@walletconnect/react-native-compat` installed and linked

## Installation

Install the WalletConnect Pay SDK using npm or yarn:

<Tabs>
  <Tab title="npm">
    ```bash theme={null}
    npm install @walletconnect/pay
    ```
  </Tab>

  <Tab title="yarn">
    ```bash theme={null}
    yarn add @walletconnect/pay
    ```
  </Tab>
</Tabs>

### React Native Setup

This SDK requires the WalletConnect React Native native module. Make sure you have `@walletconnect/react-native-compat` installed and linked in your React Native project:

```bash theme={null}
npm install @walletconnect/react-native-compat
```

## Architecture

The SDK uses a provider abstraction that allows different implementations:

* **NativeProvider**: Uses React Native uniffi module (current)
* **WasmProvider**: Uses WebAssembly module (coming soon for web browsers)

The SDK auto-detects the best available provider for your environment.

## Configuration

Initialize the WalletConnect Pay client with your credentials:

```typescript theme={null}
import { WalletConnectPay } from "@walletconnect/pay";

const client = new WalletConnectPay({
  appId: "your-wcp-id",
  // OR use apiKey instead:
  // apiKey: "your-api-key",
});
```

### Configuration Parameters

| Parameter  | Type     | Required | Description                     |
| ---------- | -------- | -------- | ------------------------------- |
| `appId`    | `string` | No\*     | WCP ID for authentication       |
| `apiKey`   | `string` | No\*     | API key for authentication      |
| `clientId` | `string` | No       | Client ID for tracking          |
| `baseUrl`  | `string` | No       | Custom API base URL             |
| `logger`   | `Logger` | No       | Custom logger instance or level |

<Note>
  Either `appId` or `apiKey` must be provided for authentication.
</Note>

<Info>
  Don't have a project ID? Create one at the [WalletConnect Dashboard](https://dashboard.walletconnect.com) by signing up and creating a new project.
</Info>

## Supported Networks & Tokens

WalletConnect Pay currently supports the following tokens and networks:

| Token | Network  | Chain ID | CAIP-10 Format           |
| ----- | -------- | -------- | ------------------------ |
| USDC  | Arbitrum | 42161    | `eip155:42161:{address}` |
| USDC  | Base     | 8453     | `eip155:8453:{address}`  |
| USDC  | Polygon  | 137      | `eip155:137:{address}`   |
| USDC  | Ethereum | 1        | `eip155:1:{address}`     |
| USDC  | Optimism | 10       | `eip155:10:{address}`    |
| USDC  | Monad    | 143      | `eip155:143:{address}`   |
| USDC  | Celo     | 42220    | `eip155:42220:{address}` |
| USDC  | BSC      | 56       | `eip155:56:{address}`    |
| EURC  | Ethereum | 1        | `eip155:1:{address}`     |
| EURC  | Base     | 8453     | `eip155:8453:{address}`  |
| USDT0 | Arbitrum | 42161    | `eip155:42161:{address}` |
| PYUSD | Ethereum | 1        | `eip155:1:{address}`     |
| PYUSD | Arbitrum | 42161    | `eip155:42161:{address}` |
| USDG  | Ethereum | 1        | `eip155:1:{address}`     |
| USDT  | Ethereum | 1        | `eip155:1:{address}`     |
| USDT  | Polygon  | 137      | `eip155:137:{address}`   |
| USDT  | BSC      | 56       | `eip155:56:{address}`    |

<Note>
  Include accounts for all supported networks to maximize payment options for your users.
</Note>

## Payment Flow

The payment flow consists of four main steps:

**Get Options -> Get Actions -> Sign Actions -> Confirm Payment**

```mermaid theme={null}
sequenceDiagram
    participant User
    participant Wallet
    participant PaySDK as Pay SDK
    participant Backend as WalletConnect Pay
    participant WebView

    User->>Wallet: Scan QR / Open payment link
    Wallet->>PaySDK: getPaymentOptions(link, accounts)
    PaySDK->>Backend: Fetch payment options
    Backend-->>PaySDK: Payment options + merchant info
    PaySDK-->>Wallet: PaymentOptionsResponse
    Wallet->>User: Display payment options

    User->>Wallet: Select payment option
    Wallet->>PaySDK: getRequiredPaymentActions(paymentId, optionId)
    PaySDK->>Backend: Get signing actions
    Backend-->>PaySDK: Required wallet RPC actions
    PaySDK-->>Wallet: List of actions to sign

    Wallet->>User: Request signature(s)
    User->>Wallet: Approve & sign

    alt Selected option requires data collection
        Wallet->>WebView: Load selectedOption.collectData.url
        WebView->>User: Display data collection form
        User->>WebView: Fill form & accept T&C
        WebView-->>Wallet: IC_COMPLETE message
    end

    Wallet->>PaySDK: confirmPayment(signatures, collectedData)
    PaySDK->>Backend: Submit payment
    Backend-->>PaySDK: Payment status
    PaySDK-->>Wallet: ConfirmPaymentResponse
    Wallet->>User: Show result
```

<Steps>
  <Step title="Get Payment Options" titleSize="h3">
    When a user scans a payment QR code or opens a payment link, fetch available payment options:

    ```typescript theme={null}
    const options = await client.getPaymentOptions({
      paymentLink: "https://pay.walletconnect.com/pay_123",
      accounts: [
        `eip155:1:${walletAddress}`,      // Ethereum Mainnet
        `eip155:8453:${walletAddress}`,   // Base
      ],
      includePaymentInfo: true,
    });

    console.log("Payment ID:", options.paymentId);
    console.log("Options:", options.options);

    // Display merchant info
    if (options.info) {
      console.log("Merchant:", options.info.merchant.name);
      console.log("Amount:", options.info.amount.display.assetSymbol, options.info.amount.value);
    }

    // Check which options require data collection
    for (const option of options.options) {
      if (option.collectData) {
        console.log(`Option ${option.id} requires info capture`);
      }
    }
    ```
  </Step>

  <Step title="Get Required Actions" titleSize="h3">
    After the user selects a payment option, get the wallet RPC actions required to complete the payment:

    ```typescript theme={null}
    const actions = await client.getRequiredPaymentActions({
      paymentId: options.paymentId,
      optionId: options.options[0].id,
    });

    // Each action contains wallet RPC data to sign
    for (const action of actions) {
      console.log("Chain:", action.walletRpc.chainId);
      console.log("Method:", action.walletRpc.method);
      console.log("Params:", action.walletRpc.params);
    }
    ```
  </Step>

  <Step title="Sign Actions" titleSize="h3">
    Sign each action with your wallet's signing implementation:

    ```typescript theme={null}
    // Sign each action based on its RPC method
    const signatures = await Promise.all(
      actions.map(async (action) => {
        const { chainId, method, params } = action.walletRpc;
        const parsedParams = JSON.parse(params);

        switch (method) {
          case "eth_signTypedData_v4":
            return await wallet.signTypedData(chainId, parsedParams);
          case "eth_sendTransaction":
            return await wallet.sendTransaction(chainId, parsedParams[0]);
          case "personal_sign":
            return await wallet.personalSign(chainId, parsedParams);
          default:
            throw new Error(`Unsupported RPC method: ${method}`);
        }
      })
    );
    ```

    <Note>
      Payment options may include multiple actions with different RPC methods. For example, a Permit2 payment where the user lacks sufficient allowance returns two actions: an `eth_sendTransaction` to approve the token allowance, followed by an `eth_signTypedData_v4` to sign the Permit2 transfer. Your wallet must check `action.walletRpc.method` and dispatch to the appropriate handler. For full implementation guidance, see [USDT support](/payments/wallets/token-chain-support/usdt-support).
    </Note>

    <Warning>
      Signatures must be in the same order as the actions array.
    </Warning>
  </Step>

  <Step title="Collect User Data (If Required)" titleSize="h3">
    Some payments may require additional user data. Check for `collectData` on the selected payment option:

    ## WebView-Based Data Collection

    When a payment requires user information (e.g., for Travel Rule compliance), the SDK returns a `collectData` field on individual payment options. Each option may independently require data collection — some options may require it while others don't.

    ### Recommended Flow (Per-Option)

    The recommended approach is to display all payment options upfront, then handle data collection only when the user selects an option that requires it:

    1. Call `getPaymentOptions` and display all available options to the user
    2. Show a visual indicator (e.g., "Info required" badge) on options where `option.collectData` is present
    3. When the user selects an option, check `selectedOption.collectData`
    4. If present, open `selectedOption.collectData.url` in a WebView within your wallet
    5. Optionally append a `prefill=<base64-json>` query parameter with known user data (e.g., name, date of birth, address). Use proper URL building to handle existing query parameters.
    6. Listen for JS bridge messages: `IC_COMPLETE` (success) or `IC_ERROR` (failure)
    7. On `IC_COMPLETE`, proceed to `confirmPayment()` **without** passing `collectedData` — the WebView submits data directly to the backend

    ### Decision Matrix

    | Response `collectData` | `option.collectData` | Behavior                                                            |
    | ---------------------- | -------------------- | ------------------------------------------------------------------- |
    | present                | present              | Option requires IC — use `option.collectData.url`                   |
    | present                | `null`               | Option does NOT require IC (others might) — skip IC for this option |
    | `null`                 | `null`               | No IC needed for any option                                         |

    <Info>
      The `collectData` also includes a `schema` field — a JSON schema string describing the required fields. The `required` list in this schema tells you which fields the form expects. Wallets can use these field names as keys when building the prefill JSON object. For example, if the schema's `required` array contains `["fullName", "dob", "pobAddress"]`, you can prefill with `{"fullName": "...", "dob": "...", "pobAddress": "..."}`.
    </Info>

    <Note>
      The top-level `collectData` on the payment options response is still available for backward compatibility. However, the per-option `collectData` is the recommended approach as it provides more granular control over the flow.
    </Note>

    <Warning>
      When using the WebView approach, do **not** pass `collectedData` to `confirmPayment()`. The WebView handles data submission directly.
    </Warning>

    ```typescript theme={null}
    // Check per-option data collection requirement after user selects an option
    if (selectedOption.collectData?.url) {
      // Use the "required" list from selectedOption.collectData.schema to determine which fields to prefill
      const prefillData = {
        fullName: "John Doe",
        dob: "1990-01-15",
        pobAddress: "123 Main St, New York, NY 10001",
      };
      const prefillBase64 = btoa(JSON.stringify(prefillData));
      const separator = selectedOption.collectData.url.includes("?") ? "&" : "?";
      const webViewUrl = `${selectedOption.collectData.url}${separator}prefill=${prefillBase64}`;

      // Show WebView for this specific option — see WebView Implementation section below
      showDataCollectionWebView(webViewUrl);
    }
    ```

    ### WebView Message Types

    The WebView communicates with your wallet through JavaScript bridge messages. The message payload is a JSON string with the following structure:

    | Message Type  | Payload                                      | Description                                                               |
    | ------------- | -------------------------------------------- | ------------------------------------------------------------------------- |
    | `IC_COMPLETE` | `{ "type": "IC_COMPLETE", "success": true }` | User completed the form successfully. Proceed to payment confirmation.    |
    | `IC_ERROR`    | `{ "type": "IC_ERROR", "error": "..." }`     | An error occurred. Display the error message and allow the user to retry. |

    #### Platform-Specific Bridge Names

    | Platform         | Bridge Name                                   | Handler                                                       |
    | ---------------- | --------------------------------------------- | ------------------------------------------------------------- |
    | Kotlin (Android) | `AndroidWallet`                               | `@JavascriptInterface onDataCollectionComplete(json: String)` |
    | Swift (iOS)      | `payDataCollectionComplete`                   | `WKScriptMessageHandler.didReceive(message:)`                 |
    | Flutter          | `ReactNativeWebView` (injected via JS bridge) | `JavaScriptChannel.onMessageReceived`                         |
    | React Native     | `ReactNativeWebView` (native)                 | `WebView.onMessage` prop                                      |
  </Step>

  <Step title="Confirm Payment" titleSize="h3">
    Submit the signatures and collected data to complete the payment:

    ```typescript theme={null}
    const result = await client.confirmPayment({
      paymentId: options.paymentId,
      optionId: options.options[0].id,
      signatures,
      collectedData, // Include if collectData was present
    });

    if (result.status === "succeeded") {
      console.log("Payment successful!");
    } else if (result.status === "processing") {
      console.log("Payment is processing...");
    } else if (result.status === "failed") {
      console.log("Payment failed");
    }
    ```
  </Step>
</Steps>

## WebView Implementation

When a selected option has `collectData.url` present, display the URL in a WebView using `react-native-webview`. Install the dependency:

```bash theme={null}
npm install react-native-webview@13.16.0
```

```tsx theme={null}
import React, { useCallback } from "react";
import { WebView, WebViewMessageEvent } from "react-native-webview";
import { Linking, View, ActivityIndicator } from "react-native";

interface PayDataCollectionWebViewProps {
  url: string;
  onComplete: () => void;
  onError: (error: string) => void;
}

function PayDataCollectionWebView({
  url,
  onComplete,
  onError,
}: PayDataCollectionWebViewProps) {
  const handleMessage = useCallback(
    (event: WebViewMessageEvent) => {
      try {
        const data = JSON.parse(event.nativeEvent.data);
        switch (data.type) {
          case "IC_COMPLETE":
            onComplete();
            break;
          case "IC_ERROR":
            onError(data.error || "Unknown error");
            break;
        }
      } catch {
        // Ignore non-JSON messages
      }
    },
    [onComplete, onError]
  );

  const handleNavigationRequest = useCallback(
    (request: { url: string }) => {
      // Open external links (T&C, Privacy Policy) in system browser
      if (!request.url.includes("pay.walletconnect.com")) {
        Linking.openURL(request.url);
        return false;
      }
      return true;
    },
    []
  );

  return (
    <WebView
      source={{ uri: url }}
      onMessage={handleMessage}
      onShouldStartLoadWithRequest={handleNavigationRequest}
      javaScriptEnabled
      domStorageEnabled
      startInLoadingState
      renderLoading={() => (
        <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
          <ActivityIndicator size="large" />
        </View>
      )}
    />
  );
}

function buildPrefillUrl(
  baseUrl: string,
  prefillData: Record<string, string>
): string {
  if (Object.keys(prefillData).length === 0) return baseUrl;
  const base64 = btoa(JSON.stringify(prefillData));
  const separator = baseUrl.includes("?") ? "&" : "?";
  return `${baseUrl}${separator}prefill=${base64}`;
}
```

## Complete Example

Here's a complete implementation example:

```typescript theme={null}
import { WalletConnectPay, CollectDataFieldResult } from "@walletconnect/pay";

class PaymentManager {
  private client: WalletConnectPay;

  constructor() {
    this.client = new WalletConnectPay({
      appId: "your-wcp-id",
    });
  }

  async processPayment(paymentLink: string, walletAddress: string) {
    try {
      // Step 1: Get payment options
      const options = await this.client.getPaymentOptions({
        paymentLink,
        accounts: [
          `eip155:1:${walletAddress}`,
          `eip155:137:${walletAddress}`,
          `eip155:8453:${walletAddress}`,
        ],
        includePaymentInfo: true,
      });

      if (options.options.length === 0) {
        throw new Error("No payment options available");
      }

      // Step 2: Let user select an option (simplified - use first option)
      const selectedOption = options.options[0];

      // Step 3: Get required actions
      const actions = await this.client.getRequiredPaymentActions({
        paymentId: options.paymentId,
        optionId: selectedOption.id,
      });

      // Step 4: Sign all actions
      const signatures = await Promise.all(
        actions.map((action) =>
          this.signAction(action, walletAddress)
        )
      );

      // Step 5: Collect data via WebView if required for selected option
      if (selectedOption.collectData?.url) {
        // Show WebView and wait for IC_COMPLETE
        await this.showDataCollectionWebView(selectedOption.collectData.url);
      }

      // Step 6: Confirm payment
      const result = await this.client.confirmPayment({
        paymentId: options.paymentId,
        optionId: selectedOption.id,
        signatures,
      });

      return result;
    } catch (error) {
      console.error("Payment failed:", error);
      throw error;
    }
  }

  private async signAction(action: Action, walletAddress: string): Promise<string> {
    const { chainId, method, params } = action.walletRpc;
    const parsedParams = JSON.parse(params);

    switch (method) {
      case "eth_signTypedData_v4":
        return await wallet.signTypedData(chainId, parsedParams);
      case "eth_sendTransaction":
        return await wallet.sendTransaction(chainId, parsedParams[0]);
      case "personal_sign":
        return await wallet.personalSign(chainId, parsedParams);
      default:
        throw new Error(`Unsupported RPC method: ${method}`);
    }
  }
}
```

## Provider Utilities

The SDK provides utilities for checking provider availability:

```typescript theme={null}
import {
  isProviderAvailable,
  detectProviderType,
  isNativeProviderAvailable,
  setNativeModule,
} from "@walletconnect/pay";

// Check if any provider is available
if (isProviderAvailable()) {
  // SDK can be used
}

// Detect which provider type is available
const providerType = detectProviderType(); // 'native' | 'wasm' | null

// Check specifically for native provider
if (isNativeProviderAvailable()) {
  // React Native native module is available
}

// Manually inject native module (if auto-discovery fails)
import { NativeModules } from "react-native";
setNativeModule(NativeModules.RNWalletConnectPay);
```

## Error Handling

The SDK throws typed errors for different failure scenarios:

```typescript theme={null}
import { 
  PayError, 
  PaymentOptionsError, 
  PaymentActionsError,
  ConfirmPaymentError,
  NativeModuleNotFoundError 
} from "@walletconnect/pay";

try {
  const options = await client.getPaymentOptions({
    paymentLink: link,
    accounts,
  });
} catch (error) {
  if (error instanceof PaymentOptionsError) {
    console.error("Failed to get options:", error.originalMessage);
  } else if (error instanceof PayError) {
    console.error("Pay error:", error.code, error.message);
  }
}
```

### Error Types

| Error Class                 | Description                                  |
| --------------------------- | -------------------------------------------- |
| `PayError`                  | Base error class for all Pay SDK errors      |
| `PaymentOptionsError`       | Error when fetching payment options          |
| `PaymentActionsError`       | Error when fetching required payment actions |
| `ConfirmPaymentError`       | Error when confirming payment                |
| `NativeModuleNotFoundError` | Error when native module is not available    |

### Error Codes

The `PayError` class includes a `code` property with one of the following values:

```typescript theme={null}
type PayErrorCode =
  | "JSON_PARSE"
  | "JSON_SERIALIZE"
  | "PAYMENT_OPTIONS"
  | "PAYMENT_REQUEST"
  | "CONFIRM_PAYMENT"
  | "NATIVE_MODULE_NOT_FOUND"
  | "INITIALIZATION_ERROR"
  | "UNKNOWN";
```

## API Reference

### WalletConnectPay

Main client for payment operations.

#### Constructor

```typescript theme={null}
new WalletConnectPay(options: WalletConnectPayOptions)
```

#### Methods

| Method                              | Description                              |
| ----------------------------------- | ---------------------------------------- |
| `getPaymentOptions(params)`         | Fetch available payment options          |
| `getRequiredPaymentActions(params)` | Get signing actions for a payment option |
| `confirmPayment(params)`            | Confirm and execute the payment          |
| `static isAvailable()`              | Check if a provider is available         |

### Data Types

#### PaymentStatus

```typescript theme={null}
type PaymentStatus = 
  | "requires_action" 
  | "processing" 
  | "succeeded" 
  | "failed" 
  | "expired";
```

#### PayProviderType

```typescript theme={null}
type PayProviderType = "native" | "wasm";
```

#### CollectDataFieldType

```typescript theme={null}
type CollectDataFieldType = "text" | "date";
```

#### Method Parameters

```typescript theme={null}
interface GetPaymentOptionsParams {
  /** Payment link or ID */
  paymentLink: string;
  /** List of CAIP-10 accounts */
  accounts: string[];
  /** Whether to include payment info in response */
  includePaymentInfo?: boolean;
}

interface GetRequiredPaymentActionsParams {
  /** Payment ID */
  paymentId: string;
  /** Option ID */
  optionId: string;
}

interface ConfirmPaymentParams {
  /** Payment ID */
  paymentId: string;
  /** Option ID */
  optionId: string;
  /** Signatures from wallet RPC calls */
  signatures: string[];
}
```

#### Response Types

```typescript theme={null}
interface PaymentOptionsResponse {
  /** Payment ID extracted from the payment link */
  paymentId: string;
  /** Payment information (if includePaymentInfo was true) */
  info?: PaymentInfo;
  /** Available payment options */
  options: PaymentOption[];
  /** Data collection requirements (if any) */
  collectData?: CollectDataAction;
  /** Transaction result details (present when payment already completed) */
  resultInfo?: PaymentResultInfo;
}

interface PaymentResultInfo {
  /** Transaction ID */
  txId: string;
  /** Token amount details */
  optionAmount: PayAmount;
}

interface ConfirmPaymentResponse {
  /** Payment status */
  status: PaymentStatus;
  /** True if the payment is in a final state */
  isFinal: boolean;
  /** Time to poll for payment status, in milliseconds */
  pollInMs?: number;
}
```

#### PaymentOption

```typescript theme={null}
interface PaymentOption {
  /** ID of the option */
  id: string;
  /** The option's token and amount */
  amount: PayAmount;
  /** Estimated time to complete the option, in seconds */
  etaS: number;
  /** Actions required to complete the option */
  actions: Action[];
  /** Per-option data collection requirements */
  collectData?: CollectDataAction;
}
```

#### Action

```typescript theme={null}
interface Action {
  walletRpc: WalletRpcAction;
}

interface WalletRpcAction {
  /** Chain ID in CAIP-2 format (e.g., "eip155:8453") */
  chainId: string;
  /** RPC method name (e.g., "eth_signTypedData_v4", "eth_sendTransaction") */
  method: string;
  /** JSON-encoded params array */
  params: string;
}
```

#### Amount Types

```typescript theme={null}
interface PayAmount {
  /** Currency unit, prefixed with either "iso4217/" or "caip19/" */
  unit: string;
  /** Amount value, in the currency unit's minor units */
  value: string;
  /** Display information for the amount */
  display: AmountDisplay;
}

interface AmountDisplay {
  /** Ticker/symbol of the asset */
  assetSymbol: string;
  /** Full name of the asset */
  assetName: string;
  /** Number of minor decimals of the asset */
  decimals: number;
  /** URL of the icon of the asset (if token) */
  iconUrl?: string;
  /** Name of the network of the asset (if token) */
  networkName?: string;
}
```

#### Payment Info Types

```typescript theme={null}
interface PaymentInfo {
  /** Payment status */
  status: PaymentStatus;
  /** Amount to be paid */
  amount: PayAmount;
  /** Payment expiration timestamp, in seconds since epoch */
  expiresAt: number;
  /** Merchant information */
  merchant: MerchantInfo;
  /** Buyer information (present if payment has been submitted) */
  buyer?: BuyerInfo;
}

interface MerchantInfo {
  /** Merchant name */
  name: string;
  /** Merchant icon URL */
  iconUrl?: string;
}

interface BuyerInfo {
  /** Account CAIP-10 */
  accountCaip10: string;
  /** Account provider name */
  accountProviderName: string;
  /** Account provider icon URL */
  accountProviderIcon?: string;
}
```

#### Collect Data Types

```typescript theme={null}
interface CollectDataAction {
  /** URL for data collection (displayed in WebView) */
  url: string;
  /** JSON schema describing required fields */
  schema?: string;
}
```

## Best Practices

1. **Check Provider Availability**: Always check if a provider is available before using the SDK

2. **Account Format**: Always use CAIP-10 format for accounts: `eip155:{chainId}:{address}`

3. **Multiple Chains**: Provide accounts for all supported chains to maximize payment options

4. **Signature Order**: Maintain the same order of signatures as the actions array

5. **Error Handling**: Always handle errors gracefully and show appropriate user feedback

6. **Loading States**: Show loading indicators during API calls and signing operations

7. **Expiration**: Check `paymentInfo.expiresAt` and warn users if time is running low

8. **User Data**: Only collect data when `collectData` is present on the selected payment option and you don't already have the required user data. If you already have the required data, you can submit this without collecting from the user. You must make sure the user accepts WalletConnect Terms and Conditions and Privacy Policy before submitting user information to WalletConnect.

9. **WebView Data Collection**: When `selectedOption.collectData?.url` is present, display the URL in a WebView using `react-native-webview` rather than building native forms. The WebView handles form rendering, validation, and T\&C acceptance.

10. **Per-Option Data Collection**: When displaying payment options, check each option's `collectData` field. Show a visual indicator (e.g., "Info required" badge) on options that require data collection. Only open the WebView when the user selects an option with `collectData` present — use the option's `collectData.url` which is already scoped to that option's account.