【React Native】react-native之集成支付宝支付、微信支付
一、在使用支付宝支付、微信支付之前导入桥接好的头文件
github地址:https://github.com/xujianfu/react-native-pay
二、集成支付宝支付流程
RN支付宝需要分别对iOS(Xcode)和安卓(AS)配置,与原生app相比只是将支付操作放在了RN当中。
流程大同小异,一般都是从后台获取支付字符串,然后传递支付字符串调用支付宝SDK,SDK再调用支付宝的支付模块。如果用户已安装支付宝App,会跳转到支付宝支付。如果用户没有安装支付宝App,商家App内会调起支付宝网页支付收银台,用户登录支付宝账户支付。
1、导入AlipaySDK(下载并引入)
下载AlipaySDK地址:https://docs.open.alipay.com/54/104509
2、iOS(Xcode的配置)
1)引入依赖库
2)配置URL Types
3、创建Alipay.js文件
import {
NativeModules
} from 'react-native';
module.exports = NativeModules.ReactNativePay;
4、在要支付界面引入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×tamp=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 === '支付失败') {
//支付失败
}
})
} }
三、集成微信支付
1、导入微信支付SDK
下载微信支付SDK地址:https://pay.weixin.qq.com/wiki/doc/api/app/app.php?chapter=11_1
2、具体配置,参考API文档就行,不多做描述了。
3、具体使用
// 微信支付
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 + "×tamp=" + payInfo.timeStamp + "&key=" + C.weChatPayKey;
}else {
return null
}
}
参考连接:https://www.meiwen.com.cn/subject/appxqqtx.html
【React Native】react-native之集成支付宝支付、微信支付的更多相关文章
- 简聊iOS支付集成(支付宝和微信支付)
一.支付集成是什么 1.现在大部分app都有快捷支付功能,支付集成将第三方支付平台集成到自己的项目中,能够完成自己项目中的支付功能, 二.支付集成的使用 <1>.支付宝: 下载SDK和De ...
- ***CodeIgniter框架集成支付宝即时到账支付SDK
本文为CI集成支付宝即时到账支付接口 1.下载支付宝官方demo ;即时到账交易接口(create_direct_pay_by_user)(DEMO下载) 原文地址:https://doc.open. ...
- tp5支付宝和微信支付
一.生成二维码给用户进行扫码支付 1.先在vendor目录下加入支付宝和微信支付的引用 2.付款处调用 /** * 订单支付接口 * * @api {post} {:url('order/pay')} ...
- Android 支付宝以及微信支付快速接入流程
简介 随着移动支付的普及,越来越多的App采用第三发支付,在这里我们以支付宝为例,做一个快速集成! 一.Android快速实现支付宝支付 1.首先,我们需要前往支付宝开放平台,申请我们的支付功能:ht ...
- .net core 支付宝,微信支付 二
源码: https://github.com/aspros-luo/Qwerty.Payment/tree/develop 今天开始微信支付 微信支付坑比较多,支付流程也不太一样,微信支付需要先生成预 ...
- Android开发——支付宝和微信支付快速接入流程
一.Android快速实现支付宝支付 1.首先,我们需要前往支付宝开放平台,申请我们的支付功能:https://open.alipay.com/platform/home.htm 支付宝首页 这里 有 ...
- ThinkPHP 提供Auth 权限管理、支付宝、微信支付、阿里oss、友盟推送、融云即时通讯、云通讯短信、Email、Excel、PDF 等等
多功能 THinkPHP 开源框架 项目简介:使用 THinkPHP 开发项目的过程中把一些常用的功能或者第三方 sdk 整合好,开源供亲们参考,如 Auth 权限管理.支付宝.微信支付.阿里oss. ...
- 支付宝支付 微信支付SDK接口不统一? 盘他!
开发过支付宝.微信支付的同学都知道,微信的支付 API 设计感觉是 Java 开发工程师写的,远不如支付宝 SDK 的接口设计用起来顺手.在这里,统一封装微信支付和支付宝支付的API,使两种支付方 ...
- android app 集成 支付宝支付 微信支付
项目中部分功能点需要用到支付功能,移动端主要集成支付宝支付和微信支付 支付宝sdk以及demo下载地址:https://doc.open.alipay.com/doc2/detail.htm?spm= ...
随机推荐
- PMBOK 指南 第四章 项目整合管理(4.1-4.3)
项目整合管理 包括对隶属于项目管理过程组的各个过程和项目管理活动进行识别.定义.组合.统一和协调的各个过程. 资源分配.平衡竞争性需求.研究各种备选方法.为实现项目目标而裁剪过程.管理各个项目管理知识 ...
- python数据挖掘第三篇-垃圾短信文本分类
数据挖掘第三篇-文本分类 文本分类总体上包括8个步骤.数据探索分析->数据抽取->文本预处理->分词->去除停用词->文本向量化表示->分类器->模型评估.重 ...
- Java EE 基本开发流程及数据库连接池 Druid
一. 公司开发基本流程 a. 了解需求信息(比较模糊) 需求,不是别人告诉你的,是你自己挖掘出来的. 售前工程师(对行业知识了解):编程学不好,但懂点代码,对人的综合 ...
- MyBatis初体验
一.MyBatis 1.简介 曾命名IBatis(老版本), 交给Google维护后,改名为MyBatis(新版本).学习文档: https://mybatis.org/mybatis-3/zh/in ...
- Ubuntu 18.04安装MySQL
安装 MySQL 服务端 sudo apt-get install mysql-server 等待安装完成. 检查 mysql 服务状态 servive mysql status 登录 mysql 客 ...
- 更改Dynamics 365 Customer Engagement本地部署的高级配置
我是微软Dynamics 365 & Power Platform方面的工程师罗勇,也是2015年7月到2018年6月连续三年Dynamics CRM/Business Solutions方面 ...
- Rsync实现文件的同步
故事背景:我们公司是做新零售的,需要对发布的每台机器进行文件的同步更新,所以我这里做了一个小小的调研 技术调研:linux之间同步文件有两种方式rsync与scp. sync和scp在文件夹均不存在时 ...
- Spring Boot修改JSP不用重启的办法
在application.properties文件中添加一行代码解决. Spring Boot 2.0以上添加如下一行: server.servlet.jsp.init-parameters.deve ...
- getOutputStream() has already been called for this response 从了解到解决
一.背景说明 在tomcat的localhost.log日志中时长见到 getOutputStream() has already been called for this respon ...
- Yii2中$model->load($data)一直返回false问题
上次使用$model->load()方法时一直返回false,数据添加不成功,这里记录一下: 出错代码: $data = [ 'name' => 'test', 'phone' => ...