如何在@payhere/payhere-mobilesdk-reactnative中使用Payhere授权流程

当前官方@payhere/payhere-mobilesdk-reactnative包仅默认支持三类支付请求：

• 一次性支付请求
• 周期性支付请求
• 预审批请求

你需要的Authorize API支付冻结能力没有被官方SDK直接内置，可通过以下两种方案实现：

方案1：适配现有预审批请求接口实现 #

预审批请求的底层逻辑与Authorize API的支付冻结能力匹配，均为冻结用户指定额度、后续单独发起扣款。你可直接调用SDK自带的预审批请求方法，传入与Web端Authorize API一致的业务参数即可实现同等效果：

需注意校验商户ID、金额、币种、回调地址等核心参数与Web端传参规则保持一致，参数校验通过后即可正常触发额度冻结。
调用示例参考：

import PayHere from '@payhere/payhere-mobilesdk-reactnative';

// 预审批（支付冻结）请求参数
const authRequestParams = {
  sandbox: true, // 测试环境填true，生产填false
  merchantId: "你的商户ID",
  merchantSecret: "你的商户密钥",
  notifyUrl: "你的回调地址",
  orderId: "订单唯一标识",
  items: "支付冻结订单描述",
  amount: 100.00, // 需冻结的金额
  currency: "LKR",
  firstName: "用户姓名",
  phone: "用户手机号",
  email: "用户邮箱"
};

// 发起请求
PayHere.preApprove(authRequestParams,
  (successResponse) => {
    // 冻结成功处理，获取授权ID后续用于扣款
    console.log("支付冻结成功", successResponse);
  },
  (errorResponse) => {
    // 冻结失败处理
    console.log("支付冻结失败", errorResponse);
  }
);

方案2：封装WebView复用现有Web端能力 #

如果预审批接口无法匹配你需要的Authorize API特殊参数要求，可直接在React Native中引入react-native-webview组件，加载已适配移动端的Web端Authorize API支付页面，通过JS注入和消息通信实现RN端与Web端的交互，完成支付冻结流程：
基础实现示例：

import { WebView } from 'react-native-webview';
import { View } from 'react-native';

const PayAuthorizeScreen = () => {
  const handleWebMessage = (event) => {
    const { type, data } = JSON.parse(event.nativeEvent.data);
    if(type === 'AUTH_SUCCESS') {
      // 处理支付冻结成功逻辑
      console.log('冻结成功', data);
    } else if(type === 'AUTH_FAIL') {
      // 处理支付冻结失败逻辑
      console.log('冻结失败', data);
    }
  };

  return (
    <View style={{flex: 1}}>
      <WebView
        source={{ uri: '你的Web端支付冻结页面地址' }}
        onMessage={handleWebMessage}
        javaScriptEnabled={true}
        domStorageEnabled={true}
      />
    </View>
  );
};

export default PayAuthorizeScreen;

内容的提问来源于stack exchange，提问作者Shenith Sandeepa