2020-07-24 01:38:57 +08:00
|
|
|
|
<!doctype html>
|
|
|
|
|
|
<html class="default no-js">
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
|
|
|
<title>React Native Alipay</title>
|
|
|
|
|
|
<meta name="description" content="Documentation for React Native Alipay">
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
|
|
<link rel="stylesheet" href="assets/css/main.css">
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<header>
|
|
|
|
|
|
<div class="tsd-page-toolbar">
|
|
|
|
|
|
<div class="container">
|
|
|
|
|
|
<div class="table-wrap">
|
|
|
|
|
|
<div class="table-cell" id="tsd-search" data-index="assets/js/search.json" data-base=".">
|
|
|
|
|
|
<div class="field">
|
|
|
|
|
|
<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
|
|
|
|
|
|
<input id="tsd-search-field" type="text" />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<ul class="results">
|
|
|
|
|
|
<li class="state loading">Preparing search index...</li>
|
|
|
|
|
|
<li class="state failure">The search index is not available</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
<a href="index.html" class="title">React Native Alipay</a>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="table-cell" id="tsd-widgets">
|
|
|
|
|
|
<div id="tsd-filter">
|
|
|
|
|
|
<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
|
|
|
|
|
|
<div class="tsd-filter-group">
|
|
|
|
|
|
<div class="tsd-select" id="tsd-filter-visibility">
|
|
|
|
|
|
<span class="tsd-select-label">All</span>
|
|
|
|
|
|
<ul class="tsd-select-list">
|
|
|
|
|
|
<li data-value="public">Public</li>
|
|
|
|
|
|
<li data-value="protected">Public/Protected</li>
|
|
|
|
|
|
<li data-value="private" class="selected">All</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<input type="checkbox" id="tsd-filter-inherited" checked />
|
|
|
|
|
|
<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
|
|
|
|
|
|
<input type="checkbox" id="tsd-filter-only-exported" />
|
|
|
|
|
|
<label class="tsd-widget" for="tsd-filter-only-exported">Only exported</label>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="tsd-page-title">
|
|
|
|
|
|
<div class="container">
|
|
|
|
|
|
<ul class="tsd-breadcrumb">
|
2020-07-24 09:05:19 +08:00
|
|
|
|
<li>
|
|
|
|
|
|
<a href="globals.html">Globals</a>
|
|
|
|
|
|
</li>
|
2020-07-24 01:38:57 +08:00
|
|
|
|
</ul>
|
|
|
|
|
|
<h1>React Native Alipay</h1>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</header>
|
|
|
|
|
|
<div class="container container-main">
|
|
|
|
|
|
<div class="row">
|
|
|
|
|
|
<div class="col-8 col-content">
|
|
|
|
|
|
<div class="tsd-panel tsd-typography">
|
2020-08-01 14:44:41 +08:00
|
|
|
|
<p align="center">
|
2020-08-01 14:46:18 +08:00
|
|
|
|
<a href="https://uiwjs.github.io/react-native-alipay/">
|
|
|
|
|
|
<img src="https://user-images.githubusercontent.com/1680273/89095947-f0046900-d404-11ea-83ec-2408267efaa7.png" height="100" />
|
|
|
|
|
|
</a>
|
2020-08-01 14:45:22 +08:00
|
|
|
|
<h1 align="center">@uiw/react-native-alipay</h1>
|
2020-08-01 14:44:41 +08:00
|
|
|
|
<p>
|
2020-08-01 19:18:09 +08:00
|
|
|
|
<p><a href="https://npmjs.org/package/@uiw/react-native-alipay"><img src="https://img.shields.io/npm/v/@uiw/react-native-alipay.svg" alt="NPM Version"></a>
|
|
|
|
|
|
<img src="https://img.shields.io/david/peer/uiwjs/react-native-alipay" alt="David"></p>
|
2020-08-01 14:44:41 +08:00
|
|
|
|
<p>基于 React Native 的宝支付插件，支持 iOS/Android。适用于商家在 App 应用中集成支付宝支付功能，商家 APP 调用支付宝提供的 SDK，SDK 再调用支付宝 APP 内的支付模块。如果用户已安装支付宝APP，商家APP会跳转到支付宝中完成支付，支付完后跳回到商家 APP 内，最后展示支付结果。如果用户没有安装支付宝 APP，商家 APP 内会调起支付宝网页支付收银台，用户登录支付宝账户，支付完后展示支付结果。完整实例 <a href="./example">Example</a> | <a href="https://uiwjs.github.io/react-native-alipay/">完整的接口文档</a></p>
|
|
|
|
|
|
<p><img src="https://gw.alipayobjects.com/zos/skylark-tools/public/files/c0aa8379f5f57c55f1e5bf25e6f426d1.png" alt=""></p>
|
|
|
|
|
|
<p><img src="https://gw.alipayobjects.com/zos/skylark-tools/public/files/2454bffde14f428b2eeb2bfb6aa28d6b.png" alt=""></p>
|
|
|
|
|
|
<a href="#注意事项" id="注意事项" style="color: inherit; text-decoration: none;">
|
|
|
|
|
|
<h2>注意事项</h2>
|
|
|
|
|
|
</a>
|
|
|
|
|
|
<ol>
|
|
|
|
|
|
<li>Android：支持2.3及以上的系统版本运行。</li>
|
|
|
|
|
|
<li>iOS：iOS 6.0以上(包含iOS 6.0)。</li>
|
|
|
|
|
|
<li>支持手机系统：iOS（苹果）、Android（安卓）。</li>
|
|
|
|
|
|
<li>调试请注意 支付宝接入应用必须 <code>已审核通过</code> 状态。</li>
|
|
|
|
|
|
<li>支付宝开放平台-管理中心，签约 <code>APP支付</code> 和 <code>APP支付宝登录</code> 功能。</li>
|
|
|
|
|
|
<li>适用于 <code>react-native >= 0.60+</code> 低版本未测试。</li>
|
|
|
|
|
|
<li>AlipaySDK 15.7.7 已更新到最新的支付宝 SDK 版本。</li>
|
2021-01-11 14:58:53 +08:00
|
|
|
|
<li><code>URL Schemes</code> 要以字母开头不能为纯数字。</li>
|
2020-08-01 14:44:41 +08:00
|
|
|
|
</ol>
|
|
|
|
|
|
<a href="#安装依赖" id="安装依赖" style="color: inherit; text-decoration: none;">
|
|
|
|
|
|
<h2>安装依赖</h2>
|
|
|
|
|
|
</a>
|
|
|
|
|
|
<pre><code class="language-bash">yarn add @uiw/react-native-alipay
|
2020-07-24 01:38:57 +08:00
|
|
|
|
<span class="hljs-comment"># react-native version >= 0.60+</span>
|
|
|
|
|
|
$ <span class="hljs-built_in">cd</span> ios && pod install</code></pre>
|
2020-08-01 14:44:41 +08:00
|
|
|
|
<a href="#api" id="api" style="color: inherit; text-decoration: none;">
|
|
|
|
|
|
<h2>API</h2>
|
|
|
|
|
|
</a>
|
|
|
|
|
|
<a href="#alipayalipay-支付" id="alipayalipay-支付" style="color: inherit; text-decoration: none;">
|
|
|
|
|
|
<h3><code>Alipay.alipay</code> 支付</h3>
|
|
|
|
|
|
</a>
|
|
|
|
|
|
<blockquote>
|
|
|
|
|
|
<p><code>Alipay.alipay: (payInfo: string) => Promise<OrderResult>;</code></p>
|
|
|
|
|
|
</blockquote>
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
<li>⚠️ 注意支付成功返回结果是一个字符串，<a href="https://github.com/uiwjs/react-native-alipay/blob/74140a294e850884ed1851b9d2c2d2c00ee75003/index.d.ts#L50-L74">返回内容</a> </li>
|
|
|
|
|
|
<li>⚠️ 支付宝需要设置 <code>Scheme</code> 和 iOS添加原生代码，才能支持支付和<a href="#%E6%94%AF%E4%BB%98%E5%AE%9D%E8%BF%94%E5%9B%9E%E5%BA%94%E7%94%A8-ios-%E8%AE%BE%E7%BD%AE">回弹商家APP</a>的功能</li>
|
|
|
|
|
|
<li>⚠️ 支付宝 <code>管理中心-支付宝开放平台</code> 需要签约 <a href="https://opendocs.alipay.com/open/200/105310#%E6%B7%BB%E5%8A%A0%E5%BA%94%E7%94%A8%E5%8A%9F%E8%83%BD"><code>APP支付</code></a></li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
<pre><code class="language-javascript"><span class="hljs-keyword">import</span> Alipay <span class="hljs-keyword">from</span> <span class="hljs-string">'@uiw/react-native-alipay'</span>;
|
2020-07-24 01:38:57 +08:00
|
|
|
|
|
|
|
|
|
|
<span class="hljs-comment">// 设置 支付宝 URL Schemes，要表述他是宇宙唯一性，可以使用 `bundle Identifier`</span>
|
|
|
|
|
|
<span class="hljs-comment">// scheme = `alipay` + `APPID`，`APPID` 为支付宝分配给开发者的应用ID</span>
|
|
|
|
|
|
Alipay.setAlipayScheme(scheme);
|
|
|
|
|
|
<span class="hljs-comment">// ⚠️ 目前不可用，设置支付宝沙箱环境，仅 Android 支持</span>
|
|
|
|
|
|
<span class="hljs-comment">// Alipay.setAlipaySandbox(isSandbox);</span>
|
|
|
|
|
|
|
|
|
|
|
|
<span class="hljs-keyword">async</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">aliPay</span>(<span class="hljs-params"></span>) </span>{
|
|
|
|
|
|
<span class="hljs-comment">// 支付宝端支付</span>
|
|
|
|
|
|
<span class="hljs-comment">// payInfo 是后台拼接好的支付参数</span>
|
|
|
|
|
|
<span class="hljs-comment">// return_url=</span>
|
|
|
|
|
|
<span class="hljs-keyword">const</span> payInfo = <span class="hljs-string">'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'</span>;
|
|
|
|
|
|
<span class="hljs-keyword">const</span> resule = <span class="hljs-keyword">await</span> Alipay.alipay(payInfo);
|
|
|
|
|
|
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'alipay:resule-->>>'</span>, resule);
|
|
|
|
|
|
}</code></pre>
|
2020-08-01 14:44:41 +08:00
|
|
|
|
<p>订单详情 <a href="https://opendocs.alipay.com/open/204/105295#%E5%BF%AB%E6%8D%B7%E8%AE%A2%E5%8D%95%E6%94%AF%E4%BB%98%20iOS"><code>payInfo</code></a> 编码前的数据</p>
|
|
|
|
|
|
<pre><code class="language-bash">alipay_sdk=alipay-sdk-java-dynamicVersionNo&app_id=xxxxxxxxxxxxx&biz_content={ <span class="hljs-string">"out_trade_no"</span>:<span class="hljs-string">"123123123123123"</span>, <span class="hljs-string">"total_amount"</span>:<span class="hljs-string">"0.01"</span>, <span class="hljs-string">"subject"</span>:<span class="hljs-string">"1234"</span>, <span class="hljs-string">"product_code"</span>:<span class="hljs-string">"QUICK_MSECURITY_PAY"</span> }&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</code></pre>
|
|
|
|
|
|
<p>订单详情 <code>payInfo</code> 编码的数据</p>
|
|
|
|
|
|
<pre><code class="language-bash">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</code></pre>
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
<li>⚠️ 后台 SDK 根据所有数据生成 <code>sign</code>，建议通过 API 拿到这个数据，拼接数据会报错。 </li>
|
|
|
|
|
|
<li>⚠️ <code>out_trade_no</code> 订单 id 和 <code>sign</code> 签名 是唯一的，每次不一样，需要后台生成。 </li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
<p>支付返回结果，支付宝<a href="https://github.com/uiwjs/react-native-alipay/blob/74140a294e850884ed1851b9d2c2d2c00ee75003/index.d.ts#L50-L74">返回结果参数说明</a>：</p>
|
|
|
|
|
|
<pre><code class="language-json">{
|
2020-07-24 01:38:57 +08:00
|
|
|
|
<span class="hljs-attr">"result"</span>: <span class="hljs-string">"{\"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\"}"</span>,
|
|
|
|
|
|
<span class="hljs-attr">"resultStatus"</span>: <span class="hljs-string">"9000"</span>,
|
|
|
|
|
|
<span class="hljs-attr">"memo"</span>: <span class="hljs-string">""</span>
|
|
|
|
|
|
}</code></pre>
|
2020-08-01 14:44:41 +08:00
|
|
|
|
<a href="#alipayauthinfo-登录授权" id="alipayauthinfo-登录授权" style="color: inherit; text-decoration: none;">
|
|
|
|
|
|
<h3><code>Alipay.authInfo</code> 登录授权</h3>
|
|
|
|
|
|
</a>
|
|
|
|
|
|
<blockquote>
|
|
|
|
|
|
<p><code>Alipay.authInfo: (authInfoStr: string) => Promise<AuthResult></code>;</p>
|
|
|
|
|
|
</blockquote>
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
<li>⚠️ 注意授权成功返回结果是一个字符串，<a href="https://github.com/uiwjs/react-native-alipay/blob/74140a294e850884ed1851b9d2c2d2c00ee75003/index.d.ts#L89-L113">返回内容</a> </li>
|
|
|
|
|
|
<li>⚠️ 支付宝需要设置 <code>Scheme</code> 和 iOS添加原生代码，才能支持验证<a href="#%E6%94%AF%E4%BB%98%E5%AE%9D%E8%BF%94%E5%9B%9E%E5%BA%94%E7%94%A8-ios-%E8%AE%BE%E7%BD%AE">回弹商家APP</a>的功能</li>
|
|
|
|
|
|
<li>⚠️ 支付宝 <code>管理中心-支付宝开放平台</code> 需要签约 <a href="https://opendocs.alipay.com/open/200/105310#%E6%B7%BB%E5%8A%A0%E5%BA%94%E7%94%A8%E5%8A%9F%E8%83%BD"><code>APP支付宝登录</code></a></li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
<pre><code class="language-javascript"><span class="hljs-keyword">import</span> Alipay <span class="hljs-keyword">from</span> <span class="hljs-string">'@uiw/react-native-alipay'</span>;
|
2020-07-24 01:38:57 +08:00
|
|
|
|
|
|
|
|
|
|
<span class="hljs-comment">// 设置 支付宝 URL Schemes，要表述他是宇宙唯一性，可以使用 `bundle Identifier`</span>
|
|
|
|
|
|
<span class="hljs-comment">// scheme = `alipay` + `APPID`，`APPID` 为支付宝分配给开发者的应用ID</span>
|
|
|
|
|
|
Alipay.setAlipayScheme(scheme);
|
|
|
|
|
|
|
|
|
|
|
|
<span class="hljs-keyword">async</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">authInfo</span>(<span class="hljs-params"></span>) </span>{
|
|
|
|
|
|
<span class="hljs-comment">// 支付宝端授权验证</span>
|
|
|
|
|
|
<span class="hljs-comment">// authInfoStr 是后台拼接好的验证参数</span>
|
|
|
|
|
|
<span class="hljs-keyword">const</span> authInfoStr = <span class="hljs-string">'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'</span>;
|
|
|
|
|
|
<span class="hljs-keyword">const</span> resule = <span class="hljs-keyword">await</span> Alipay.authInfo(authInfoStr);
|
|
|
|
|
|
<span class="hljs-comment">// resule => success=true&auth_code=9c11732de44f4f1790b63978b6fbOX53&result_code=200&alipay_open_id=20881001757376426161095132517425&user_id=2088003646494707</span>
|
|
|
|
|
|
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'authInfo:resule-->>>'</span>, resule);
|
|
|
|
|
|
}</code></pre>
|
2020-08-01 14:44:41 +08:00
|
|
|
|
<p>授权返回结果，支付宝<a href="https://github.com/uiwjs/react-native-alipay/blob/74140a294e850884ed1851b9d2c2d2c00ee75003/index.d.ts#L89-L113">返回结果参数说明</a>：</p>
|
|
|
|
|
|
<pre><code class="language-json">{
|
2020-07-24 01:38:57 +08:00
|
|
|
|
<span class="hljs-attr">"resultStatus"</span>: <span class="hljs-string">"9000"</span>,
|
|
|
|
|
|
<span class="hljs-attr">"memo"</span>: <span class="hljs-string">"处理成功"</span>,
|
|
|
|
|
|
<span class="hljs-attr">"result"</span>: <span class="hljs-string">"success=true&result_code=200&app_id=202100117265&auth_code=8b6e5581b85WX84&scope=kuaijie&alipay_open_id=20881029919664670&user_id=20880025&target_id=15946456110003465"</span>
|
|
|
|
|
|
}</code></pre>
|
2020-08-01 14:44:41 +08:00
|
|
|
|
<a href="#alipaygetversion-获取-sdk-版本" id="alipaygetversion-获取-sdk-版本" style="color: inherit; text-decoration: none;">
|
|
|
|
|
|
<h3><code>Alipay.getVersion</code> 获取 SDK 版本</h3>
|
|
|
|
|
|
</a>
|
|
|
|
|
|
<blockquote>
|
|
|
|
|
|
<p><code>Alipay.getVersion: () => Promise<string>;</code></p>
|
|
|
|
|
|
</blockquote>
|
|
|
|
|
|
<pre><code class="language-js"><span class="hljs-keyword">import</span> Alipay <span class="hljs-keyword">from</span> <span class="hljs-string">'@uiw/react-native-alipay'</span>;
|
2020-07-24 01:38:57 +08:00
|
|
|
|
|
|
|
|
|
|
<span class="hljs-keyword">async</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getVersion</span>(<span class="hljs-params"></span>) </span>{
|
|
|
|
|
|
<span class="hljs-keyword">const</span> version = <span class="hljs-keyword">await</span> Alipay.getVersion();
|
|
|
|
|
|
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'version:'</span>, version);
|
|
|
|
|
|
}</code></pre>
|
2020-08-01 14:44:41 +08:00
|
|
|
|
<a href="#支付宝返回应用-ios-设置" id="支付宝返回应用-ios-设置" style="color: inherit; text-decoration: none;">
|
|
|
|
|
|
<h2>支付宝返回应用 iOS 设置</h2>
|
|
|
|
|
|
</a>
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
<li>⚠️ Android 端不需要做任何设置。</li>
|
|
|
|
|
|
<li>⚠️ 如果用户从 <code>支付宝App</code> 跳转到 <code>商家APP</code>，是通过系统功能切换，而不是通过 <code>支付宝APP</code> 功能键返回 <code>商家APP</code>，回调函数是不起作用的，可通过 <a href="https://github.com/uiwjs/react-native-alipay/blob/5daea87bf0af05d60d0ae9e4c04e1e2d1a6e4273/example/App.js#L8-L24"><code>AppState.addEventListener</code></a> 监听事件请求后台 API，来优化这一用户体验。</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
<ol>
|
|
|
|
|
|
<li>在代码中设置支付宝 <a href="https://github.com/uiwjs/react-native-alipay/blob/74140a294e850884ed1851b9d2c2d2c00ee75003/example/App.js#L7"><code>URL Schemes</code></a>，下面实例 <a href="https://github.com/uiwjs/react-native-alipay/commit/f6d21b6b7ec7236b195c56281f971092f3c9bb08"><code>uiwjspay</code></a> 是定义的 <code>scheme</code>，你也可以定义为 <code>alipay</code> + <code>appid</code>，<code>appid</code> 为支付宝分配给开发者的应用ID，用来表述 <code>scheme</code> 唯一性。</li>
|
|
|
|
|
|
</ol>
|
|
|
|
|
|
<pre><code class="language-js">Alipay.setAlipayScheme(<span class="hljs-string">'uiwjspay'</span>);</code></pre>
|
|
|
|
|
|
<ol start="2">
|
|
|
|
|
|
<li>在请求支付的 <a href="https://github.com/uiwjs/react-native-alipay/blob/74140a294e850884ed1851b9d2c2d2c00ee75003/example/App.js#L11"><code>payInfo</code></a> 中必须包含 <a href="https://github.com/uiwjs/react-native-alipay/blob/74140a294e850884ed1851b9d2c2d2c00ee75003/example/App.js#L11"><code>return_url=uiwjspay://</code></a>，<code>return_url</code> 的值为定义的 <code>scheme</code> => <code>uiwjspay://</code>，才会返回<a href="https://opendocs.alipay.com/open/204/105301#%E8%BF%94%E5%9B%9E%E7%BB%93%E6%9E%9C%E7%A4%BA%E4%BE%8B%EF%BC%88iOS%7CAndroid%EF%BC%89">支付宝订单支付状态结果</a></li>
|
|
|
|
|
|
</ol>
|
|
|
|
|
|
<pre><code class="language-js"><span class="hljs-comment">// payInfo 是后台拼接好的支付参数，这个参数必须包含 `return_url=uiwjspay://`</span>
|
2020-07-24 01:38:57 +08:00
|
|
|
|
Alipay.alipay(payInfo, <span class="hljs-function">(<span class="hljs-params">res</span>)=></span><span class="hljs-built_in">console</span>.log(res))</code></pre>
|
2020-08-01 14:44:41 +08:00
|
|
|
|
<ol start="3">
|
|
|
|
|
|
<li>用的 <code>URL Schemes</code> 列为白名单，在 <a href="https://github.com/uiwjs/react-native-alipay/blob/74140a294e850884ed1851b9d2c2d2c00ee75003/example/ios/example/Info.plist#L23-L41"><code>ios/<应用名称>/Info.plist</code></a> 中添加</li>
|
|
|
|
|
|
</ol>
|
|
|
|
|
|
<pre><code class="language-xml"><span class="hljs-tag"><<span class="hljs-name">key</span>></span>LSApplicationQueriesSchemes<span class="hljs-tag"></<span class="hljs-name">key</span>></span>
|
2020-07-24 01:38:57 +08:00
|
|
|
|
<span class="hljs-tag"><<span class="hljs-name">array</span>></span>
|
|
|
|
|
|
<span class="hljs-tag"><<span class="hljs-name">string</span>></span>alipay<span class="hljs-tag"></<span class="hljs-name">string</span>></span>
|
|
|
|
|
|
<span class="hljs-tag"></<span class="hljs-name">array</span>></span>
|
|
|
|
|
|
<span class="hljs-tag"><<span class="hljs-name">key</span>></span>CFBundleURLTypes<span class="hljs-tag"></<span class="hljs-name">key</span>></span>
|
|
|
|
|
|
<span class="hljs-tag"><<span class="hljs-name">array</span>></span>
|
|
|
|
|
|
<span class="hljs-tag"><<span class="hljs-name">dict</span>></span>
|
|
|
|
|
|
<span class="hljs-tag"><<span class="hljs-name">key</span>></span>CFBundleTypeRole<span class="hljs-tag"></<span class="hljs-name">key</span>></span>
|
|
|
|
|
|
<span class="hljs-tag"><<span class="hljs-name">string</span>></span>Editor<span class="hljs-tag"></<span class="hljs-name">string</span>></span>
|
|
|
|
|
|
<span class="hljs-tag"><<span class="hljs-name">key</span>></span>CFBundleURLName<span class="hljs-tag"></<span class="hljs-name">key</span>></span>
|
|
|
|
|
|
<span class="hljs-tag"><<span class="hljs-name">string</span>></span><span class="hljs-tag"></<span class="hljs-name">string</span>></span>
|
|
|
|
|
|
<span class="hljs-tag"><<span class="hljs-name">key</span>></span>CFBundleURLSchemes<span class="hljs-tag"></<span class="hljs-name">key</span>></span>
|
|
|
|
|
|
<span class="hljs-tag"><<span class="hljs-name">array</span>></span>
|
|
|
|
|
|
<span class="hljs-tag"><<span class="hljs-name">string</span>></span>uiwjspay<span class="hljs-tag"></<span class="hljs-name">string</span>></span>
|
|
|
|
|
|
<span class="hljs-tag"></<span class="hljs-name">array</span>></span>
|
|
|
|
|
|
<span class="hljs-tag"></<span class="hljs-name">dict</span>></span>
|
|
|
|
|
|
<span class="hljs-tag"></<span class="hljs-name">array</span>></span></code></pre>
|
2020-08-01 14:44:41 +08:00
|
|
|
|
<ol start="4">
|
|
|
|
|
|
<li>修改 <a href="https://github.com/uiwjs/react-native-alipay/blob/74140a294e850884ed1851b9d2c2d2c00ee75003/example/ios/example/AppDelegate.m#L60-L70"><code>ios/<应用名称>/AppDelegate.m</code></a> 添加下列代码：</li>
|
|
|
|
|
|
</ol>
|
|
|
|
|
|
<pre><code class="language-objective-c">#import <React/RCTLinkingManager.h>
|
2020-07-24 01:38:57 +08:00
|
|
|
|
|
|
|
|
|
|
- (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];
|
|
|
|
|
|
}</code></pre>
|
2020-08-01 14:44:41 +08:00
|
|
|
|
<p><strong>命令测试</strong></p>
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
<li>iOS: <code>xcrun simctl openurl booted uiwjspay://</code></li>
|
|
|
|
|
|
<li>Android：<code>adb shell am start -W -a android.intent.action.VIEW -d "uiwjspay://test/router" com.uiwjspay</code></li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
<a href="#错误处理" id="错误处理" style="color: inherit; text-decoration: none;">
|
|
|
|
|
|
<h2>错误处理</h2>
|
|
|
|
|
|
</a>
|
|
|
|
|
|
<pre><code class="language-bash">[NetworkInfo] Signal strength query returned error: Error Domain=NSPOSIXErrorDomain Code=13 <span class="hljs-string">"Permission denied"</span>, descriptor: <CTServiceDescriptor 0x283317100, domain=1, instance=1></code></pre>
|
|
|
|
|
|
<p>在 <code>Product</code> -> <code>Scheme</code> -> <code>Edit Scheme</code> -> <code>Run</code> -> <code>Arguments</code> -> <code>Environment Variables</code> 添加 <code>OS_ACTIVITY_MODE</code> <code>disable</code></p>
|
|
|
|
|
|
<a href="#其它" id="其它" style="color: inherit; text-decoration: none;">
|
|
|
|
|
|
<h2>其它</h2>
|
|
|
|
|
|
</a>
|
|
|
|
|
|
<p>当前工程基于 <a href="https://github.com/brodybits/create-react-native-module">@brodybits/create-react-native-module</a> 初始化。</p>
|
|
|
|
|
|
<pre><code class="language-bash">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 <span class="hljs-string">"Kenny Wong"</span> --author-email <span class="hljs-string">"wowohoo@qq.com"</span></code></pre>
|
|
|
|
|
|
<a href="#开发" id="开发" style="color: inherit; text-decoration: none;">
|
|
|
|
|
|
<h2>开发</h2>
|
|
|
|
|
|
</a>
|
|
|
|
|
|
<pre><code class="language-bash"><span class="hljs-built_in">cd</span> example <span class="hljs-comment"># 进入实例 example 工程，根目录不需要安装，会引发错误</span>
|
2020-07-28 16:56:10 +08:00
|
|
|
|
yarn install <span class="hljs-comment"># 安装依赖</span>
|
|
|
|
|
|
|
|
|
|
|
|
<span class="hljs-built_in">cd</span> ios <span class="hljs-comment"># 进入 example/ios 目录安装依赖</span>
|
|
|
|
|
|
pod instll <span class="hljs-comment"># 安装依赖</span></code></pre>
|
2020-08-01 14:44:41 +08:00
|
|
|
|
<a href="#相关连接" id="相关连接" style="color: inherit; text-decoration: none;">
|
|
|
|
|
|
<h2>相关连接</h2>
|
|
|
|
|
|
</a>
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
<li><a href="https://opendocs.alipay.com/open/291/105971">支付宝：生成秘钥指南</a></li>
|
|
|
|
|
|
<li><a href="https://opendocs.alipay.com/open/54/104509">支付宝：SDK 下载地址，当前使用的是 AlipaySDK 15.7.9</a></li>
|
|
|
|
|
|
<li><a href="https://openclub.alipay.com/club/history/read/7695">支付宝：客户端调试工具及使用教程</a></li>
|
|
|
|
|
|
<li><a href="https://opendocs.alipay.com/open/204/105297/">支付宝：支付，接入前准备</a></li>
|
|
|
|
|
|
<li><a href="https://opendocs.alipay.com/open/218/105325">支付宝：完整版授权 SDK 调用方法</a></li>
|
|
|
|
|
|
<li><a href="https://opensupport.alipay.com/support/problem.htm?ant_source=antsupport">支付宝：异步通知错误码: IllRet</a></li>
|
2020-08-01 20:52:43 +08:00
|
|
|
|
<li><a href="https://github.com/uiwjs/react-native-wechat">@uiw/react-native-wechat</a> 微信支付。</li>
|
2020-08-01 14:44:41 +08:00
|
|
|
|
</ul>
|
2020-07-24 01:38:57 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
|
|
|
|
|
|
<nav class="tsd-navigation primary">
|
|
|
|
|
|
<ul>
|
2020-07-24 09:05:19 +08:00
|
|
|
|
<li class="globals ">
|
|
|
|
|
|
<a href="globals.html"><em>Globals</em></a>
|
|
|
|
|
|
</li>
|
2020-07-24 01:38:57 +08:00
|
|
|
|
</ul>
|
|
|
|
|
|
</nav>
|
|
|
|
|
|
<nav class="tsd-navigation secondary menu-sticky">
|
|
|
|
|
|
<ul class="before-current">
|
2020-07-24 14:01:19 +08:00
|
|
|
|
<li class=" tsd-kind-interface">
|
|
|
|
|
|
<a href="interfaces/authresult.html" class="tsd-kind-icon">Auth<wbr>Result</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class=" tsd-kind-interface">
|
|
|
|
|
|
<a href="interfaces/orderresult.html" class="tsd-kind-icon">Order<wbr>Result</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class=" tsd-kind-interface">
|
|
|
|
|
|
<a href="interfaces/orderresultstr.html" class="tsd-kind-icon">Order<wbr>Result<wbr>Str</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class=" tsd-kind-function">
|
|
|
|
|
|
<a href="globals.html#alipay" class="tsd-kind-icon">alipay</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class=" tsd-kind-function">
|
|
|
|
|
|
<a href="globals.html#authinfo" class="tsd-kind-icon">auth<wbr>Info</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class=" tsd-kind-function">
|
|
|
|
|
|
<a href="globals.html#getversion" class="tsd-kind-icon">get<wbr>Version</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class=" tsd-kind-function">
|
|
|
|
|
|
<a href="globals.html#setalipaysandbox" class="tsd-kind-icon">set<wbr>Alipay<wbr>Sandbox</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class=" tsd-kind-function">
|
|
|
|
|
|
<a href="globals.html#setalipayscheme" class="tsd-kind-icon">set<wbr>Alipay<wbr>Scheme</a>
|
|
|
|
|
|
</li>
|
2020-07-24 01:38:57 +08:00
|
|
|
|
</ul>
|
|
|
|
|
|
</nav>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2020-07-24 10:27:55 +08:00
|
|
|
|
<footer>
|
2020-07-24 01:38:57 +08:00
|
|
|
|
<div class="container">
|
|
|
|
|
|
<h2>Legend</h2>
|
|
|
|
|
|
<div class="tsd-legend-group">
|
2020-07-24 09:05:19 +08:00
|
|
|
|
<ul class="tsd-legend">
|
2020-07-24 14:01:19 +08:00
|
|
|
|
<li class="tsd-kind-property tsd-parent-kind-interface"><span class="tsd-kind-icon">Property</span></li>
|
2020-07-24 09:05:19 +08:00
|
|
|
|
</ul>
|
2020-07-24 01:38:57 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</footer>
|
|
|
|
|
|
<div class="overlay"></div>
|
|
|
|
|
|
<script src="assets/js/main.js"></script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
