支付宝 Wap 支付的两种实现方式

简介

适用于商家在移动端网页应用中集成支付宝支付功能。商家在网页中调用支付宝提供的网页支付接口调起支付宝客户端内的支付模块，商家网页会跳转到支付宝中完成支付，支付完后跳回到商家网页内，最后展示支付结果。若无法唤起支付宝客户端，则在一定的时间后会自动进入网页支付流程。

Wap支付

这里我们直接使用支付宝原生Wap支付能力，上一段伪代码：

/**
 * 发起API调用
 * 初始化基础参数
 * 产品名称、订单号、产品价格、前台回调、后台回调
 */
AlipayTradeWapPayResponse response = AliFactory.Payment
        .Wap(cpPayUtils.getAliContent(config))
        .pay(product.getBody(), orderNo, product.getTotalFee(),config.getReturnUrl(),config.getNotifyUrl());
if (ResponseChecker.success(response)) {
    return Result.ok(response);
} else {
    return Result.error(response.getBody());
}

如果调用成功，支付宝生成并返回交易表单，需要开发者自行渲染后自动跳转支付宝网站引导用户完成支付。

//创建一个标签，并把返回的表单放入其中，然后提交表单接口
var div = document.createElement('divForm');
div.innerHTML = result.msg.body;
document.body.appendChild(div);
document.forms[0].acceptCharset = 'UTF-8';
document.forms[0].submit();

提交成功以后，会拉起支付宝 APP 进入支付界面。

Native支付

昨天跟朋友聊 Wap 支付的问题，发现他并没有用返回表单提交的方式，原来是使用了官方推荐的手机网站支付转 Native 支付。

手机网站支付的网络依赖比较严重，也通常需要经过更多的验证，这种种原因导致手机网站支付的成功率比 Native 支付低，对商户的利益造成影响。

/**
 * 发起API调用
 * 其实就是当面付
 * 参数：商品名称、订单号、订单金额
 */
AlipayTradePrecreateResponse response = AliFactory.Payment
        .FaceToFace(cpPayUtils.getAliContent(config))
        .asyncNotify(config.getNotifyUrl())
        .preCreate(product.getBody(), orderNo, product.getTotalFee());
if (ResponseChecker.success(response)) {
    /**
     * 直接返回二维码信息
     */
    return Result.ok(response.getQrCode());
} else {
    return Result.error(response.msg);
}

前台拿到后台返回的信息，直接在浏览器重定向即可唤醒支付宝APP。

小结

总的来说，后者比前者的确要高效很多，毕竟前者要提交不少表单数据，而后者只需要重定向地址就可以了。但是，目前小编还没有发现 Native 支付前台回调的参数，有了解的小伙伴可以分享一下。

演示

地址：https://pay.cloudbed.vip
账号：pay 密码：123456