프런트 엔드 관점에서 WeChat 결제 프로세스 정리

WeChat Mini 프로그램 개발 튜토리얼WeChat 결제 프로세스 정리

권장: WeChat Mini 프로그램 개발 튜토리얼

비즈니스 요구로 인해 WeChat 결제 기능이 개발되었으며, 3가지 결제가 포함됩니다. 방법:

• JSAPI 결제: 위챗 내 웹페이지에서 결제, 위챗 서비스 계정 개설 필요
• 미니 프로그램 결제: 미니 프로그램 결제, 미니 프로그램 개설 필요
• H5 결제: 결제 모바일 브라우저의 웹페이지(위챗 인트라넷 밖 예)

위챗 결제를 이용하려면 위챗 가맹점 계정을 개설해야 합니다. 해당 결제 수단을 사용하려면 가맹점 플랫폼에서 계정을 개설해야 합니다(검토 대상). .

지급된 금액은 결국 판매자 계좌(보통 회사 재정에서 개설)로 이동됩니다.

WeChat Pay를 개발하는 과정에서 우리는 여전히 크고 작은 많은 함정에 직면했습니다. 마침내 우리는 그것을 끝내고 개발 과정을 정리했습니다.

참고:

• WeChat 결제 액세스 가이드
• WeChat 결제 개발 문서

미니 프로그램 결제

개발 프로세스

1. 애플릿은 주문 인터페이스 생성을 요청하고, 백엔드는 주문 인터페이스를 생성하도록 요청하고, 백엔드는 이를 얻기 위해 균일하게 주문을 합니다. orderId 및 반환 orderId 并返回
2. 小程序端获取通过wx.login()获取code
3. 小程序端拿这code和orderId请求后端接口，获取支付所需数据
4. 获取支付所需数据之后，小程序端调用wx.requestPayment()接口，直接调用起支付页面
5. 判断是否支付成功后的逻辑

伪代码

async function wxPay(goodId) {
  // 1. 创建订单 获取orderId
  let orderId = await ajax("POST", "/api/OrderProgram/CreateTheOrder", {
    goodId, // 商品id
  });
  // 2. 获得 code
  let code = await wxlogin(); // 基于pr封装的wx.login()方法
  // 3. 获取支付的数据
  let payData = await ajax("POST", "/api/OrderProgram/WxXcxPay", {
    orderId,
    code,
  });
  // 4. 发起支付
  let res = await payment(payData); // 基于pr封装的wx.requestPayment()方法
  // 5. 判断是否支付成功
  let payResult = res.errMsg;
  if (payResult == "requestPayment:ok") {
    console.log("支付成功");
  } else if (payResult == "requestPayment:fail cancel") {
    console.log("用户取消支付");
  } else {
    console.log("支付失败");
  }
}

注意事项

1. 申请微信小程序账号
   申请成功可拿到 AppID（小程序 id）和 AppSecret（小程序密钥）
   申请类型为企业性质，否则无法接入微信支付
2. 微信小程序认证
   通过认证的小程序才能接入微信支付和绑定商户平台
3. 申请商户平台账号
   需要第一步申请的 AppID
   申请成功可拿到 MchID（商户 id）和 MchKey（商户密钥）
4. 信小程序关联商户号
   微信和商户都认证成功后，在微信后台微信支付菜单中进行关联
5. 接入微信支付
   在微信后台微信支付菜单中进行接入

H5 支付

开发流程

1. 前端端请求创建订单接口，后端统一下单获取 orderId 并返回
2. 前端带着 orderId 请求支付接口，获得 mweb_url，
3. 然后跳转 mweb_url 会跳转微信自动调用微信支付
4. 支付后返回支付页，判断是否支付成功（需发送请求后端查询）
   4.1 刷新页面，获取最新的支付（订单）状态。
   4.2 设置一个的按钮"我已支付"，让用户点击自动查询状态。

伪代码

