WeChat 支払いアクセスを実装するための 5 分間のチュートリアル

実際、恐れることなく、支払いのやり取りのプロセス全体を注意深く理解していれば、支払いをウェブサイトやアプリのサービスに接続するのは難しくありません。実装には長くても 30 分しかかかりません。この記事は、Ping++ を使用して支払い機能を統合し、WeChat 支払いを実装する方法に基づいています。これにはわずか 5 分しかかかりません。

今朝、昨日申請した WeChat Pay アクセス申請が承認されたという WeChat 通知を受け取りました。Gu は午前中に WeChat Pay に接続しました。以前に Ping++ を使用して Alipay の即時支払いサービスにアクセスしたことがあったため、これに基づいて WeChat 支払いアクセスを追加するのは数分の問題です。

Ping++ バックエンドを構成する

申請した WeChat 支払いが承認されると、4 つの非常に重要な情報が得られます。

構成が正しくなったら、バックエンドで支払いを開始するコードを変更するだけで済みます。これは、Ping++ システムにおける Alipay と WeChat 支払いには微妙な違いがあり、特に追加パラメータの違いがあるためです。即時支払い、追加部分では、success_url を同期ジャンプとして渡す必要があり、WeChat 支払いは追加フィールドの product_id を渡す必要があります。この部分のコードは次のようになります。

switch ( $channel ) {    case 'alipay_pc_direct' :      
 $extra['success_url'] = url('/payment/done');       
  break;    case 'wx_pub_qr':       
   $extra['product_id'] = $this->wechatOrder();    
       break;    default:      
         //more extra comes here}

この部分は次のようになります。 1分でできる！

フロントエンド コードを変更します

この時点で、実際にはフロントエンドに残っている時間は 2 分だけですが、これで十分です。以前はVuejsを使って決済コンポーネントを再構築していたので、WeChatを追加した後は判定条件を追加するだけでOKでしたが、注意が必要なのはWeChat決済はスキャンコードのみ対応しており、ジャンプリンクがないことです。ここでは、以前に推奨した vue-qrcode を直接使用できます。

then((response) => {
    if(this.channel === 'wx_pub_qr') {
      this.status = 'paying';
      this.qrcodeUrl = 
           response.data.credential.wx_pub_qr;
      this.timeId = setInterval(() => {
          if (this.status == 'success') {
              clearInterval(this.timeId);
          }
          this.checkPaymentDone(response.data.id);
       }, 5000)
    }
 }
 
checkPaymentDone(chargeId) {
    axios.post('/payment/check', {
        chargeId: chargeId
    }).catch(error => {
        this.status = 'exception';
    }).then(response => {
        if (response.data.finished) {
            this.status = 'success';
        }
    })
},

このようにして、QR コードを表示するときは次のようになります:

<div v-show="status == &#39;paying&#39;">
    <p v-show="channel == &#39;wx_pub_qr&#39;">
        <qrcode 
         :value="qrcodeUrl"
         v-if="qrcodeUrl"
        :options="{ size: 170 }">
        </qrcode>
    </p>
    <p>请使用微信扫码支付</p>
</div>

このようにして、ユーザーは WeChat 支払いを選択するときに WeChat 支払いの QR コードを正しく見ることができます。 2分！

上記の内容は、WeChat 決済アクセスを実装するための 5 分間のチュートリアル方法に関するものであり、皆様のお役に立てれば幸いです。

関連する推奨事項:

h5 を使用して WeChat 支払いプロセスを実装する手順

WeChat 支払い機能を統合する Thinkphp の詳細な説明

WeChat アプレット開発の概要 支払い機能のエラー

以上がWeChat 支払いアクセスを実装するための 5 分間のチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。