実際、恐れることなく、支払いのやり取りのプロセス全体を注意深く理解していれば、支払いをウェブサイトやアプリのサービスに接続するのは難しくありません。実装には長くても 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 == 'paying'"> <p v-show="channel == 'wx_pub_qr'"> <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 支払いアクセスを実装するための 5 分間のチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。