欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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项目

选择银联支付进行跳转

H5APP WEB 支付开发 (银联 微信 支付宝)流程

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();
            }
        })
    })
}

跳转到  

H5APP WEB 支付开发 (银联 微信 支付宝)流程

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

待更新