用户付款代码实现
<h3><a href="https://uniapp.dcloud.io/api/plugins/payment?id=requestpayment">uni.requestPayment(OBJECT)</a></h3>
<p>uni.requestPayment是一个统一各平台的客户端支付API，不管是在某家小程序还是在App中，客户端均使用本API调用。</p>
<p>本API运行在各端时，会自动转换为各端的原生支付调用API。</p>
<p>虽然客户端API统一了，但各平台的支付申请开通、配置回填、服务器开发，仍然需要看各个平台本身的支付文档。</p>
<p>比如微信有App支付、小程序支付、H5支付等不同的申请入口和使用流程，对应到uni-app，在App端要申请和使用微信的App支付，而小程序端则申请和使用微信的小程序支付。</p>
<p><strong>平台差异说明</strong></p>
<table>
<thead>
<tr>
<th style="text-align: center;">App</th>
<th style="text-align: center;">H5</th>
<th style="text-align: center;">微信小程序</th>
<th style="text-align: center;">支付宝小程序</th>
<th style="text-align: center;">百度小程序</th>
<th style="text-align: center;">字节跳动小程序</th>
<th style="text-align: center;">QQ小程序</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center;">√</td>
<td style="text-align: center;"><a href="https://uniapp.dcloud.io/api/plugins/payment?id=h5-payment">说明</a></td>
<td style="text-align: center;">√</td>
<td style="text-align: center;">√</td>
<td style="text-align: center;">√</td>
<td style="text-align: center;">√</td>
<td style="text-align: center;">√</td>
</tr>
</tbody>
</table>
<p><strong>OBJECT 参数说明</strong></p>
<table>
<thead>
<tr>
<th style="text-align: left;">参数名</th>
<th style="text-align: left;">类型</th>
<th style="text-align: left;">必填</th>
<th style="text-align: left;">说明</th>
<th>平台差异说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">provider</td>
<td style="text-align: left;">String</td>
<td style="text-align: left;">是</td>
<td style="text-align: left;">服务提供商，通过 <a href="https://uniapp.dcloud.io/api/plugins/provider">uni.getProvider</a> 获取。</td>
<td></td>
</tr>
<tr>
<td style="text-align: left;">orderInfo</td>
<td style="text-align: left;">String/Object</td>
<td style="text-align: left;">是</td>
<td style="text-align: left;">订单数据，<a href="https://uniapp.dcloud.io/api/plugins/payment?id=orderinfo">注意事项</a></td>
<td>App、支付宝小程序、百度小程序、字节跳动小程序</td>
</tr>
<tr>
<td style="text-align: left;">timeStamp</td>
<td style="text-align: left;">String</td>
<td style="text-align: left;">微信小程序必填</td>
<td style="text-align: left;">时间戳从1970年1月1日至今的秒数，即当前的时间。</td>
<td>微信小程序</td>
</tr>
<tr>
<td style="text-align: left;">nonceStr</td>
<td style="text-align: left;">String</td>
<td style="text-align: left;">微信小程序必填</td>
<td style="text-align: left;">随机字符串，长度为32个字符以下。</td>
<td>微信小程序</td>
</tr>
<tr>
<td style="text-align: left;">package</td>
<td style="text-align: left;">String</td>
<td style="text-align: left;">微信小程序必填</td>
<td style="text-align: left;">统一下单接口返回的 prepay_id 参数值，提交格式如：prepay_id=xx。</td>
<td>微信小程序</td>
</tr>
<tr>
<td style="text-align: left;">signType</td>
<td style="text-align: left;">String</td>
<td style="text-align: left;">微信小程序必填</td>
<td style="text-align: left;">签名算法，暂支持 MD5。</td>
<td>微信小程序</td>
</tr>
<tr>
<td style="text-align: left;">paySign</td>
<td style="text-align: left;">String</td>
<td style="text-align: left;">微信小程序必填</td>
<td style="text-align: left;">签名，具体签名方案参见 <a href="https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_7&index=3">微信小程序支付文档</a></td>
<td>微信小程序</td>
</tr>
<tr>
<td style="text-align: left;">bannedChannels</td>
<td style="text-align: left;">Array<String></td>
<td style="text-align: left;">否</td>
<td style="text-align: left;">需要隐藏的支付方式，详见 <a href="https://smartprogram.baidu.com/docs/develop/api/open_payment/#requestPolymerPayment/">百度小程序支付文档</a></td>
<td>百度小程序</td>
</tr>
<tr>
<td style="text-align: left;">service</td>
<td style="text-align: left;">Number</td>
<td style="text-align: left;">字节跳动小程序必填</td>
<td style="text-align: left;">固定值：1（拉起小程序收银台）开发者如果不希望使用字节跳动小程序收银台，service设置为3/4时，可以直接拉起微信/支付宝进行支付：service=3： 微信API支付，不拉起小程序收银台；service=4： 支付宝API支付，不拉起小程序收银台。其中service=3、4，仅在1.35.0.1+基础库(头条743+)支持</td>
<td>字节跳动小程序</td>
</tr>
<tr>
<td style="text-align: left;">_debug</td>
<td style="text-align: left;">Number</td>
<td style="text-align: left;">否</td>
<td style="text-align: left;">仅限调试用，上线前去掉该参数。_debug=1时，微信支付期间可以看到中间报错信息，方便调试</td>
<td>字节跳动小程序</td>
</tr>
<tr>
<td style="text-align: left;">getOrderStatus</td>
<td style="text-align: left;">Function</td>
<td style="text-align: left;">字节跳动小程序必填</td>
<td style="text-align: left;">商户前端实现的查询支付订单状态方法（该方法需要返回个Promise对象）。 service=3、4时不需要传。</td>
<td>字节跳动小程序</td>
</tr>
<tr>
<td style="text-align: left;">success</td>
<td style="text-align: left;">Function</td>
<td style="text-align: left;">否</td>
<td style="text-align: left;">接口调用成功的回调</td>
<td></td>
</tr>
<tr>
<td style="text-align: left;">fail</td>
<td style="text-align: left;">Function</td>
<td style="text-align: left;">否</td>
<td style="text-align: left;">接口调用失败的回调函数</td>
<td></td>
</tr>
<tr>
<td style="text-align: left;">complete</td>
<td style="text-align: left;">Function</td>
<td style="text-align: left;">否</td>
<td style="text-align: left;">接口调用结束的回调函数（调用成功、失败都会执行）</td>
<td></td>
</tr>
</tbody>
</table>
<p><strong>代码案例</strong></p>
<pre><code class="language-javascript">// 仅作为示例，非真实参数信息。
uni.requestPayment({
provider: 'wxpay',
timeStamp: String(Date.now()),
nonceStr: 'A1B2C3D4E5',
package: 'prepay_id=wx20180101abcdefg',
signType: 'MD5',
paySign: '',
success: function (res) {
console.log('success:' + JSON.stringify(res));
},
fail: function (err) {
console.log('fail:' + JSON.stringify(err));
}
});</code></pre>
<h3>编写order.vue</h3>
<pre><code class="language-javascript">uni.requestPayment({
"timeStamp": timeStamp,
"nonceStr": nonceStr,
"package": pk,
"signType": "MD5",
"paySign": paySign,
success: function() {
uni.showToast({
title: "支付成功"
})
},
fail: function() {
uni.showToast({
title: "支付失败"
})
}
})</code></pre>