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

这里采用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

待更新