# RN WalletMan

纯 TypeScript 实现的 React Native 钱包绑定库。

## 安装

**重要：必须先安装 react-native-webview**

```bash
# 1. 安装 react-native-webview（必需）
npm install react-native-webview
# 或
yarn add react-native-webview

# 2. iOS 需要 pod install
cd ios && pod install && cd ..

# 3. 安装 rnwalletman
npm install ./rnwalletman
# 或
yarn add ./rnwalletman
```


# 使用示例

## 基础用法

```tsx
import { PaytmBind } from 'rnwalletman';

<PaytmBind
  onSuccess={(result) => {
    // result.type: 'paytm_business'
    // result.cookie: SESSION cookie
    // result.xCsrfToken: CSRF token
    // result.qrData: QR 数据（JSON）
    
    // 发送到服务端
    fetch('https://your-api.com/bind', {
      method: 'POST',
      body: JSON.stringify(result)
    });
  }}
  onError={(error) => {
    Alert.alert('绑定失败', error);
  }}
/>
```

## 完整示例

```tsx
import React, { useState } from 'react';
import { View, Button, Modal } from 'react-native';
import { PaytmBind, WalletType } from 'rnwalletman';

function App() {
  const [showBind, setShowBind] = useState(false);
  
  return (
    <View>
      <Button title="绑定 Paytm" onPress={() => setShowBind(true)} />
      
      <Modal visible={showBind} onRequestClose={() => setShowBind(false)}>
        <PaytmBind
          onSuccess={(result) => {
            console.log('绑定成功', result);
            setShowBind(false);
            // 保存到服务端
          }}
          onError={(error) => {
            console.error(error);
            setShowBind(false);
          }}
        />
      </Modal>
    </View>
  );
}
```

## 返回数据结构

### Paytm
```typescript
{
  type: 'paytm_business',
  success: true,
  cookie: 'SESSION_VALUE',
  xCsrfToken: 'TOKEN',
  contextData: '...', // 可选
  qrData: '...'       // 可选
}
```

### PhonePe
```typescript
{
  type: 'phonepe_business',
  success: true,
  cookie: 'MERCHANT_USER_A_TOKEN=...;...',
  xCsrfToken: 'TOKEN',
  fingerprint: 'fp.fp.fp.fp',
  qrData: '...' // 可选
}
```

### GooglePay
```typescript
{
  type: 'googlepay_business',
  success: true,
  url: 'https://pay.google.com/...',
  body: 'f.req=...',
  cookie: '...',
  channelUid: '...',
  openUrl: '...'
}
```

### BharatPe
```typescript
{
  type: 'bharatpe_business',
  success: true,
  cookie: '...',
  accessToken: '...',
  merchantId: '...',
  userName: '...',
  email: '...', // 可选
  mobile: '...' // 可选
}
```


**注意**：`react-native-webview` 是 peer dependency，必须在使用 rnwalletman 的项目中安装。

## 使用

```tsx
import { PaytmBind, PhonePeBind, GooglePayBind, BharatPeBind } from 'rnwalletman';

function BindPaytmScreen() {
  return (
    <PaytmBind
      onSuccess={(result) => {
        console.log('绑定成功', result);
        // result: { type, cookie, xCsrfToken, qrData, ... }
        // 发送到服务端保存
      }}
      onError={(error) => {
        console.error('绑定失败', error);
      }}
    />
  );
}

function BindPhonePeScreen() {
  return (
    <PhonePeBind
      onSuccess={(result) => {
        // result: { type, cookie, xCsrfToken, fingerprint, ... }
      }}
      onError={(error) => console.error(error)}
    />
  );
}
```

## 组件

- `<PaytmBind />` - Paytm Business 绑定
- `<PhonePeBind />` - PhonePe Business 绑定
- `<GooglePayBind />` - GooglePay Business 绑定
- `<BharatPeBind />` - BharatPe Business 绑定

## 特性

- ✅ 纯 TypeScript，跨平台
- ✅ 使用 react-native-webview
- ✅ 自动提取 Cookie/Token
- ✅ TypeScript 类型定义
- ✅ 无需 Native 代码