ホームページ >ウェブフロントエンド >uni-app >uniappを使ってWeChat決済機能を実装する方法
uniappを使ってWeChat決済機能を実装する方法
- PHPzオリジナル
- 2023-04-20 15:05:389117ブラウズ
Uniapp は、Vue.js に基づくクロスプラットフォーム開発フレームワークで、ミニ プログラム、アプリ、H5 などの複数のプラットフォーム用のアプリケーションを迅速に開発するために使用できます。 uniappでは、WeChat決済を統合することでオンライン決済機能を実装し、ユーザーはアプリ内で商品やサービスを購入できるようになります。
この記事では、uniapp を使用して WeChat 支払いアカウントの登録、支払いパラメーターの構成、支払いインターフェイスの呼び出しなどの手順を含む WeChat 支払い機能を実装する方法を紹介します。
1. WeChat 決済アカウントの登録
WeChat 決済機能を使用するには、まず WeChat 決済の販売アカウントを登録する必要があります。既に WeChat 公式アカウントまたはミニ プログラムをお持ちの場合は、直接アップグレードできます。そうでない場合は、WeChat Pay 公式 Web サイトにアクセスして登録する必要があります。
登録が完了したら、実名認証に必要な情報を送信する必要があり、認証に合格すると、加盟店プラットフォームにログインし、その後の支払い関連の操作を完了できます。
2. 販売者注文の作成
WeChat 販売者支払いアカウントの登録が完了したら、ユーザーがオンラインで商品やサービスを購入できるように、uniapp で注文を作成する必要があります。注文を作成するときは、次のパラメータに注意する必要があります:
- appId: WeChat オープン プラットフォームによって割り当てられた AppID;
- timeStamp: 1970 年 1 月 1 日からのタイムスタンプ 00 : 00:00 からの秒数;
- nonceStr: 32 文字以内のランダムな文字列;
- package: 統合注文インターフェイスによって返される prepay_id パラメータ値、形式は次のとおりです。 prepay_id=*
- signType: 署名アルゴリズム、現在 MD5 をサポート;
- paySign: 署名、通常はバックグラウンドで生成されます。
uniapp では、次の方法で販売者の注文を作成できます:
export default {
data() {
return {
appId: 'XXXXXXXXXXXXXX', // 微信开放平台分配的 AppID
merchantId: 'XXXXXXXXXXXXX', // 微信支付分配的商户号
amount: null, // 订单金额，单位为分
orderNumber: null // 自定义订单编号
};
},
methods: {
createPayOrder() {
// 调用后台接口，获取生成商户订单参数
let data = {
appId: this.appId,
merchantId: this.merchantId,
amount: this.amount,
orderNumber: this.orderNumber
};
// 发送请求，获取预支付信息
this.$http.post('/pay/unifiedOrder', data).then(resp => {
wx.requestPayment({
// 获取支付信息成功后，使用官方 API 调起微信支付
timeStamp: resp.data.timeStamp,
nonceStr: resp.data.nonceStr,
package: resp.data.package,
signType: resp.data.signType,
paySign: resp.data.paySign,
success(res) {
console.log('支付成功');
},
fail(res) {
console.log('支付失败');
},
complete(res) {
console.log('支付完成');
}
})
})
}
}
}
3. WeChat 支払いパラメータの設定
販売者の注文を作成した後、WeChat 支払いを設定する必要がありますuniapp パラメータ（加盟店番号、インターフェースキー、証明書などを含む）パラメータを設定するときは、次の点に注意する必要があります:
- 販売者番号: WeChat 決済によって割り当てられた販売者番号;
- インターフェース キー: 販売者署名のキーとして、バックグラウンド サーバーに保存する必要があります;
- 証明書パス: 返金や赤い封筒などの高度な機能を使用する必要がある場合は、証明書を WeChat 支払いプラットフォームにアップロードする必要があります。
uniapp では、次の方法で WeChat 支払いパラメータを設定できます:
function getSign(params) {
let str = '';
for (let key in params) {
str += key + '=' + params[key] + '&';
}
str += 'key=' + API_KEY;
return md5(str).toUpperCase();
}
function createPayParams(data) {
let params = Object.assign({}, data, {
appid: APP_ID, // 微信开放平台分配的 AppID
mch_id: MERCHANT_ID, // 微信支付分配的商户号
nonce_str: Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15), // 随机字符串
notify_url: NOTIFY_URL, // 异步通知地址，接收微信支付异步通知回调地址
spbill_create_ip: '127.0.0.1' // 终端IP
});
let sign = getSign(params);
return `
<xml>
<appid><![CDATA[${params.appid}]]></appid>
<attach>支付测试</attach>
<body>APP支付测试</body>
<mch_id>${params.mch_id}</mch_id>
<nonce_str>${params.nonce_str}</nonce_str>
<notify_url>${params.notify_url}</notify_url>
<out_trade_no>${data.orderNumber}</out_trade_no>
<spbill_create_ip>${params.spbill_create_ip}</spbill_create_ip>
<total_fee>${params.total_fee}</total_fee>
<trade_type>APP</trade_type>
<sign>${sign}</sign>
</xml>
`;
}
4. 支払いインターフェイスを呼び出します
WeChat 支払いパラメータを設定した後、uniapp を使用できます提供される公式 API は、WeChat 支払いインターフェイスを呼び出し、パラメータを渡してオンライン支払い機能を実装します。支払いインターフェイスを呼び出すときは、次の点に注意する必要があります:
- アプレットまたはアプリには WeChat 支払い権限が必要です;
- 販売者を含む支払いパラメータを渡す必要があります注文番号と金額、取引タイプなど;
- 支払いが成功した後、WeChat からの非同期通知を受信することで支払い結果を確認できます。
uniapp では、次の方法で WeChat 支払いインターフェイスを呼び出すことができます。
let params = {
appId: APP_ID, // 微信开放平台分配的 AppID
partnerId: MERCHANT_ID, // 微信支付分配的商户号
prepayId: prepayId, // 预支付交易会话标识
package: 'Sign=WXPay', // 扩展字段，暂填写固定值 Sign=WXPay
nonceStr: nonceStr, // 随机字符串，不长于32位
timeStamp: timeStamp.toString(), // 时间戳
sign: getSign({ // 根据微信支付签名算法生成签名
appId: APP_ID,
partnerId: MERCHANT_ID,
prepayId: prepayId,
package: 'Sign=WXPay',
nonceStr: nonceStr,
timeStamp: timeStamp.toString()
})
};
wx.requestPayment({
appId: APP_ID,
timeStamp: timeStamp.toString(),
nonceStr: nonceStr,
package: params.package,
signType: 'MD5',
paySign: params.sign,
success(res) {
console.log('支付成功');
},
fail(res) {
console.log('支付失败');
}
});
上記は、WeChat の登録を含む、uniapp で WeChat 支払い機能を使用するための具体的な手順です。支払いアカウントと販売者の注文の作成、WeChat 支払いパラメータの設定、支払いインターフェイスの呼び出しなど。アプリケーション開発プロセスにおいて、完璧な支払い機能により、商品やサービスを購入する際のユーザー エクスペリエンスが大幅に向上し、アプリケーションや Web サイトのコンバージョン率と収益が増加します。
以上がuniappを使ってWeChat決済機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。