rnpay/rnwalletman/README.md

RN WalletMan

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

安装

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

# 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

使用示例

基础用法

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);
  }}
/>

完整示例

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

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

PhonePe

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

GooglePay

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

BharatPe

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

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

使用

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 代码