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

# Quickstart (React Native)

> Install @taprails/tap-to-pay and process your first NFC payment in 5 minutes.

<Note>
  This guide is specifically for the **React Native SDK**. Building with another framework? See [Supported Frameworks](/guides/frameworks).
</Note>

***

## 1. Initialize the SDK

Call `ContactlessCryptoSDK.initialize()` once, before rendering any components that use the SDK. Your app entry point is ideal.

<CodeGroup>
  ```tsx POOL mode (custodial) theme={null}
  import { ContactlessCryptoSDK, PaymentMode } from '@taprails/tap-to-pay';

  ContactlessCryptoSDK.initialize({
    apiKey: 'pk_live_your_api_key',
    apiUrl: 'https://api.yourbackend.com',
    environment: 'production',
    merchantId: 'merchant_123',
    aid: 'YOUR_UNIQUE_AID',
    mode: PaymentMode.POOL,
    pool: {
      customerId: 'customer_456',
    },
  });
  ```

  ```tsx SESSION_KEY mode (non-custodial) theme={null}
  import { ContactlessCryptoSDK, PaymentMode } from '@taprails/tap-to-pay';

  ContactlessCryptoSDK.initialize({
    apiKey: 'pk_live_your_api_key',
    apiUrl: 'https://api.yourbackend.com',
    environment: 'production',
    aid: 'YOUR_UNIQUE_AID',
    mode: PaymentMode.SESSION_KEY,
    sessionKey: {
      walletAddress: '0x1234...abcd',
      defaultDailyLimit: '100.00',
      autoRenew: true,
      onSignTransaction: async (tx) => {
        // Hand off to your wallet provider
        return await myWallet.signTransaction(tx);
      },
    },
  });
  ```
</CodeGroup>

Not sure which mode to use? See [Payment Modes](/configuration/payment-modes).

***

## 2. Wrap Your App

Wrap your root component with `TapRailsThemeProvider`. In SESSION\_KEY mode this also handles automatic session key setup UI.

```tsx App.tsx theme={null}
import { TapRailsThemeProvider } from '@taprails/tap-to-pay';

export default function App() {
  return (
    <TapRailsThemeProvider>
      <YourNavigation />
    </TapRailsThemeProvider>
  );
}
```

***

## 3. Accept a Payment (Merchant)

Add a button that opens the TapRails payment flow:

```tsx MerchantScreen.tsx theme={null}
import { PaymentFlowManager } from '@taprails/tap-to-pay';
import { useState } from 'react';
import { Button } from 'react-native';

export function MerchantScreen() {
  const [showFlow, setShowFlow] = useState(false);

  return (
    <>
      <Button title="Accept Payment" onPress={() => setShowFlow(true)} />

      {showFlow && (
        <PaymentFlowManager
          config={{
            type: 'merchant',
            onComplete: (data) => {
              console.log('Payment received!', data);
              setShowFlow(false);
            },
            onCancel: () => setShowFlow(false),
            onError: (err) => console.error(err),
          }}
          onMerchantCancel={() => setShowFlow(false)}
        />
      )}
    </>
  );
}
```

**What the user sees:**

1. Amount input screen → enter the charge amount
2. NFC waiting screen → animated icon, countdown timer
3. Success screen → transaction receipt

***

## 4. Make a Payment (Customer)

```tsx CustomerScreen.tsx theme={null}
import { PaymentFlowManager } from '@taprails/tap-to-pay';
import { useState } from 'react';
import { Button } from 'react-native';

export function CustomerScreen() {
  const [showFlow, setShowFlow] = useState(false);

  return (
    <>
      <Button title="Pay Now" onPress={() => setShowFlow(true)} />

      {showFlow && (
        <PaymentFlowManager
          config={{
            type: 'customer',
            onComplete: (data) => {
              console.log('Payment sent!', data);
              setShowFlow(false);
            },
            onCancel: () => setShowFlow(false),
            onError: (err) => console.error(err),
          }}
          onCustomerCancel={() => setShowFlow(false)}
        />
      )}
    </>
  );
}
```

**What the user sees:**

1. Tap instruction screen → "Hold your phone near the payment terminal"
2. Processing screen → step-by-step progress
3. Success screen → receipt with transaction details

***

## You're Done!

<Check>
  The SDK handles NFC communication, invoice signing, signature verification, payment API calls, and all UI states automatically.
</Check>

### Next Steps

<CardGroup cols={2}>
  <Card title="Android Setup" icon="android" href="/installation/android">
    Required gradle config, manifest permissions, and HCE service setup.
  </Card>

  <Card title="iOS Setup" icon="apple" href="/installation/ios">
    Pod install and Info.plist NFC permission.
  </Card>

  <Card title="Payment Modes" icon="code-branch" href="/configuration/payment-modes">
    Deep-dive on POOL vs SESSION\_KEY.
  </Card>

  <Card title="Error Handling" icon="triangle-exclamation" href="/guides/error-handling">
    Handle every NFC and API error gracefully.
  </Card>
</CardGroup>