Trier le processus de paiement WeChat d'un point de vue frontal

Tutoriel de développement de mini-programmes WeChatCombiner le processus de paiement WeChat

Recommandé : WeChat mini programme Tutoriel de développement de programme

En raison des besoins de l'entreprise, la fonction de paiement WeChat est développée, impliquant trois méthodes de paiement :

• Paiement JSAPI : paiement par page Web dans WeChat nécessite l'ouverture d'un compte de service WeChat
• Paiement du mini programme : payez dans le mini programme, vous devez ouvrir le mini programme
• Paiement H5 : payez sur la page Web dans le navigateur mobile (quittez WeChat intranet)

Pour utiliser le paiement WeChat, vous devez ouvrir un compte marchand WeChat. Pour utiliser ce mode de paiement, vous devez l'ouvrir sur la plateforme marchande (sous réserve d'examen).

L'argent versé ira finalement sur le compte marchand (généralement ouvert par le service financier de l'entreprise).

Au cours du processus de développement de WeChat Pay, j'ai encore rencontré de nombreux pièges, petits et grands. Je l'ai finalement terminé et organisé le processus de développement.

Référence :

• Paiement WeChat - Guide d'accès
• Paiement WeChat - Document de développement

Paiement du mini-programme

Processus de développement

1. L'applet demande de créer une interface de commande, et le backend passe une commande pour l'obtenirorderId et renvoie
2. L'applet l'obtient via wx.login( )code
3. L'applet utilise ces code et orderId pour demander à l'interface backend d'obtenir les données nécessaires au paiement
4. Après avoir obtenu les données nécessaires au paiement, l'applet. appelle l'interface wx.requestPayment. (), appelle directement la page de paiement
5. Logique pour déterminer si le paiement a réussi

Pseudo code

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("支付失败");
  }
}

Notes

1. Demander un compte WeChat Mini Program
   Si vous postulez avec succès, vous obtiendrez l'AppID (Mini Program ID) et AppSecret (Mini Program Key)
   Le type de candidature est d'entreprise, sinon vous ne l'obtiendrez pas. pouvoir accéder au paiement WeChat
2. Certification du programme WeChat Mini
   Seuls les mini-programmes qui réussissent la certification peuvent accéder au paiement WeChat et lier la plateforme marchande
3. Demander un compte sur la plateforme marchande
   Un AppID est requis dans la première étape
   Si la demande réussit, vous pouvez obtenir MchID (Merchant ID) et MchKey (Merchant Key)
4. Associer le numéro de commerçant à l'applet WeChat
   Après les deux WeChat et le commerçant sont authentifiés avec succès, associez-les dans le menu de paiement WeChat en arrière-plan WeChat
5. Connecter Entrez le paiement WeChat
   Accès dans le menu de paiement WeChat backend WeChat

Paiement H5

Processus de développement

1. Demande frontale pour créer une interface de commande, le back-end passe une commande uniformément pour obtenir orderId et renvoie
2. Le front. -end demande l'interface de paiement avec orderId, obtient mweb_url,
3. puis passe à mweb_url, qui passera automatiquement à WeChat Call WeChat Pay
4. Après le paiement, revenez à la page de paiement pour déterminer si le paiement a réussi (une demande doit être envoyée à la requête back-end)
   4.1 Actualisez la page pour obtenir le dernier statut de paiement (commande).
   4.2 Mettre en place un bouton « J'ai payé » pour permettre aux utilisateurs de cliquer pour vérifier automatiquement le statut.

Pseudocode

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 设置一个"我已支付"的按钮，让用户点击之后查询状态。
}

Notes

• Définissez le nom de domaine de paiement correct sur la plateforme marchand
• Le débogage doit être en ligne si. vous êtes en difficulté, vous pouvez utiliser la pénétration intranet (Ngrok ou peanut shell)
• Besoin de redirect_urlêtre urlencodetraité
• Le paiement H5 ne peut pas être initié directement dans le client WeChat, s'il vous plaît en externe Le navigateur se lance.

Référence

• Paiement WeChat - Étapes de développement du paiement H5

Paiement JSAPI (paiement par page Web dans WeChat)

Processus de développement

• Page produit

1. Créez une commande sur la page produit front-end et obtenez leorderId
2. front- fin de la ceinture après avoir passé la commande dans le backend Avec orderId passez à la page de paiement,

• page de paiement

1. obtenez code

   1. Lorsque vous entrez dans la page pour la première fois, déterminez s'il y a code
   2. ou non code dans le chemin, et demandez des données pour accéder à l'autorisation La page code sera renvoyée avec l'adresse de rappel
   3. Obtenez code et envoyez-la au backend. Le backend l'analyse dans openid et l'enregistre.

2. Cliquez sur le bouton Confirmer le paiement pour déclencher la méthode wxPay()

   1. pour envoyer orderId au backend et obtenir wxData
   2. wxData contient les données de deux interfaces, wx.config et wx.chooseWXPay.
   3. Appelez d'abord wx.config() puis wx.chooseWXPay() Si tout se passe bien, la page de paiement apparaîtra.
3. Interroger l'état du paiement via le backend

Pseudo code

• Page produit

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

• Fichier d'entrée (main.js)

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

• Page de paiement HTML

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

Page de paiement 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，说不准你遇到的问题已经有无数的人遇到过并且已经有成熟的解决方案了。

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

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!