> ## Documentation Index
> Fetch the complete documentation index at: https://docs.crycketpay.com/llms.txt
> Use this file to discover all available pages before exploring further.

# React Native

> Integrate Crycket into your React Native app

## Installation

```bash theme={null}
npm install @crycket/react-native-sdk
```

## Setup

Initialize the SDK at app startup:

```typescript theme={null}
import { PaymentSDK } from '@crycket/react-native-sdk';

const sdk = PaymentSDK.init({
  apiKey: 'pk_live_...',
  debug: __DEV__,
});
```

## Requesting a payment

```typescript theme={null}
// 1. Create an intent
const intent = await sdk.createIntent({
  chain: 'solana:5eykt4UsFv8P8NJdTREpY1vzqKq2Kvdp',
  token: 'USDC',
  amount: '10.50',
  requestor: wallet.address,
  idempotencyKey: 'order_982734',
  metadata: { orderId: '982734' },
});

// 2. Start audio broadcast
const broadcast = sdk.broadcast(intent);

// 3. Watch for fulfillment
sdk.onStatusChange(intent, (status, context) => {
  if (status === 'confirmed') {
    broadcast.stop();
    // Payment complete
  }
});
```

## Fulfilling a payment

```typescript theme={null}
// 1. Listen for audio signal
const received = await sdk.listen();

// 2a. Default UI — SDK renders bottom sheet
sdk.onIntentReceived(received.intentId, wallet);

// 2b. Headless mode — render your own UI
sdk.onIntentReceived(received.intentId, wallet, {
  headless: true,
  onDetails: (intent, summary) => {
    // Render payment details
  },
  onComplete: (intent) => {
    // Payment confirmed
  },
  onError: (error) => {
    // Handle error
  },
});

// When user confirms in headless mode:
await sdk.confirm();
```

## Sharing via deep link or QR

```typescript theme={null}
// Deep link
const link = sdk.getDeepLink(intent);
// "yourapp://pay?intent_id=pi_abc123"

// QR code payload
const qrPayload = sdk.getQRPayload(intent);
```