H5APP WEB 支付开发 (银联 微信 支付宝)流程
程序员文章站
2022-03-28 13:48:43
...
这里采用ionic+angular进行前台开发 ssh+jpay做后台支付接口
银联:配置好参数 接口采用JPAY 他会自动生成HTML并提交表单到银联 app只需用iframe套用就行 paylog为记录订单过程数据
controller
/** * app银联支付 * @param payLogId * @param response */ @RequestMapping(value = "appUnionpay", method = RequestMethod.GET) public void appUnionpay(@RequestParam("payLogId")int payLogId,HttpServletResponse response){ PayLog payLog = payLogService.findById(payLogId); //初始化接口参数配置 UnionPayBean unionPayBean = new UnionPayBean(); int transactionPrice1 = new Double(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 void toUnionRecharge(@Valid @ModelAttribute("rechargeForm") RechargeForm rechargeForm, BindingResult result, HttpServletRequest request, HttpServletResponse response, ModelMap modelMap) { if (result.hasErrors()) { return; } //初始化接口参数配置 UnionPayBean unionPayBean = new UnionPayBean(); //企业充值唯一订单号 String outBizNo =""+ System.currentTimeMillis() + (long) (Math.random() * 10000000L); int transactionPrice = new Double(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项目
选择银联支付进行跳转
ts
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
<iframe style="height:100%;width:100%;border: 0;" [src]="url"></iframe>
ts
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
待更新