uniapp开发云闪付小程序。

第一步:接入upsdk.js。

按照官方文档说明:

接入方使用云闪付 APP 小程序前端 API 前,需在调用页面(必须为 https )引入插件 upsdk.js 文件。我们需要在项目根目录中,新建一个html模板文件。

不知道的大家可以直接拷贝云闪付小程序DEMO示例中的index.html文件,或者如下图:
我们可以点击参考说明,uniapp官方有示例。

第二步:upsdk初始化

upsdk.js 引入后需在页面使用 upsdk.pluginReady 进行 sdk 初始化,前端接口的调用建议在其回调函数中使用。

upsdk.pluginReady (function(){

// 按照云闪付文档----->进行前端API调用

});

第三步:使用授权组件

vue:

  1. 确定项目中引用了 upsdk.js ,确定需要进行非基础授权,确定是 Vue 项目;
  2. 下载 vue-cup-ui.zip 包,下载地址 https://open.95516.com/s/open/components/vue-cup-ui.zip ;
  3. 将 vue-cup-ui.zip 放入项目 node_modules 下解压,
  4. 在mian.js中加载组件。

​​​​​​​

第三步:多环境开发----判断当前环境。

// 判断当前H5环境是不是云闪付小程序
export function isInUpApp() {
    var agent = navigator.userAgent.toLowerCase(); 
    var isInsideWallet = ((new RegExp(/(com.unionpay.chsp)/).test(agent)) || (new RegExp(/(com.unionpay.mobilepay)/).test(agent)));
    return isInsideWallet;
}

实际应用:

ps:$isInUpApp()是我自己引用的名字。具体名字根据自己引用的使用。

// #ifdef H5
				if(this.$isInUpApp()){
					let that = this
					// that.submitPay()
					//云闪付小程序关注。
					upsdk.pluginReady (function(){
					    upsdk.collectCurrentApplet({
					        success:function(data){  
					    		//that.submitPay()
					        },
					        fail:function(error){  
								if(error.code==1){
									//that.submitPay()
								}else{
									//that.$refs.sendMsgPop.open()
								}
								console.log(error)
					            // 失败回调 error={"code":"", msg:""} 
					            // '01': 当前小程序已经关注
					            // '02': 环境错误(在非小程序页面调用或者当前小程序运行异常)
					            // '03': 网络异常(网络错误或者服务器响应错误)
					            // '04': 用户取消(用户点击右上角X)
					            // '05': 其它异常
					    		
					        }
					    });
					});
				}
				// #endif

要在uniapp中调用云闪付支付,您可以使用uniapp提供的原生支付插件进行集成。以下是具体的步骤: 1. 在uniapp项目中安装并引入uniapp原生支付插件。 ```bash $ npm install uni-payment --save ``` ```javascript import payment from 'uni-payment' ``` 2. 获取云闪付支付所需的支付参数。 在后台服务器生成支付订单,并将支付参数返回给前端。支付参数中包含了支付金额、商户号、终端号、订单号、订单描述等信息,以及调起支付所需的签名等安全信息。您可以根据具体的业务需求,自行实现生成支付参数的逻辑。 3. 调用uniapp原生支付插件的`requestPayment`方法,传入支付参数。 ```javascript // 调用云闪付支付 payment.requestPayment({ provider: 'unionpay', orderInfo: 'your_order_info', success: function(res) { // 支付成功回调 }, fail: function(err) { // 支付失败回调 } }) ``` 其中,`provider`参数指定支付提供商为银联支付,`orderInfo`参数为支付参数字符串,即后台服务器返回的支付参数。调用`requestPayment`方法后,如果支付成功,会触发`success`回调函数;如果支付失败,会触发`fail`回调函数。 需要注意的是,云闪付支付需要在真机环境下才能正常调起。在开发过程中,您可以使用`uni.previewImage`方法模拟支付页面,并在模拟页面中添加一个按钮,点击该按钮后触发支付请求。在真机测试时,请确保您的App已经安装了云闪付App,并且已经登录了云闪付账号。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值