async function wxH5Pay(goodId) {
  // 1. 创建订单 获取orderId
  let orderId = await ajax("POST", "/api/OrderProgram/CreateTheOrder", {
    goodId, // 商品id
  });
  // 2. 获取支付跳转的URL
  let mweb_url = await ajax("POST", "/api/OrderProgram/WxH5Pay", { orderId });
  // 3. 跳转URL去微信支付
  if (mweb_url) {
    location.href = mweb_url;
  } else {
    console.log("回调地址出错");
  }
  // 4. 支付后返回支付页，判断是否支付成功
  // 4.1 刷新页面，获取最新的订单(商品)状态。
  // 4.2 设置一个"我已支付"的按钮，让用户点击之后查询状态。
}

注意事项

• 在商户平台设置正确的支付域名
• 调试需要在线上，如果嫌麻烦可以使用内网穿透（Ngrok 或花生壳）
• 需对redirect_url进行urlencode处理
• H5 支付不能直接在微信客户端内调起，请在外部浏览器调起。

参考

• 微信支付-H5 支付-开发步骤

JSAPI 支付（微信内网页支付）

开发流程

• 商品页

1. 前端商品页创建订单，在后端统一下单后获取 orderId
2. 前端带着 orderId 跳转到支付页，

• 支付页

1. 获取 code

   1. 第一次进入页面，判断是否路径中有 code
   2. 没有 code，请求数据跳转授权页面，code 会通过回调地址一起返回回来
   3. 拿到 code，发送给后端，后端解析到 openid，保存好。

2. 点击确定支付按钮，触发 wxPay() 方法

   1. 发送 orderId 给后端，获取 wxData
   2. wxData 中包含 wx.config 和 wx.chooseWXPay 两个接口的数据。
   3. 先调用 wx.config()然后在调用 wx.chooseWXPay()，如果一切正常，支付页面就会弹出。
3. 支付状态通过后端去查询

伪代码

• 商品页

// 1. 创建订单 获取orderId
let orderId = await ajax("POST", "/api/OrderProgram/CreateTheOrder", {
  goodId, // 商品id
});
// 2. 携带id 跳转到支付页
this.$router.push({ name: "wx_pay_page", params: { orderId: id } });

