1 Star 0 Fork 9

闫波 / react-native-alipay

forked from uiw / react-native-alipay 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

@uiw/react-native-alipay

NPM Version David

基于 React Native 的宝支付插件,支持 iOS/Android。适用于商家在 App 应用中集成支付宝支付功能,商家 APP 调用支付宝提供的 SDK,SDK 再调用支付宝 APP 内的支付模块。如果用户已安装支付宝APP,商家APP会跳转到支付宝中完成支付,支付完后跳回到商家 APP 内,最后展示支付结果。如果用户没有安装支付宝 APP,商家 APP 内会调起支付宝网页支付收银台,用户登录支付宝账户,支付完后展示支付结果。完整实例 Example | 完整的接口文档

注意事项

  1. Android:支持2.3及以上的系统版本运行。
  2. iOS:iOS 6.0以上(包含iOS 6.0)。
  3. 支持手机系统:iOS(苹果)、Android(安卓)。
  4. 调试请注意 支付宝接入应用必须 已审核通过 状态。
  5. 支付宝开放平台-管理中心,签约 APP支付APP支付宝登录 功能。
  6. 适用于 react-native >= 0.60+ 低版本未测试。
  7. AlipaySDK 15.7.7 已更新到最新的支付宝 SDK 版本。

安装依赖

yarn add @uiw/react-native-alipay
# react-native version >= 0.60+
$ cd ios && pod install

API

Alipay.alipay 支付

Alipay.alipay: (payInfo: string) => Promise<OrderResult>;

  • ⚠️ 注意支付成功返回结果是一个字符串,返回内容
  • ⚠️ 支付宝需要设置 Scheme 和 iOS添加原生代码,才能支持支付和回弹商家APP的功能
  • ⚠️ 支付宝 管理中心-支付宝开放平台 需要签约 APP支付
import Alipay from '@uiw/react-native-alipay';

// 设置 支付宝 URL Schemes,要表述他是宇宙唯一性,可以使用 `bundle Identifier`
// scheme = `alipay` + `APPID`,`APPID` 为支付宝分配给开发者的应用ID
Alipay.setAlipayScheme(scheme);
// ⚠️ 目前不可用,设置支付宝沙箱环境,仅 Android 支持
// Alipay.setAlipaySandbox(isSandbox);

async function aliPay() {
  // 支付宝端支付
  // payInfo 是后台拼接好的支付参数
  // return_url=
  const payInfo = 'alipay_sdk=alipay-sdk-java-dynamicVersionNo&app_id=2021001172656340&biz_content=%7B%22out_trade_no%22%3A%221111112222222%22%2C%22total_amount%22%3A%220.01%22%2C%22subject%22%3A%221234%22%2C%22product_code%22%3A%22QUICK_MSECURITY_PAY%22%7D&charset=UTF-8&format=json&method=alipay.trade.app.pay&notify_url=http%3A%2F%2Fane.boshu.ltd%2Fowner%2Fpay%2Fapi%2FownerPay%2Fcallback&sign=oUQmGtkv8mrhJ0YwHl9%2FfxMcoLACWuSFKiMTC4Id8nc%2FZVvDQ6MLQq5hhtEN03Qn1%2BAtzTAaofE8nNixdroxOek2l5YtOAcYcXVYlJIyogN%2B22erN2NpDTWJ7tQTKgYFDJLRiG0DZJaxfADhUUF6UR9kdA8omoXKLDlP17ZPUs5Jr4aKv5HJtH5C53ui7PbmyWYg934L4UDC2F%2F9pPQlRwwDeE1SAaV3HW9Dt83kK52o8%2FlChXdotbFdAvH0d4qYGhpEYU5sepj9xiOMyL9aC4pMXW9INYLLGbvtqtlRchZTAfH5yji6nqqQm9KKMmcVrWdBDLyjFVNpejq1UjbJBw%3D%3D&sign_type=RSA2&timestamp=2020-07-09+12%3A16%3A16&version=1.0';
  const resule = await Alipay.alipay(payInfo);
  console.log('alipay:resule-->>>', resule);
}

订单详情 payInfo 编码前的数据

alipay_sdk=alipay-sdk-java-dynamicVersionNo&app_id=xxxxxxxxxxxxx&biz_content={ "out_trade_no":"123123123123123", "total_amount":"0.01", "subject":"1234", "product_code":"QUICK_MSECURITY_PAY" }&charset=UTF-8&format=json&method=alipay.trade.app.pay&notify_url=http://ane.boshu.ltd/owner/pay/api/ownerPay/callback&return_url=uiwjspay://&sign=re/+2SICQggOUjfxl7MtP/qzir2e+LdH4m+02gDcw0fkByO5MqXW/9bmXw+c4RMqo835OAjMZs7s966ZuDx2PB+hO0tJ/bzdHLLqYlBeCcETkrfwRx+AFZNgzsCn75eRCA7GONH35BpfSeGkQUZ+vNXftqd6hWaa7m/MhQYrjQcV98IVJM+UR67Gj68c+LM586cnk0+rbj8zoos6tCvN8c3xx5UaCobzw4Ogf0PWZ7PZROTU9w2gtoxFfOC5d5slN3laaAXVjAxSf9JCNs8q95fDbzpbmstQOuPgGHkASkd/beH0F8eqTVv8gW1ZTo5v/d/E2wSDGV1DciaEnCroTw==&sign_type=RSA2&timestamp=2020-07-09 09:50:41&version=1.0

