Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
unidocs-zh
提交
8cd6d6fc
unidocs-zh
项目概览
DCloud
/
unidocs-zh
通知
3200
Star
106
Fork
813
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
94
列表
看板
标记
里程碑
合并请求
70
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
94
Issue
94
列表
看板
标记
里程碑
合并请求
70
合并请求
70
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
8cd6d6fc
编写于
11月 26, 2022
作者:
VK1688
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update uni-pay.md
上级
67bf40eb
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
72 addition
and
26 deletion
+72
-26
docs/uniCloud/uni-pay.md
docs/uniCloud/uni-pay.md
+72
-26
未找到文件。
docs/uniCloud/uni-pay.md
浏览文件 @
8cd6d6fc
> 本文档适用于`uni-pay 2.0.0`及以上版本,需 HBuilderX 3.
5.0
及以上版本。旧版本文档请访问:[uni-pay 1.x 文档](unipay.md)
> 本文档适用于`uni-pay 2.0.0`及以上版本,需 HBuilderX 3.
6.5
及以上版本。旧版本文档请访问:[uni-pay 1.x 文档](unipay.md)
# uni-pay 2.x
...
...
@@ -652,37 +652,47 @@ module.exports = {
**属性**
| 属性名
| 说明 | 类型 | 默认值 | 可选值 |
| 属性名 | 说明 | 类型 | 默认值 | 可选值 |
|-----------------|-------------------------------|---------|--------|-------|
| adpid | uni-ad的广告位ID,若填写,则会在支付成功结果页展示广告(可以增加开发者广告收益) | string | - | - |
| returnUrl | 支付成功后,用户点击【查看订单】按钮时跳转的页面地址,如果不填写此属性,则没有【查看订单】按钮 | string | - | - |
| mainColor | 支付结果页主色调,默认支付宝小程序为#108ee9,其他端均为#01be6e | string | #01be6e | 见下 |
| mode | 收银台模式,可选 mobile 手机模式 pc 电脑模式 | string | mobile | mobile、pc |
| logo | 当mode为PC时,展示的logo | string | /static/logo.png | - |
**mainColor值参考:**
-
绿色系 #01be6e
-
蓝色系 #108ee9
-
咖啡色 #816a4e
-
粉红 #fe4070
-
橙黄 #ffac0c
-
橘黄 #ff7100
-
其他 可自定义
**事件**
| 事件名
| 说明 | 参数 |
|-------------
----|---------------------|-
--------|
| 事件名 | 说明 | 参数 |
|-------------
|---------------------|
--------|
| success | 支付成功的回调 | res |
| cancel | 支付取消的回调 | res |
| fail | 支付失败的回调 | res |
| cancel | 支付取消的回调 | res
|
| fail | 支付失败的回调 | res
|
| create | 创建支付订单时的回调(此时用户还未支付) | res |
**方法**
通过
`let res = await this.$refs.uniPay.xxx();`
方式调用,详情调用方式参考下方的【前端完整示例代码】
| 方法名 | 说明 |
|--------------------|---------------------|
| open | 发起支付 - 打开支付收银台弹窗
[
查看详情
](
#create-order
)
|
| createOrder | 直接发起支付(无收银台)
[
查看详情
](
#create-order
)
|
| getOrder | 查询订单
[
查看详情
](
#get-order
)
|
| refund | 发起退款(此接口需要权限才可以访问)
[
查看详情
](
#refund
)
|
| getRefund | 查询退款
[
查看详情
](
#get-refund
)
|
| closeOrder | 关闭订单
[
查看详情
](
#close-order
)
|
| getPayProviderFromCloud
| 获取支持的支付供应商
[
查看详情
](
#get-pay-provider-from-cloud
)
|
| getProviderAppId
| 获取支付配置内的appid(主要用于获取微信公众号的appid,用以获取code)
[
查看详情
](
#get-provider-appid
)
|
| getOpenid | 根据code获取openid (主要用于微信公众号code换取openid)
[
查看详情
](
#get-openid
)
|
| 方法名
| 说明 |
|--------------------
-------
|---------------------|
| open
| 发起支付 - 打开支付收银台弹窗
[
查看详情
](
#create-order
)
|
| createOrder
| 直接发起支付(无收银台)
[
查看详情
](
#create-order
)
|
| getOrder
| 查询订单
[
查看详情
](
#get-order
)
|
| refund
| 发起退款(此接口需要权限才可以访问)
[
查看详情
](
#refund
)
|
| getRefund
| 查询退款
[
查看详情
](
#get-refund
)
|
| closeOrder
| 关闭订单
[
查看详情
](
#close-order
)
|
| getPayProviderFromCloud | 获取支持的支付供应商
[
查看详情
](
#get-pay-provider-from-cloud
)
|
| getProviderAppId | 获取支付配置内的appid(主要用于获取微信公众号的appid,用以获取code)
[
查看详情
](
#get-provider-appid
)
|
| getOpenid
| 根据code获取openid (主要用于微信公众号code换取openid)
[
查看详情
](
#get-openid
)
|
**前端完整示例代码**
...
...
@@ -698,6 +708,7 @@ module.exports = {
<view><input
v-model.number=
"total_fee"
/></view>
</view>
<button
@
click=
"open"
>
唤起收银台支付
</button>
<view
class=
"tips"
>
支付前,让用户自己选择微信还是支付宝
</view>
<!-- #ifdef MP-WEIXIN || H5 || APP -->
<button
@
click=
"createOrder('wxpay')"
>
直接发起微信支付
</button>
<!-- #endif -->
...
...
@@ -705,17 +716,21 @@ module.exports = {
<button
@
click=
"createOrder('alipay')"
>
直接发起支付宝支付
</button>
<!-- #endif -->
<button
@
click=
"createQRcode('wxpay')"
>
生成独立支付二维码
</button>
<view
class=
"tips"
>
用于把生成的二维码放到自己写的页面中(组件不会弹窗,请从日志中查看二维码base64值)
</view>
<button
@
click=
"getOrder"
>
查询支付状态
</button>
<!--
<button @click="refund">发起退款</button>
<button @click="getRefund">查询退款</button>
<view class="tips">发起退款需要admin权限,本示例未对接登录功能</view>
<button @click="getRefund">查询退款状态</button>
<button @click="closeOrder">关闭订单</button>
-->
<!-- #ifdef H5 -->
<button
v-if=
"h5Env === 'h5-weixin'"
@
click=
"getWeiXinJsCode('snsapi_base')"
>
公众号获取openid示例
</button>
<!-- #endif -->
<!-- 统一支付组件 -->
<uni-pay
ref=
"uniPay"
:mode=
"mode"
:adpid=
"adpid"
return-url=
"/pages/order-detail/order-detail"
logo=
"/static/logo.png"
@
success=
"
paySuccess
"
></uni-pay>
<uni-pay
ref=
"uniPay"
:mode=
"mode"
:adpid=
"adpid"
return-url=
"/pages/order-detail/order-detail"
logo=
"/static/logo.png"
@
success=
"
onSuccess"
@
create=
"onCreate
"
></uni-pay>
</view>
</template>
...
...
@@ -752,7 +767,7 @@ module.exports = {
},
methods
:
{
/**
* 发起支付(唤起收银台)
* 发起支付(唤起收银台
,如果只有一种支付方式,则收银台不会弹出来,会直接使用此支付方式
)
* 在调用此api前,你应该先创建自己的业务系统订单,并获得订单号 order_no,把order_no当参数传给此api,而示例中为了简化跟支付插件无关的代码,这里直接已时间戳生成了order_no
*/
open
()
{
...
...
@@ -790,7 +805,28 @@ module.exports = {
custom
:
this
.
custom
,
// 自定义数据
});
},
// 查询订单
/**
* 生成支付独立二维码(只返回支付二维码)
* 在调用此api前,你应该先创建自己的业务系统订单,并获得订单号 order_no,把order_no当参数传给此api,而示例中为了简化跟支付插件无关的代码,这里直接已时间戳生成了order_no
*/
createQRcode
(
provider
){
this
.
order_no
=
`test`
+
Date
.
now
();
this
.
out_trade_no
=
`
${
this
.
order_no
}
-1`
;
// 发起支付
this
.
$refs
.
uniPay
.
createOrder
({
provider
:
provider
,
// 支付供应商
total_fee
:
this
.
total_fee
,
// 支付金额,单位分 100 = 1元
order_no
:
this
.
order_no
,
// 业务系统订单号(即你自己业务系统的订单表的订单号)
out_trade_no
:
this
.
out_trade_no
,
// 插件支付单号
description
:
this
.
description
,
// 支付描述
type
:
this
.
type
,
// 支付回调类型
qr_code
:
true
,
// 是否强制使用扫码支付
cancel_popup
:
true
,
// 配合qr_code:true使用,是否只生成支付二维码,没有二维码弹窗
openid
:
this
.
openid
,
// 微信公众号需要
custom
:
this
.
custom
,
// 自定义数据
});
},
// 查询支付状态
async
getOrder
()
{
let
res
=
await
this
.
$refs
.
uniPay
.
getOrder
({
out_trade_no
:
this
.
out_trade_no
,
// 插件支付单号
...
...
@@ -822,7 +858,7 @@ module.exports = {
});
}
},
// 查询退款
// 查询退款
状态
async
getRefund
()
{
let
res
=
await
this
.
$refs
.
uniPay
.
getRefund
({
out_trade_no
:
this
.
out_trade_no
,
// 插件支付单号
...
...
@@ -871,13 +907,17 @@ module.exports = {
});
}
},
// 监听事件 - 支付订单创建成功(此时用户还未支付)
onCreate
(
res
){
console
.
log
(
'
create:
'
,
res
);
// 如果只是想生成支付二维码,不需要组件自带的弹窗,则在这里可以获取到支付二维码 qr_code_image
},
// 监听事件 - 支付成功
pay
Success
(
res
){
console
.
log
(
'
paySuccess:
'
,
res
)
on
Success
(
res
){
console
.
log
(
'
success:
'
,
res
);
if
(
res
.
user_order_success
)
{
// 代表用户已付款,且你自己写的回调成功并正确执行了
}
else
{
// 代表用户已付款,但你自己写的回调执行成功(通常是因为你的回调代码有问题)
...
...
@@ -927,6 +967,12 @@ module.exports = {
margin
:
10
rpx
0
;
}
.tips
{
margin-top
:
20
rpx
;
font-size
:
24
rpx
;
color
:
#565656
;
}
</style>
```
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录