• 入口文件(main.js
애플릿은 wx.login()을 통해 code를 가져옵니다

애플릿은 이 code 및 orderId결제에 필요한 데이터를 얻기 위해 백엔드 인터페이스를 요청<li><strong>결제에 필요한 데이터를 얻은 후 애플릿은 wx.requestPayment() 인터페이스를 호출하여 결제 페이지를 직접 호출합니다</strong></li>결제 여부를 판단하는 로직 성공적인

Pseudocode

// main.js 引入 js-sdk
import wx from "weixin-js-sdk";

Notes

🎜🎜WeChat Mini 프로그램 계정 신청
성공적으로 신청하시면 AppID(미니 프로그램 ID)와 AppSecret(미니 프로그램 키)을 받으실 수 있습니다
신청 유형은 기업 성격이며 그렇지 않으면 WeChat Pay에 액세스할 수 없습니다🎜🎜WeChat Mini 프로그램 인증
인증을 통과한 미니 프로그램만 WeChat Payment에 액세스하고 가맹점 플랫폼을 바인딩할 수 있습니다🎜🎜신청 판매자 플랫폼 계정
첫 번째 단계에서 필요한 AppID
신청에 성공하면 MchID(판매자 ID) 및 MchKey(판매자 키)를 받게 됩니다🎜🎜Xin 애플릿 관련 판매자 번호
이후 WeChat과 판매자 모두 성공적으로 인증되었습니다. WeChat 백그라운드의 WeChat 결제 메뉴에서 연결하세요🎜🎜 WeChat 결제에 액세스
WeChat 백그라운드의 WeChat 결제 메뉴에서 액세스🎜🎜H5 결제🎜🎜개발 process🎜🎜🎜프런트엔드는 주문 인터페이스 생성을 요청하고, 백엔드는 균일하게 주문하여 orderId를 얻어 반품합니다. 🎜🎜프런트엔드는 orderId, mweb_url 획득, 🎜🎜그런 다음 mweb_url로 이동하고 WeChat으로 이동합니다. 자동으로 WeChat Pay 🎜🎜를 호출하고 결제 후 결제 페이지로 돌아갑니다. 결제 성공 여부 확인(백엔드 쿼리로 요청 전송 필요)
4.1 최신 결제(주문) 상태를 확인하려면 페이지를 새로고침하세요.
4.2 사용자가 클릭하여 상태를 자동으로 확인할 수 있도록 "결제했습니다" 버튼을 설정합니다. 🎜🎜Pseudocode🎜

<template>
  <p>
    <button @click="wxPay">点击支付</button>
  </p>
</template>

🎜Notes🎜🎜🎜판매자 플랫폼에서 올바른 결제 도메인 이름을 설정하세요🎜🎜디버깅이 온라인이어야 합니다. 번거롭다면 인트라넷 침투(Ngrok 또는 땅콩 쉘)를 사용할 수 있습니다🎜 🎜redirect_url을 수정해야 urlencode 처리가 수행됩니다.🎜🎜H5 결제는 WeChat 클라이언트에서 직접 시작할 수 없습니다. 외부 브라우저에서 호출하세요. 🎜🎜🎜참고🎜🎜🎜WeChat 결제-H5 결제-개발 단계🎜🎜🎜JSAPI 결제(WeChat 내 웹페이지 결제)🎜🎜개발 프로세스🎜🎜🎜제품 페이지🎜🎜🎜🎜프런트 엔드 제품 페이지에서 주문을 생성하고 백엔드에서 통합 주문 후 orderId🎜🎜를 받으세요. 프런트 엔드는 orderId, 🎜🎜🎜결제 페이지🎜가 있는 결제 페이지로 이동합니다. 🎜🎜🎜🎜코드 가져오기🎜🎜🎜페이지에 처음 접속할 때 경로에 <code>code가 있는지 확인하세요. 🎜🎜가 없는 경우. code, 인증 페이지로 이동하기 위한 데이터 요청, code code>는 콜백 주소🎜🎜를 통해 함께 반환됩니다. <code>code를 가져와 백엔드로 보냅니다. 백엔드는 이를 openid로 구문 분석하고 저장합니다. 🎜🎜🎜🎜결제 확인 버튼을 클릭하여 wxPay() 메서드를 실행하세요. 🎜🎜🎜orderId를 백엔드로 보내고 wxData를 얻습니다. code> 🎜🎜<code>wxData에는 wx.config 및 wx.chooseWXPay라는 두 가지 인터페이스의 데이터가 포함되어 있습니다. 🎜🎜먼저 wx.config()를 호출한 후 wx.chooseWXPay()를 호출하면 정상적으로 결제 페이지가 뜹니다. 🎜🎜🎜결제 상태는 백엔드를 통해 조회됩니다🎜🎜Pseudocode🎜🎜🎜제품 페이지🎜🎜

// Vue
data(){
    return {
        orderId: this.$route.params.orderId, // 订单id
        url: '',// 获取code的url
        wxData: null,// js-sdk接口所需的数据
    }
},
mounted(){
    // 判断是否有code
    this.getCode()
}
methods: {
    getCode() {
        var code = this.getUrlPram("code");
        if (code != null) {
            this.code = code;
            // 拿到 code 发给 后端
            this.sendCode(code);
        } else {
            // 去拿code
            this.getUrl();
        }
    },
    getUrl() {
        // 请求后端拿到url所需数据，然后跳转页面在通过回调地址返回，获取code.
        this.axios
            .post("/api/OrderProgram/GetOpenidAndAccessToken", {
                orderId: this.orderId,
            })
            .then((data) => {
                this.url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${data.appId}&redirect_uri=${data.redirect_uri}&response_type=${data.response_type}&scope=${data.scope}&state=${data.state}`;
                window.location.href = this.url;
            })
            .catch((err) => {
                console.log(err);
            });
    },
    sendCode(code) {
        // 发送code给后端 后端解析出openid
        this.axios
            .post("/api/OrderProgram/GetOpenidAndAccessTokenFromCode", {
                code: code,
            })
            .then((res) => {
                console.log(res);
            })
            .catch((err) => {
                console.log(err);
            });
    },
    wxPay: async function() {
        // 发送orderid，获取wx.chooseWXPay和wx.config所需的参数
        this.wxData = await this.axios.post(
            "/api/OrderProgram/WxJSAPIPay",
            { orderId: this.orderId }
        );
        let wxConfigData = this.wxData.wxConfigData // 获取wx.chooseWXPay()所需数据
        let wxPayData = this.wxData.wxPayData;// 获取wx.config()所需数据
        this.$wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: wxConfigData.appId, // 必填，公众号的唯一标识
            timestamp: wxConfigData.timeStamp, // 必填，生成签名的时间戳
            nonceStr: wxConfigData.nonceStr, // 必填，生成签名的随机串
            signature: wxConfigData.paySign, // 必填，签名
            jsApiList: [
                "chooseWXPay",
            ],
        });
        // 执行支付
        this.$wx.chooseWXPay({
            timestamp: wxPayData.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
            nonceStr: wxPayData.nonceStr, // 支付签名随机串，不长于 32 位
            package: wxPayData.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
            signType: wxPayData.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
            paySign: wxPayData.paySign, // 支付签名
            success: (res) => {
                this.$toast("支付成功");
            },
            fail: (err) => {
                this.$toast("支付失败");
            },
        });
    },
}

🎜🎜입력 파일(main.js)🎜🎜

// 在创建订单之后，就判断环境使用哪种方法支付。
if (isWx()) {
  this.WXPay(orderId); // 带着orderId跳转到支付页逻辑
} else {
  this.H5Pay(orderId); // 执行上面H5支付中的创建订单之后的逻辑
}
// 判断是否是微信浏览器
function isWx() {
  let uAgent = navigator.userAgent.toLowerCase();
  reutrn(/micromessenger/.test(uAgent)) ? true : false;
}

🎜 🎜🎜결제 페이지 HTML🎜🎜🎜

https://open.weixin.qq.com/connect/oauth2/authorize
?appid=你的appid
&redirect_uri=你的回调地址（拿到code后返回）
&response_type=code（返回类型，默认code）
&scope=snsapi_base（授权范围，静默授权拿到openid）
&state=STATE(自定义状态，非必填)
#wechat_redirect（重定向使用必须携带）

🎜🎜결제 페이지 JS🎜🎜

// Vue
data(){
    return {
        orderId: this.$route.params.orderId, // 订单id
        url: '',// 获取code的url
        wxData: null,// js-sdk接口所需的数据
    }
},
mounted(){
    // 判断是否有code
    this.getCode()
}
methods: {
    getCode() {
        var code = this.getUrlPram("code");
        if (code != null) {
            this.code = code;
            // 拿到 code 发给 后端
            this.sendCode(code);
        } else {
            // 去拿code
            this.getUrl();
        }
    },
    getUrl() {
        // 请求后端拿到url所需数据，然后跳转页面在通过回调地址返回，获取code.
        this.axios
            .post("/api/OrderProgram/GetOpenidAndAccessToken", {
                orderId: this.orderId,
            })
            .then((data) => {
                this.url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${data.appId}&redirect_uri=${data.redirect_uri}&response_type=${data.response_type}&scope=${data.scope}&state=${data.state}`;
                window.location.href = this.url;
            })
            .catch((err) => {
                console.log(err);
            });
    },
    sendCode(code) {
        // 发送code给后端 后端解析出openid
        this.axios
            .post("/api/OrderProgram/GetOpenidAndAccessTokenFromCode", {
                code: code,
            })
            .then((res) => {
                console.log(res);
            })
            .catch((err) => {
                console.log(err);
            });
    },
    wxPay: async function() {
        // 发送orderid，获取wx.chooseWXPay和wx.config所需的参数
        this.wxData = await this.axios.post(
            "/api/OrderProgram/WxJSAPIPay",
            { orderId: this.orderId }
        );
        let wxConfigData = this.wxData.wxConfigData // 获取wx.chooseWXPay()所需数据
        let wxPayData = this.wxData.wxPayData;// 获取wx.config()所需数据
        this.$wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: wxConfigData.appId, // 必填，公众号的唯一标识
            timestamp: wxConfigData.timeStamp, // 必填，生成签名的时间戳
            nonceStr: wxConfigData.nonceStr, // 必填，生成签名的随机串
            signature: wxConfigData.paySign, // 必填，签名
            jsApiList: [
                "chooseWXPay",
            ],
        });
        // 执行支付
        this.$wx.chooseWXPay({
            timestamp: wxPayData.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
            nonceStr: wxPayData.nonceStr, // 支付签名随机串，不长于 32 位
            package: wxPayData.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
            signType: wxPayData.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
            paySign: wxPayData.paySign, // 支付签名
            success: (res) => {
                this.$toast("支付成功");
            },
            fail: (err) => {
                this.$toast("支付失败");
            },
        });
    },
}

