フロントエンドの観点から WeChat の支払いプロセスを整理する

WeChat ミニ プログラム開発チュートリアル WeChat 支払いプロセスの整理

##推奨: WeChatミニ プログラム プログラム開発チュートリアル

ビジネス ニーズにより、次の 3 つの支払い方法を含む WeChat 支払い機能が開発されています。

JSAPI 支払い: WeChat Web ページ支払いが必要です。 WeChat アクティベーション サービス番号
• ミニ プログラム支払い: ミニ プログラムで支払うには、ミニ プログラムを開く必要があります
• H5 支払い: モバイル ブラウザの Web ページで支払います (WeChat イントラネットを終了します) )

WeChat 支払いを使用する前に、WeChat 販売アカウントを開設する必要があります。その支払い方法を使用するには、販売プラットフォームで開設する必要があります (審査の可能性があります)。

支払われたお金は最終的に販売アカウント (通常は会社の財務部門によって開設されます) に送られます。

WeChat Payの開発過程では、大小さまざまな落とし穴に遭遇しましたが、ようやく完成し、開発プロセスを整理することができました。

参考:

WeChat 支払いアクセス ガイド
• WeChat 支払い開発ドキュメント

ミニ プログラム支払い

開発プロセス

アプレットは注文インターフェイスの作成を要求し、バックエンドは
1. orderId を取得するために注文を出し、
アプレットは wx を通じてそれを取得します。 .login () Get
2. code
アプレットは、この
3. code と orderId を使用してバックエンド インターフェイスをリクエストし、支払いに必要なデータを取得します
支払いに必要なデータを取得した後、アプレットは wx.requestPayment() インターフェイスを呼び出し、支払いページを直接呼び出します。
4. 支払いが成功したかどうかを判断するロジック
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("支付失败");
  }
}

注意事項

WeChat ミニ プログラム アカウントを申請する

申請が成功すると、AppID (ミニ プログラム ID) と AppSecret (ミニ プログラム キー) を取得できます。 )

アプリケーション タイプはエンタープライズ タイプです。そうでない場合は WeChat Payment にアクセスできません
1. 
   WeChat ミニ プログラム認証
   認定に合格したミニ プログラムのみが WeChat Payment にアクセスし、販売者プラットフォームをバインドできます
2. マーチャント プラットフォーム アカウントの申請
   最初のステップで申請する必要がある AppID
申請が成功すると、MchID (マーチャント ID) と MchKey (マーチャント キー) を取得できます。
3. WeChat ミニ プログラムに関連付けられた販売者番号
   WeChat と販売者の両方が正常に認証されたら、WeChat バックグラウンドで WeChat 支払いメニューに接続します
   
WeChat 支払いにアクセスします
4. で接続しますWeChat バックグラウンドの WeChat 支払いメニュー
   
5. H5 支払い
   
開発プロセス

フロントエンドは注文インターフェイスの作成を要求し、バックエンドは注文インターフェイスの作成を要求します。 -end は一律に注文を出し、

orderId

を取得し、

1. を返します。フロントエンドは、orderId インターフェイスで支払いを要求し、
mweb_url
2. を取得します。 ## にジャンプし、mweb_url にジャンプすると、WeChat にジャンプし、自動的に WeChat 支払いを呼び出します。
支払い後、支払いページに戻って、支払うかどうかを決定します。 成功 (送信する必要があります)リクエストからバックエンド クエリへ）
3. 4.1 ページを更新して、最新の支払い (注文) ステータスを取得します。 4.2 「支払い済み」ボタンを設定して、ユーザーがクリックしてステータスを自動的に確認できるようにします。
4. 疑似コード
   

   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
process
• H5 支払いを行うことができませんWeChat 顧客に直接クライアント内にロードするには、外部ブラウザにロードしてください。 参考
• WeChat 支払い - H5 支払い開発手順

JSAPI 支払い (WeChat 内の Web ページ支払い)

• 開発プロセス

製品ページ

フロントエンド製品ページで注文を作成し、
• orderId

# を取得します。バックエンドで統合注文を行った後、##フロントエンドは

orderId
1. 、
2. 支払いページ ## で支払いページにジャンプします。
##Get

code

初めてページに入り、

code

1. があるかどうかを確認しますパス内に code

   はなく、データ ジャンプを要求する サブ認可ページでは、コールバック アドレスを通じて
   code
   1. が一緒に返されます。 ##code をバックエンドに送信し、バックエンドで openid
   に解析され、適切に保持されます。
   2. [支払いの確認] ボタンをクリックして、
   wxPay()
   3. メソッドをトリガーします。 Send orderId
   post ターミナルに、
   wxData

2. wxData に含まれる

   wx.config
   と
   1. wx.chooseWXPay のデータを取得します。 。 最初に wx.config()
   を呼び出し、次に
   2. 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 } });

エントリーファイル (
3. main.js
)

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

• 決済ページ HTML

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

支払いページ 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 中国語 Web サイトの他の関連記事を参照してください。