Vueプロジェクトの支払い機能コードの詳細な説明

1. Alipay方式：

Alipay メソッド: Alipay をクリックして支払い、バックエンド インターフェイス (注文番号付き) を呼び出し、バックエンドはフォーム (HTML 文字列構造) を返します。

Alipay支払いを呼び出すにはフォームを送信してください

コード：

// alipayWap: バックグラウンド インターフェースによって返されるフォーム フラグメント <div v-html="alipayWap" ref="alipayWap"></div>
メソッド: {
	アリペイ() {
		this.$axios.get('xxx').then(res = > {
			this.alipayWap = res;
             // DOM が更新されるのを待ってから、フォームがページに表示されます this.$nextTick(() => {
            	this.$refs.alipayWap.children[0].submit()
          	})
		})
	}
}

2. WeChatペイ

作業負荷の大部分はバックエンドで行われます。注文生成はバックエンドで行われ、Tencentに接続されます。フロントエンドは、バックエンドから返された支払いQRコード（バックエンドによって生成されます。場合によっては、フロントエンドが注文生成に接続して自分でQRコードを生成することもできますが、この状況は比較的まれです）を端末に表示し、ユーザーがスキャンできるようにする役割のみを果たします。

図に示すように、バックグラウンドから返されたURLに基​​づいてQRコードページを生成する必要があります。

QRコード表示コード:

バックエンドの支払いQRコードインターフェースをリクエストする

最後にQRコードをスキャンして支払います。

vueプロジェクトの決済機能に関する記事はこれで終わりです。vueの決済機能に関するより関連性の高い内容については、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。皆様、今後とも123WORDPRESS.COMを応援してください。