H5APP WEB 支付开发（银联微信支付宝）流程

这里采用ionic+angular进行前台开发 ssh+jpay做后台支付接口

银联：配置好参数接口采用JPAY 他会自动生成HTML并提交表单到银联 app只需用iframe套用就行 paylog为记录订单过程数据

controller

/**
 * app银联支付
 * @param payLogId
 * @param response
 */
@RequestMapping(value= "appUnionpay",method= RequestMethod.GET)
public  voidappUnionpay(@RequestParam("payLogId")intpayLogId,HttpServletResponse response){PayLog payLog = payLogService.findById(payLogId);//初始化接口参数配置UnionPayBean unionPayBean = newUnionPayBean();inttransactionPrice1 = newDouble(payLog.getTransactionPrice()*100).intValue();SDKConfig.getConfig().loadPropertiesFromSrc();unionPayBean.setMerId(unionMerId);unionPayBean.setOrderId(payLog.getOutBizNo());unionPayBean.setChannelType(ChannelType.CHANNEL_MOBILE.getName());unionPayBean.setTxnAmt(String.valueOf(transactionPrice1));unionPayBean.setTxnTime(DemoBase.getCurrentTime());unionPayBean.setVersion("5.1.0");UnionPayController.wapConsume(response,unionPayBean);}/**
 * 银联支付接口
 * @param rechargeForm
 * @param result
 * @param request
 * @param modelMap
 * @return
 */
@RequestMapping(value= "webUnionpay",method= RequestMethod.POST)
public voidtoUnionRecharge(@Valid @ModelAttribute("rechargeForm") RechargeForm rechargeForm,BindingResult result,HttpServletRequest request,HttpServletResponse response,ModelMap modelMap) {if(result.hasErrors()) {return;}//初始化接口参数配置UnionPayBean unionPayBean = newUnionPayBean();//企业充值唯一订单号String outBizNo =""+ System.currentTimeMillis()+ (long) (Math.random() * 10000000L);inttransactionPrice = newDouble(rechargeForm.getTransactionPrice()*100).intValue();SDKConfig.getConfig().loadPropertiesFromSrc();unionPayBean.setMerId(unionMerId);unionPayBean.setBizType(BizType.BIZ_B2B.getName());unionPayBean.setChannelType(ChannelType.CHANNEL_INTERNET.getName());unionPayBean.setTxnAmt(String.valueOf(transactionPrice));unionPayBean.setTxnType(TxnType.TXN_CONSUME.getName());unionPayBean.setTxnSubType(TxnType.TXN_CONSUME.getName());unionPayBean.setTxnTime(DemoBase.getCurrentTime());unionPayBean.setVersion("5.1.0");UnionPayController.frontConsume(response,unionPayBean);}

ionic

ionic start <projectname> tabs 创建tab项目

选择银联支付进行跳转

if (paymentModel.payedMethod== PayType.UNIONPAY) {this.payService.unionpay(userName,this.paymentModel.transactionPrice+ "").then(data => {let profileModal = this.modalCtrl.create('UnionpayPage',{payLogId: data.payLogId});profileModal.present();profileModal.onDidDismiss(data => {if (data.payed) {this.events.publish(EventTopic[EventTopic.INIT_WALLET])this.navCtrl.pop();}})})
}

跳转到

html

<iframestyle="height:100%;width:100%;border: 0;"[src]="url"></iframe>

this.interval= setInterval(() => {//轮询后台接口查询订单状态this.payService.unionpayPayed(this.navParams.data.payLogId).then(data => {if (data != null && data.payed) {this.destroy()this.viewCtrl.dismiss({payed: true})}})
},500);this.url= this.domSanitizer.bypassSecurityTrustResourceUrl(AppConfig.imgURL + '/company/appUnionpay.htm?payLogId='+ this.navParams.data.payLogId);

遇到的坑：

1.ijpay是通过你配置的参数以及订单基本信息返回个html输出并自动提交表单直接跳转只能靠返回键返回考虑到ios以及android返回键问题最后采用iframe（尽量少用 iframe有太多弊端）嵌套提供按钮取消支付以及轮查器查询订单状态完成自动返回

2.iframe跳转问题在iframe里进行页面跳转后 navCtrl pop就会失效导致报错原因navCtrl的视图栈会随着iframe页面跳转增加不会停留在当前页

解决办法：改用modalCtrl

待更新

H5APP WEB 支付开发（银联微信支付宝）流程相关推荐

java微信web支付开发_微信支付java开发详细第三方支付功能开发之支付宝web端支...
这段时间把支付基本搞完了,因为做的过程中遇到许多问题,特地记录下来,同时方便其他java coder,废话少说,下面开始. 整体思路:在后台,根据参数创建支付宝客户端AlipayClient,发送参数 ...
银联微信支付宝支付文档参考，不用再四处寻摸了
银联微信支付宝支付文档参考,不用再四处寻摸了银联.支付宝.微信的支付文档API讲解汇总银联银联开放平台链接:https://open.unionpay.com/tjweb/index API文 ...
h5支付不能打开支付宝 ios_IOS H5支付调起微信支付宝客户端问题总结
IOS H5支付调起微信支付宝客户端问题总结很早之前公司的支付功能,通过H5去支付宝和微信支付,开始使用的是UIwebView来加载h5页面,当初只有支付宝网页支付形式,所以没有考虑到那么多,现在新 ...
基于spring-boot+uni-app实现app支付功能（微信/支付宝）服务端
基于spring-boot+uni-app实现app支付功能(微信/支付宝)服务端支付宝支付 1 准备工作申请支付能力接口加签方式 2代码依赖支付宝支付配置类支付宝控制层异步通知微信支 ...
Web前端开发之网站制作流程详细讲解
一个网站想要顺利的运行就离不开HTML5网页技术开发人员,因此熟悉整个网站的开发建设流程对HTML5网页技术开发人员尤为重要,本篇文章扣丁学堂小编就和大家分享一下Web前端开发之网站制作流程,希望可以 ...
11支付功能≠支付系统：微信支付宝通用支付系统开发实战
支付的代码只需十行,项目的代码请查看https://github.com/TLR2019/xc-edu02 1 微信支付 1.1 下单生成二维码二维码可以利用下图的请求参数生成(下图没有截全,详系参 ...
个人免签支付如何对接微信支付宝？
个人开发者个人站长在使用用是离不开支付渠道的,但如果用官方的支付接口,还需要准备企业资质等,大大增加了开发流程和时间成本,而个人免签支付就是一个很不错的选择,所以我们今天就来说说怎么用个人免签支付对接 ...
记录自己的支付集成（微信支付宝）
首先,作为一个菜鸟表示,虽然网上的集成框架很多,但是我要自己写,就算被坑的死去活来也要自己写. 1. 支付宝这个支付宝的文档是个好东西,挺简单,挺容易看懂的,其次还有沙箱测试,表示支付宝一次通过很开 ...
澳洲支付服务商RoyalPay微信支付宝APP支付对接
最近项目中需要开发澳洲那边的微信支付宝支付,所以去研究了一下微信境外支付,发现境外只支持服务商模式,即客户需要去与澳洲本地服务商合作,由客户提供材料,服务商帮客户申请支付相关账号,然后调用服务商提供的 ...

H5APP WEB 支付开发（银联微信支付宝）流程

H5APP WEB 支付开发（银联微信支付宝）流程相关推荐

最新文章

热门文章

H5APP WEB 支付开发 （银联 微信 支付宝）流程

H5APP WEB 支付开发 （银联 微信 支付宝）流程相关推荐

最新文章

热门文章

H5APP WEB 支付开发（银联微信支付宝）流程

H5APP WEB 支付开发（银联微信支付宝）流程相关推荐