订单详情 payInfo 编码的数据

alipay_sdk=alipay-sdk-java-dynamicVersionNo&app_id=xxxxxxxxxxxxx&biz_content=%7B+%22out_trade_no%22%3A%22123123123123123%22%2C+%22total_amount%22%3A%220.01%22%2C+%22subject%22%3A%221234%22%2C+%22product_code%22%3A%22QUICK_MSECURITY_PAY%22+%7D&charset=UTF-8&format=json&method=alipay.trade.app.pay&notify_url=http%3A%2F%2Fane.boshu.ltd%2Fowner%2Fpay%2Fapi%2FownerPay%2Fcallback&return_url=uiwjspay%3A%2F%2F&sign=re%2F%2B2SICQggOUjfxl7MtP%2Fqzir2e%2BLdH4m%2B02gDcw0fkByO5MqXW%2F9bmXw%2Bc4RMqo835OAjMZs7s966ZuDx2PB%2BhO0tJ%2FbzdHLLqYlBeCcETkrfwRx%2BAFZNgzsCn75eRCA7GONH35BpfSeGkQUZ%2BvNXftqd6hWaa7m%2FMhQYrjQcV98IVJM%2BUR67Gj68c%2BLM586cnk0%2Brbj8zoos6tCvN8c3xx5UaCobzw4Ogf0PWZ7PZROTU9w2gtoxFfOC5d5slN3laaAXVjAxSf9JCNs8q95fDbzpbmstQOuPgGHkASkd%2FbeH0F8eqTVv8gW1ZTo5v%2Fd%2FE2wSDGV1DciaEnCroTw%3D%3D&sign_type=RSA2&timestamp=2020-07-09+09%3A50%3A41&version=1.0
  • ⚠️ 后台 SDK 根据所有数据生成 sign,建议通过 API 拿到这个数据,拼接数据会报错。
  • ⚠️ out_trade_no 订单 id 和 sign 签名 是唯一的,每次不一样,需要后台生成。

支付返回结果,支付宝返回结果参数说明

{ 
  "result": "{\"alipay_trade_app_pay_response\":{\"code\":\"10000\",\"msg\":\"Success\",\"app_id\":\"2021001172656340\",\"auth_app_id\":\"2021001172656340\",\"charset\":\"UTF-8\",\"timestamp\":\"2020-07-08 21:30:14\",\"out_trade_no\":\"123123213123214\",\"total_amount\":\"0.01\",\"trade_no\":\"2020070822001414841426413774\",\"seller_id\":\"2088421915791034\"},\"sign\":\"LY7wCsNLp+QnDqCq6VelY/RvyK7ZGY8wsXoKvS+Or7JjONLDUx5P6lDgqRKkpkng7br3y6GZzfGKaZ88Tf4eMnBMKyqU+huR2Um47xUxP383njvHlxuQZsSTLQZRswy4wmb/fPkFfvyH6Or6+oj0eboePOTu63bNr+h03w0QnP4znuHpfRuoVgWpsYh/6B1DL+4xfWRKJ21zm1SV9Feo9RWqnyTaGZyFVi6IKge0dUCYs9hXju95fOUVUOx5YflOFtSEnZafY9Ls4FCRQE1ANkjaKiKIE0+c4c4sEVEf/9Dwh88N+aSQOoLT+AV4RpjMoA8hF2k+vv2OKNeqr6SYGQ==\",\"sign_type\":\"RSA2\"}",
  "resultStatus": "9000",
  "memo": ""
}

Alipay.authInfo 登录授权

Alipay.authInfo: (authInfoStr: string) => Promise<AuthResult>;

  • ⚠️ 注意授权成功返回结果是一个字符串,返回内容
  • ⚠️ 支付宝需要设置 Scheme 和 iOS添加原生代码,才能支持验证回弹商家APP的功能
  • ⚠️ 支付宝 管理中心-支付宝开放平台 需要签约 APP支付宝登录
import Alipay from '@uiw/react-native-alipay';

// 设置 支付宝 URL Schemes,要表述他是宇宙唯一性,可以使用 `bundle Identifier`
// scheme = `alipay` + `APPID`,`APPID` 为支付宝分配给开发者的应用ID
Alipay.setAlipayScheme(scheme);

