React Native 的寶支付組件 @uiw/react-native-alipay 使用

基於 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 + appid，appid 爲支付寶分配給開發者的應用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 # 安裝依賴

相關鏈接

• 支付寶：生成祕鑰指南
• 支付寶：SDK 下載地址，當前使用的是 AlipaySDK 15.7.9
• 支付寶：客戶端調試工具及使用教程
• 支付寶：支付，接入前準備
• 支付寶：完整版受權 SDK 調用方法
• 支付寶：異步通知錯誤碼: IllRet