同时支持 H5 支付和 JSAPI 支付

// 在创建订单之后，就判断环境使用哪种方法支付。
if (isWx()) {
  this.WXPay(orderId); // 带着orderId跳转到支付页逻辑
} else {
  this.H5Pay(orderId); // 执行上面H5支付中的创建订单之后的逻辑
}
// 判断是否是微信浏览器
function isWx() {
  let uAgent = navigator.userAgent.toLowerCase();
  reutrn(/micromessenger/.test(uAgent)) ? true : false;
}

注意事项

• 开通微信商户号 - 设置支付目录（如果是 Vue 这类 SPA 页面，到根目录即可，也就是#号之前的地址）
  
• 开通微信公众号（服务号） - 设置安全域名、设置授权域名
  
• 收集参数：appId 和 AppSecret
• 添加 Web 开发工具开发者（需要开发者同时开发者关注开发的微信公众号和微信公众账号安全助手）参考文档
  [图片上传失败...(image-b07878-1605777597831)]
• 设置回调域名（例如：www.xx.com/pay，最后获取的 code 会拼在此回调地址后返回，返回后如www.xx.com/pay?code=xxxx
  

• 获取 code

  • 参考获取 code 文档
  • 在微信客户端网页打开授权地址，跳转之后，在返回的回调地址之后拿到 code：