async function authInfo() {
  // 支付宝端授权验证
  // authInfoStr 是后台拼接好的验证参数
  const authInfoStr = 'app_name=mc&auth_type=AUTHACCOUNT&apiname=com.alipay.account.auth&biz_type=openservice&product_id=APP_FAST_LOGIN&scope=kuaijie&pid=2088421915791034&target_id=15946456110003465&app_id=2021001172656340&sign_type=RSA2&sign=keluG28qbbLwAcSDI4VmCNOGHJoF3xgpVeqXu1nCBCYo%2FlYYGe00fTfV9L4G73Sk7%2B4IwK%2BZV8IL%2F04cVtk6SR74lKAR3rYOoUdQ09ZrZFuQoUkO0vekajhp75IDQIg6PedCyY0SjFTqrHlH%2FImscBwitxrlSc9YbN7uW0gY34K8t7v8NhDoqzKJeoIz43UxF5U1DpUA1ISBVxwO7du1t6rYltsRhReayPS3hnvmwYSKQZUEgBvJ%2BT2XdyCaz%2FdGV907lYagPp1Oxkoaj%2FvW5NjNsRnid7vH944CoFj9XtBK%2FNTk2tBPTHFxYRQTEG1PkgkBohGpAWOFGGOuapH0ag%3D%3D';
  const resule = await Alipay.authInfo(authInfoStr);
  // resule => success=true&auth_code=9c11732de44f4f1790b63978b6fbOX53&result_code=200&alipay_open_id=20881001757376426161095132517425&user_id=2088003646494707
  console.log('authInfo:resule-->>>', resule);
}

授权返回结果,支付宝返回结果参数说明

{
  "resultStatus": "9000",
  "memo": "处理成功",
  "result": "success=true&result_code=200&app_id=202100117265&auth_code=8b6e5581b85WX84&scope=kuaijie&alipay_open_id=20881029919664670&user_id=20880025&target_id=15946456110003465"
}

Alipay.getVersion 获取 SDK 版本

Alipay.getVersion: () => Promise<string>;

import Alipay from '@uiw/react-native-alipay';

async function getVersion() {
  const version = await Alipay.getVersion();
  console.log('version:', version);
}

支付宝返回应用 iOS 设置

  • ⚠️ Android 端不需要做任何设置。
  • ⚠️ 如果用户从 支付宝App 跳转到 商家APP,是通过系统功能切换,而不是通过 支付宝APP 功能键返回 商家APP,回调函数是不起作用的,可通过 AppState.addEventListener 监听事件请求后台 API,来优化这一用户体验。
  1. 在代码中设置支付宝 URL Schemes,下面实例 uiwjspay 是定义的 scheme,你也可以定义为 alipay + appidappid 为支付宝分配给开发者的应用ID,用来表述 scheme 唯一性。
Alipay.setAlipayScheme('uiwjspay');
  1. 在请求支付的 payInfo 中必须包含 return_url=uiwjspay://return_url 的值为定义的 scheme => uiwjspay://,才会返回支付宝订单支付状态结果
// payInfo 是后台拼接好的支付参数,这个参数必须包含 `return_url=uiwjspay://`
Alipay.alipay(payInfo, (res)=>console.log(res))
  1. 用的 URL Schemes 列为白名单,在 ios/<应用名称>/Info.plist 中添加
<key>LSApplicationQueriesSchemes</key>
<array>
  <string>alipay</string>
</array>
<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleTypeRole</key>
    <string>Editor</string>
    <key>CFBundleURLName</key>
    <string></string>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>uiwjspay</string>
    </array>
  </dict>
</array>
  1. 修改 ios/<应用名称>/AppDelegate.m 添加下列代码:
#import <React/RCTLinkingManager.h>

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
  return [RCTLinkingManager application:application openURL:url
                      sourceApplication:sourceApplication annotation:annotation];
}

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey, id> *)options
{
  return [RCTLinkingManager application:application openURL:url options:options];
}

命令测试

  • iOS: xcrun simctl openurl booted uiwjspay://
  • Android:adb shell am start -W -a android.intent.action.VIEW -d "uiwjspay://test/router" com.uiwjspay

错误处理

[NetworkInfo] Signal strength query returned error: Error Domain=NSPOSIXErrorDomain Code=13 "Permission denied", descriptor: <CTServiceDescriptor 0x283317100, domain=1, instance=1>

Product -> Scheme -> Edit Scheme -> Run -> Arguments -> Environment Variables 添加 OS_ACTIVITY_MODE disable

其它

当前工程基于 @brodybits/create-react-native-module 初始化。

npx create-react-native-module --package-identifier com.uiwjs --object-class-name RNAlipay --generate-example Alipay --example-react-native-version 0.63.0 --module-name @uiw/react-native-alipay --github-account uiwjs --author-name "Kenny Wong" --author-email "wowohoo@qq.com"

开发

cd example   # 进入实例 example 工程,根目录不需要安装,会引发错误
yarn install # 安装依赖

cd ios     # 进入 example/ios 目录安装依赖
pod instll # 安装依赖

相关连接

MIT License Copyright (c) 2020 uiw Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

基于 React Native 的宝支付插件,已更新到最新的支付宝 SDK 版本,支持Android/iOS。 展开 收起
JavaScript
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/yanbo0621/react-native-alipay.git
git@gitee.com:yanbo0621/react-native-alipay.git
yanbo0621
react-native-alipay
react-native-alipay
master

搜索帮助

14c37bed 8189591 565d56ea 8189591