【React Native】react-native之集成支付宝支付、微信支付
<h2>一、在使用支付宝支付、微信支付之前导入桥接好的头文件</h2><p> <span style="color: rgba(51, 153, 102, 1)">github地址：<span style="color: rgba(51, 153, 102, 1)">https://github.com/xujianfu/react-native-pay</span></span></p>
<h2>二、集成支付宝支付流程</h2>
<p> RN支付宝需要分别对iOS（Xcode）和安卓（AS）配置，与原生app相比只是将支付操作放在了RN当中。</p>
<p> 流程大同小异，一般都是从后台获取支付字符串，然后传递支付字符串调用支付宝SDK，SDK再调用支付宝的支付模块。如果用户已安装支付宝App，会跳转到支付宝支付。如果用户没有安装支付宝App，商家App内会调起支付宝网页支付收银台，用户登录支付宝账户支付。</p>
<h4> 1、导入AlipaySDK（下载并引入）</h4>
<p> 下载AlipaySDK地址：https://docs.open.alipay.com/54/104509</p>
<h4> 2、iOS（Xcode的配置）</h4>
<p> 1)引入依赖库</p>
<p><img src="https://img2018.cnblogs.com/blog/757139/201906/757139-20190611131909494-1250776828.png" alt="" width="939" height="464"></p>
<p> 2）配置URL Types </p>
<p><img src="https://img2018.cnblogs.com/blog/757139/201906/757139-20190611132215327-1277031547.png" alt="" width="940" height="240"></p>
<h4> 3、创建Alipay.js文件</h4>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">import {
NativeModules
} from </span>'react-native'<span style="color: rgba(0, 0, 0, 1)">;
module.exports </span>= NativeModules.ReactNativePay;</pre>
</div>
<h4> 4、在要支付界面引入Alipay.js文件</h4>
<div class="cnblogs_code">
<pre>import Alipay from './Alipay'<span style="color: rgba(0, 0, 0, 1)">;
export </span><span style="color: rgba(0, 0, 255, 1)">default</span> class App extends Component<Props><span style="color: rgba(0, 0, 0, 1)"> {
render() {
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> (
</span><View style={styles.container}>
<TouchableOpacity onPress={()=><span style="color: rgba(0, 0, 255, 1)">this</span>.aliPayAction("app_id=2015052600090779&biz_content=%7B%22timeout_express%22%3A%2230m%22%2C%22seller_id%22%3A%22%22%2C%22product_code%22%3A%22QUICK_MSECURITY_PAY%22%2C%22total_amount%22%3A%220.02%22%2C%22subject%22%3A%221%22%2C%22body%22%3A%22%E6%88%91%E6%98%AF%E6%B5%8B%E8%AF%95%E6%95%B0%E6%8D%AE%22%2C%22out_trade_no%22%3A%22314VYGIAGG7ZOYY%22%7D&charset=utf-8&method=alipay.trade.app.pay&sign_type=RSA2&timestamp=2016-08-15%2012%3A12%3A15&version=1.0&sign=MsbylYkCzlfYLy9PeRwUUIg9nZPeN9SfXPNavUCroGKR5Kqvx0nEnd3eRmKxJuthNUx4ERCXe552EV9PfwexqW%2B1wbKOdYtDIb4%2B7PL3Pc94RZL0zKaWcaY3tSL89%2FuAVUsQuFqEJdhIukuKygrXucvejOUgTCfoUdwTi7z%2BZzQ%3D")}>
<Text>点击支付</Text>
</TouchableOpacity>
</View>
<span style="color: rgba(0, 0, 0, 1)"> );
}
aliPayAction(payStr) {
Alipay.onAliPay(payStr) .then((message)</span>=><span style="color: rgba(0, 0, 0, 1)">{
console.log(</span>"message" + message); <span style="color: rgba(0, 0, 255, 1)">if</span>(message !== ""<span style="color: rgba(0, 0, 0, 1)">)
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">支付成功的处理</span>
<span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.refs.toast.show(message, DURATION.LENGTH_SHORT);
}) .</span><span style="color: rgba(0, 0, 255, 1)">catch</span>(e=><span style="color: rgba(0, 0, 0, 1)">{
console.log(</span>"e.message" +<span style="color: rgba(0, 0, 0, 1)"> e.message);
</span><span style="color: rgba(0, 0, 255, 1)">if</span>(e.message !== "") <span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.refs.toast.show(e.message, DURATION.LENGTH_SHORT);
</span><span style="color: rgba(0, 0, 255, 1)">if</span>(e.code === '-1' || e.message === '支付失败'<span style="color: rgba(0, 0, 0, 1)">) {
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">支付失败</span>
<span style="color: rgba(0, 0, 0, 1)"> }
})
}
}</span></pre>
</div>
<h2>三、集成微信支付</h2>
<h4> 1、导入微信支付SDK</h4>
<p> 下载微信支付SDK地址：https://pay.weixin.qq.com/wiki/doc/api/app/app.php?chapter=11_1</p>
<h4> 2、具体配置，参考API文档就行，不多做描述了。</h4>
<h4> 3、具体使用</h4>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 微信支付</span>
<span style="color: rgba(0, 0, 0, 1)">wxPayAction(){
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.setState({payInfo:Testing.getTestPay(responseJson.data)});<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">转成payInfo模型</span>
let sign = <span style="color: rgba(0, 0, 255, 1)">this</span>.getPaySignStrMethod(<span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.state.payInfo);
</span><span style="color: rgba(0, 0, 255, 1)">if</span>(sign==<span style="color: rgba(0, 0, 255, 1)">null</span><span style="color: rgba(0, 0, 0, 1)">){
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.refs.toast.show("支付信息请求错误", DURATION.LENGTH_SHORT); <span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)">; }
</span><span style="color: rgba(0, 0, 255, 1)">var</span> params = { partnerId:<span style="color: rgba(0, 0, 255, 1)">this</span>.state.payInfo.partnerId, prepayId:<span style="color: rgba(0, 0, 255, 1)">this</span>.state.payInfo.prepayId, package:<span style="color: rgba(0, 0, 255, 1)">this</span>.state.payInfo.package, nonceStr:<span style="color: rgba(0, 0, 255, 1)">this</span>.state.payInfo.nonceStr, timeStamp:<span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.state.payInfo.timeStamp, sign:sign, }
Pay.onWxPay(params) .then((message)</span>=><span style="color: rgba(0, 0, 0, 1)">{
console.log(</span>"message" +<span style="color: rgba(0, 0, 0, 1)"> message);
</span><span style="color: rgba(0, 0, 255, 1)">if</span>(message !== "") <span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.refs.toast.show(message, DURATION.LENGTH_SHORT);
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">支付成功的处理</span>
}).<span style="color: rgba(0, 0, 255, 1)">catch</span>(e=><span style="color: rgba(0, 0, 0, 1)">{
console.log(</span>"e.message" +<span style="color: rgba(0, 0, 0, 1)"> e.message);
</span><span style="color: rgba(0, 0, 255, 1)">if</span>(e.message !== "") <span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.refs.toast.show(e.message, DURATION.LENGTH_SHORT);
</span><span style="color: rgba(0, 0, 255, 1)">if</span>(e.code === '-1' || e.message === '支付失败'<span style="color: rgba(0, 0, 0, 1)">) {
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">支付失败的处理</span>
<span style="color: rgba(0, 0, 0, 1)"> }
});
}
getPaySignStrMethod</span>=(payInfo)=><span style="color: rgba(0, 0, 0, 1)">{
</span><span style="color: rgba(0, 0, 255, 1)">if</span>(payInfo.appId !== undefined && payInfo.appId !== '' && payInfo.nonceStr !== undefined && payInfo.nonceStr !== '' && payInfo.partnerId !== undefined && payInfo.partnerId !== ''&& payInfo.prepayId !== undefined && payInfo.prepayId !== '' && payInfo.timeStamp !== undefined && payInfo.timeStamp !== ''<span style="color: rgba(0, 0, 0, 1)">) {
</span><span style="color: rgba(0, 0, 255, 1)">return</span> "appid=" + payInfo.appId + "&noncestr=" + payInfo.nonceStr + "&package=" + payInfo.package + "&partnerid=" + payInfo.partnerId + "&prepayid=" + payInfo.prepayId + "&timestamp=" + payInfo.timeStamp + "&key=" +<span style="color: rgba(0, 0, 0, 1)"> C.weChatPayKey;
}</span><span style="color: rgba(0, 0, 255, 1)">else</span><span style="color: rgba(0, 0, 0, 1)"> {
</span><span style="color: rgba(0, 0, 255, 1)">return</span> <span style="color: rgba(0, 0, 255, 1)">null</span><span style="color: rgba(0, 0, 0, 1)">
}
}</span></pre>
</div>
<h4> 参考连接：https://www.meiwen.com.cn/subject/appxqqtx.html</h4>
</div>
<div id="MySignature" role="contentinfo">
<style>a.class1 { text-decoration: underline; color: #0378bb } a.class1:hover { color: #900b09 } #div_gxy .b { float: left; padding: 6px; } #div_gxy .b2 { padding-top: 0px; } #div_gxy .b1 img { width: 502px;} #div_gxy .b2 img { width: 800px; } #div_gxy .b3 .s1 { font-size: 16px; font-weight: 900; display: block; margin-bottom: 10px; } #div_gxy .b3 .s2 { display: block; } </style>
<h3> 分享链接：</h3>
工作之余，开了一个淘宝小店，分别销售日常必备生活用品，期待您的光临！点击下图，跳转店铺首页!<br />
<div id="div_gxy">
<div class="gxy_container">
<div class="b b1">
<img src="https://images.cnblogs.com/cnblogs_com/xjf125/1508859/o_200624034410baihuo.jpg" />
</div>
</div>
</div><br><br>
来源：https://www.cnblogs.com/xjf125/p/11003125.html
頁:
[1]