https://open.weixin.qq.com/connect/oauth2/authorize
?appid=你的appid
&redirect_uri=你的回调地址（拿到code后返回）
&response_type=code（返回类型，默认code）
&scope=snsapi_base（授权范围，静默授权拿到openid）
&state=STATE(自定义状态，非必填)
#wechat_redirect（重定向使用必须携带）

redirect_uri参数要和你在微信公众号里设置的回调域名一致（例如：www.xx.com/pay）,需要注意的是这 url 需要urlEncode。

请求这个地址之后，code 会以你设置的redirect_uri地址里的参数带回来，拿到之后传给后端就行了。

• 前端引入 js-skd

  • 使用script引入js-sdk
  • 下载使用 npm 包weixin-js-sdk
• 获取 wx.config 的参数
  
• 获取 wx.chooseWXPay 所需的参数
  

参考

• 微信支付-JSAPI
• 微信公众号-网页授权
• JS-SDK 开发文档

总结

整个流程走下来，给我的体验是：小程序支付最方面（因为配置少），其次是 H5，JSAPI 支付最麻烦（文章一多半都在写它）

在微信支付功能开发过程中，其实最麻烦的不是开发流程，而是他的各种配置和授权流程，为了拿到所需的参数而来回折腾。

开发过程中的一些参数是经常用到的，如 appid、openid、orderId

支付流程大径相同，先获取到用户的 openid，知道你是谁，然后统一下单拿到 orderId 再去处理不同平台的支付方式

开发时候用到的相关文档，一定要仔细阅读二遍以上为止！！

遇到问题不要死刚，多百度多 Google，说不准你遇到的问题已经有无数的人遇到过并且已经有成熟的解决方案了。

前端和后端要多沟通，有什么问题(难点)随时反馈，需要什么参数好好说，遇到观点不一致的时候千万要注意控制住情绪，切莫撕逼（.——.）。

因为本人水平有限，对后端流程懂得不多，只能以前端的角度来梳理整个支付流程。

以上，希望对你有所帮助。

위 내용은 프런트 엔드 관점에서 WeChat 결제 프로세스 정리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!