【React Native】react-native之集成支付寶支付、微信支付

1、在使用支付寶支付、微信支付以前導入橋接好的頭文件

　　github地址：https://github.com/xujianfu/react-native-pay

2、集成支付寶支付流程

　　RN支付寶須要分別對iOS（Xcode）和安卓（AS）配置，與原生app相比只是將支付操做放在了RN當中。

　　流程大同小異，通常都是從後臺獲取支付字符串，而後傳遞支付字符串調用支付寶SDK，SDK再調用支付寶的支付模塊。若是用戶已安裝支付寶App，會跳轉到支付寶支付。若是用戶沒有安裝支付寶App，商家App內會調起支付寶網頁支付收銀臺，用戶登陸支付寶帳戶支付。

　　一、導入AlipaySDK（下載並引入）

　　下載AlipaySDK地址：https://docs.open.alipay.com/54/104509

　　二、iOS（Xcode的配置）

　　　　1)引入依賴庫

　　　　2）配置URL Types 

　　三、建立Alipay.js文件

import { NativeModules } from 'react-native'; module.exports = NativeModules.ReactNativePay;

　　四、在要支付界面引入Alipay.js文件

import Alipay from './Alipay'; export default class App extends Component<Props> { render() { return ( <View style={styles.container}>
        <TouchableOpacity onPress={()=>this.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>
 ); } aliPayAction(payStr) { Alipay.onAliPay(payStr) .then((message)=>{ console.log("message" + message); if(message !== "") //支付成功的處理
      this.refs.toast.show(message, DURATION.LENGTH_SHORT); }) .catch(e=>{ console.log("e.message" + e.message); if(e.message !== "") this.refs.toast.show(e.message, DURATION.LENGTH_SHORT); if(e.code === '-1' || e.message === '支付失敗') { //支付失敗
 } }) } }

3、集成微信支付

　　一、導入微信支付SDK

　　下載微信支付SDK地址：https://pay.weixin.qq.com/wiki/doc/api/app/app.php?chapter=11_1

　　二、具體配置，參考API文檔就行，很少作描述了。

　　三、具體使用

// 微信支付
 wxPayAction(){ this.setState({payInfo:Testing.getTestPay(responseJson.data)});//轉成payInfo模型
    let sign = this.getPaySignStrMethod(this.state.payInfo); if(sign==null){ this.refs.toast.show("支付信息請求錯誤", DURATION.LENGTH_SHORT); return; } var params = { partnerId:this.state.payInfo.partnerId, prepayId:this.state.payInfo.prepayId, package:this.state.payInfo.package, nonceStr:this.state.payInfo.nonceStr, timeStamp:this.state.payInfo.timeStamp, sign:sign, } Pay.onWxPay(params) .then((message)=>{ console.log("message" + message); if(message !== "") this.refs.toast.show(message, DURATION.LENGTH_SHORT); //支付成功的處理
      }).catch(e=>{ console.log("e.message" + e.message); if(e.message !== "") this.refs.toast.show(e.message, DURATION.LENGTH_SHORT); if(e.code === '-1' || e.message === '支付失敗') { //支付失敗的處理
 } }); } getPaySignStrMethod=(payInfo)=>{ if(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 !== '') { return "appid=" + payInfo.appId + "&noncestr=" + payInfo.nonceStr + "&package=" + payInfo.package + "&partnerid=" + payInfo.partnerId + "&prepayid=" + payInfo.prepayId + "&timestamp=" + payInfo.timeStamp + "&key=" + C.weChatPayKey; }else { return null } }

 　　　參考鏈接：https://www.meiwen.com.cn/subject/appxqqtx.html

原文出處：https://www.cnblogs.com/xjf125/p/11003125.html