185 lines
3.5 KiB
Markdown
185 lines
3.5 KiB
Markdown
# 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 代码
|