支付宝生活号H5接入支付宝支付流程

3,547 阅读2分钟

最近开发了支付宝生活号H5的支付功能。支付宝文档看着挺费劲的,网上资料也不多。整理一下流程给有需要的hxd们参考。

首先开通支付宝生活号,然后开通手机网站支付功能,然后登录支付宝开放平台

一、创建生活号H 5 应用

通过 “控制台” — “网页&移动应用”—“创建应用”,新建一个网页应用(注:使用生活号拥有者的账号来创建)。创建完成后直接跳转进入到应用详情页面,可以看到应用的APPID (图3)

image.png

image.png

image.png

二、H 5 应用使用支付功能必须的配置

2.1 配置密钥

下载开发助手工具

image.png

打开助手工具,点击‘生成密钥’按钮(图一),可以看到生成了‘应用公钥’和‘应用私钥’。复制“应用公钥”粘贴到网页应用详情页中“开始设置”-“开发信息”-“接口加签方式(密钥/证书)”中,点击保存设置就好生成对应的“支付宝公钥”,把“支付宝公钥”和“应用私钥”一起给到后端。

image.png

image.png

image.png

2.2 配置授权回调地址

同样在网页应用详情页中“开始设置”-“开发信息”-中配置“授权回调地址”,该地址就是生活号H5页面的访问地址

image.png

2.3 绑定 APPID

打开支付宝商家中心-“账号中心”-“绑定APPID”-“添加绑定”,把网页应用的APPID绑定进去。至此,支付宝生活号账号设置已完成。

image.png

image.png

image.png

三、代码开发

3.1 引用支付宝js api

在mounted生命周期中注入jsapi

  mounted() {
    // 注入支付宝jsapi
    const oScript = document.createElement("script");
    oScript.type = "text/javascript";
    oScript.src =
      "https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.min.js";
    document.body.appendChild(oScript);
  },

3.2 调用支付宝支付

在支付的点击事件中先通过支付宝api方法ap.getAuthCode获取认证的authCode。 获取到authCode后,调用后端获取支付的订单tradeNo,拿到tradeNo后调用支付宝api方法AlipayJSBridge.call唤起支付宝的支付功能。

aliPay() {
      // 1、调用支付api获取authCode
      ap.getAuthCode(
        {
          appId: alAPPID,
          scopes: ["auth_user"],
        },
        (res) => {
          const { authCode = "" } = res;
          // 2、通过后端获取tradeNO
          this.$post("xxxx", {authCode: authCode}).then(({ code, msg = "", data = {} }) => {
            if (code === 0) {
              const { tradeNO = "" } = data;
              // 3、调用支付宝api唤起支付功能
              AlipayJSBridge.call(
                "tradePay",
                {
                  tradeNO: tradeNO,
                },
                (result) => {
                  const { resultCode = "", result: resultMsg = "支付失败" } =
                    result;
                  if (resultCode == "9000") {
                     // 支付成功
                  } 
                }
              );
            }
          });
        }
      );
    },