全面掌握Web支付基础教程：从入门到精通

在如今数字支付广泛应用的年代，支付操作的方式对用户感受有着直接的影响。点下支付键，两种操作都会将订单编号及有关信息传递至后台，不过它们的处理流程和细节各不相同，这一点商家和开发者都应给予关注。

交互方式1的支付后续流程

交互方式1中，页面会跳转至支付宝的收银台进行支付。支付完成后，系统会自动返回原页面，这一过程依赖于跳转时携带的参数。但若是通过.open方式打开新页面，用户返回收银台时，系统会弹出询问支付是否成功的对话框。例如，在众多电商平台，用户支付后返回平台，需核实支付结果。不同平台设计的弹框样式和提示文字各异。设计弹框时，需注重用户体验，避免过于频繁的弹出，同时确保用户能轻松找到确认支付的地方。

在不同的支付场合，交互方式带来的效果差异显著。比如在移动应用里，若弹窗设计不当，用户可能会误操作或未能及时核对支付结果。尤其在销售高峰或交易量大的时段，这类问题更为常见。一旦发生支付异常，处理起来颇为棘手，可能影响用户体验，并导致资金流向不明确。

交互方式2中的信息查询

const payNum = \'123abc\';
ajax({ 
  url: \'/api/alipay\', // 支付api
  type: \'POST\',
  data: {
    payNum: payNum, // 订单号
    other: \'demo\', // 其他参数
}).then((res) => {
  const { payUrl } = res;
  // 交互方法1:
  // payUrl如果是支付宝的收银台，则新打开一个页面
  // payUrl一般是 https://mapi.alipay.com/gateway.do 这种，一般会带上return_url参数和其他各种数据，页面最后被重定向到支付宝收银台
  window.open(payUrl);
  // 交互方式2:
  // payUrl如果是支付宝的扫码地址，则创建一个二维码弹窗
  // payUrl一般是 https://qr.alipay.com/bax06893swswc4inaknv505d 这种，页面最后被重定向到支付宝收银台，该收银台可以唤起支付宝app
  qrcode({
    width: 175,
    height: 175,
    url: payUrl
  });
}).catch((err) => {
  console.log(\'提交失败\')
})

在当前页面进行扫码支付的操作属于交互方式2。生成二维码后，系统需持续检查订单的完成情况。比如，在实体店铺的支付环节，顾客扫码后，商家系统需持续确认支付是否完成。若能引导用户通过支付宝客户端扫描二维码进入触屏收银界面，或者通过支付宝的JSAPI激活收银台，也是可行的。B站就是运用这一原理，在多个客户端实现统一二维码支付。该原理通过不同客户端的JSAPI实现支付，增强了支付方式的通用性。

不同客户端的扫码效果可能存在区别。若扫码设备或网络状况不佳，可能会对轮询查询的精确度造成影响，从而可能降低支付效率并影响最终支付结果。此外，并非每位用户都了解如何正确扫码，商家需对此进行适当的指导和解释。

支付宝最佳支付体验建议

// 打开支付宝收银台
window.open(payUrl);
// 在当前页面打开弹窗，询问用户是否支付成功
createFinishWindow()

支付宝的官方文档提出，为了达到最佳的支付效果，建议开发人员将支付宝SDK集成到客户端。即便这超出了前端开发的范畴。在应用中，前端代码能够调用客户端的支付功能。比如，阿里旗下的某些大型购物软件，其内部支付流程就与这种情况相吻合。其核心在于，通过使用客户端自带的支付接口，来提升支付效率。

const payNum = \'123abc\'
// 创建一个二维码弹窗
qrcode({
  width: 175,
  height: 175,
  url: payUrl
});
// 轮询查询订单状态
function getPayStatus() {
  ajax({ 
    url: \'/api/getPayStatus\', // 支付状态api
    data: {
      payNum: payNum, // 订单号
      other: \'demo\', // 其他参数
    },
    type: \'POST\'
  ).then((res) => {
    if (res.payStatus === 0) {
      // 支付成功，跳到成功页
      window.location.href = `/success/${payNum}`;
      clearTimeout(statusTimeId);
    } else {
      // 还未支付，继续轮询
      statusTimeId = setTimeout(getPayStatus, 3000);
    }
  }).catch((err) => {
    // 接口报错，继续轮询
    statusTimeId = setTimeout(getPayStatus, 3000);
  })
}
let statusTimeId = setTimeout(getPayStatus, 3000);

在实际操作中，许多应用因各种因素未能接入，可能会遇到支付速度缓慢或出现未知支付错误等问题。同时，小程序支付和APP支付在支付流程和体验上基本相同，且都能在当前页面直接唤起收银台，这在方便性方面具有一定的优势。然而，在开发过程中，必须确保页面加载和响应速度，否则可能会导致用户放弃支付。

微信支付中转页特点

const payNum = \'123abc\';
// 模拟表单提交
function formSubmit(formData, url) {
    const form = $(\'\');
    form.attr(\'action\', url);
    let input;
    $.each(formData, function (i, v) {
      input = $(\'\');
      input.attr(\"name\", i);
      input.attr(\"value\", v);
      form.append(input);
    });
    $(document.body).append(form);
    form.submit();
    form.remove();
  }
ajax({ 
  url: \'/api/alipay\', // 支付api
  type: \'POST\',
  data: {
    payNum: payNum, // 订单号
    other: \'demo\', // 其他参数
}).then((res) => {
  const { formData, url } = res;
  if (formData) {
    // 需要前端自己构建表单
    formSubmit(formData, url)
  } else {
    // 直接跳转链接(后端已经拼装好表单)
    window.location.href = url;
  }
}).catch((err) => {
  console.log(\'提交失败\')
})

微信支付的中转页面不支持通过浏览器直接访问。这是因为系统需要确认该域名是否为商户在申请H5时提交的授权域名。若在微信浏览器中打开收银台页面，可以调用微信JSAPI进行支付，但前提是必须拥有微信公众平台。下单时必须的参数需要从微信公众平台设定的域名中获取，这是必须遵守的规定。许多开发者若对此规定不甚了解，在支付对接时可能会遇到无法获取参数的问题，进而导致支付失败。

在各种使用环境中，例如某些公众号里的微店或推广页面的支付环节，若未能正确配置好跳转页面和域名权限，支付过程将无法顺利进行。此外，不同版本的微信浏览器在执行这一规定时，可能存在细微差别，这在开发测试阶段是需要注意的细节。

function ready(callback) {
  // 如果jsbridge已经注入则直接调用
  if (window.AlipayJSBridge) {
    callback && callback();
  } else {
    // 如果没有注入则监听注入的事件
    document.addEventListener(\'AlipayJSBridgeReady\', callback, false);
  }
}
ready(function () {
  // 显示一个提示框
  AlipayJSBridge.call(\'toast\', {
    content: \'hello\'
  });
});

微信支付渠道对接后的情况

支付

  var btn = document.querySelector(\'#J_btn\');
  btn.addEventListener(\'click\', function(){
    ap.tradePay({
      tradeNO: \'201802282100100427058809844\'
    }, function(res){
      ap.alert(res.resultCode);
    });
  });

若非通过微信直连途径，而是采用第三方支付方式，受《点金计划》作用，支付完成可能不会触发回调函数，而是直接跳转至官方小票界面。以易宝支付等第三方支付渠道接入微信支付的中小商家为例，他们可能会遇到此类问题。这主要看服务商是否启用了点金计划，若未启用，支付页面将直接关闭，导致商家可能无法及时准确地获取支付结果，进而影响后续业务流程的处理。

实际上，这种不确定性使得商家在选择支付渠道时更加小心，同时也给支付系统的稳定性带来了一定的困难。尤其是对那些交易量较大的商家来说，影响更为显著。

const payNum = \'123abc\';
// 支付回调函数
window.ali_pay_callback = function(res) {
  if (res.status === 0) {
    // 支付成功
  } else {
    // 支付失败
  }
}
// APPSDK是webview注入的全局对象，可以调用原生方法
APPSDK.invoke(\'ali_pay\', {
  payNum: payNum, // 订单号
  other: \'demo\', // 其他参数
}, \'ali_pay_callback\');

微信支付的复杂流程

const payNum = \'123abc\';
my.request({
  url: \'https://demo.com/api/alipay\',// 须加httpRequest域白名单
  method: \'POST\',
  data: { // data里的key、value是开发者自定义的
    from: \'支付宝\',
    payNum: payNum, // 订单号
    other: \'demo\', // 其他参数
  },
  dataType: \'json\',
  success: function(res) {
    // 唤起收银台
    my.tradePay({
        // 调用统一收单交易创建接口（alipay.trade.create），获得返回字段支付宝交易号trade_no
        tradeNO: res.tradeNO,
        success: (res) => {
          my.alert({
            content: JSON.stringify(res),
          });
        },
        fail: (res) => {
          my.alert({
            content: JSON.stringify(res),
          });
        }
    });
  },
  fail: function(res) {
    my.alert({content: \'fail\'});
  },
  complete: function(res) {
    my.hideLoading();
    my.alert({content: \'complete\'});
  }
});

微信支付在JSAPI和小程序的应用中流程较为繁琐，需要获取包括公众号在内的多项权限。开发微信支付时，必须注意诸多权限问题，例如公众号接口权限、菜单权限等是否充足。比如，某些企业的公众号可能因内部管理不善，权限设置不完整，这会阻碍支付功能的开发或使其功能不完整。

在进行微信支付开发之前，开发团队需对所需权限进行明确规划，并遵循相应的申请流程。同时，还需与公众号运营团队进行提前沟通和协调，以保证各环节的顺畅对接。

const payNum = \'123abc\';
ajax({ 
  url: \'/api/weixinpay\', // 支付api
  type: \'POST\',
  data: {
    payNum: payNum, // 订单号
    other: \'demo\', // 其他参数
}).then((res) => {
  const { qrUrl } = res;
  // qrUrl是微信的扫码地址，一般是 weixin://wxpay/bizpayurl?pr=P1oi4x6 ，这段schema通过微信扫一扫可以唤起微信支付
  qrcode({
    width: 175,
    height: 175,
    url: qrUrl
  });
  // 开始轮询支付结果
  // 代码省略，可以参考之前的支付宝pc端实现
}).catch((err) => {
  console.log(\'提交失败\')
})

我想请教大家，在你们进行支付操作或使用支付服务时，有没有遇到过因支付操作方式引起的不便？期待大家积极留言、点赞并转发。