网页金额控件介绍

更新时间:2024.12.30

# 简介

用于用户使用扫码支付场景下的商户前端代码接入,提供开放标签wx-payment以满足商户快速接入扫码支付。

# 金额控件-金额输入区 参数

wx-payment 标签提供了默认样式,如有特殊场景,商户可以通过设置以下参数改变默认样式。

参数 类型 默认值 参数说明 图例
font-family string WeChat Sans SS 指定金额输入区的“¥”符号与金额的字体 金额输入区-自定义金额字体
font-weight string Medium 指定金额输入区的“¥”符号与金额的字重 金额输入区-自定义金额字重
font-size string 56px 指定金额输入区的“¥”符号与金额的字体大小 金额输入区-自定义金额字体大小
font-color string #000000 透明度:90% 指定金额输入区的“¥”符号与金额的字体颜色 金额输入区-自定义金额字体颜色
input-cur-width string 2px 指定金额输入区的光标粗细 金额输入区-自定义光标粗细
input-cur-height string 48px 指定金额输入区的光标高度 金额输入区-自定义光标高度
input-cur-color string #07C160 透明度:100% 指定金额输入区的光标颜色 金额输入区-自定义光标颜色
focus boolean false 指定是否聚焦到控件上 -

# 控件默认样式

图例示例:

金额输入区-默认样式

# 自定义样式

代码示例:

1<wx-payment
2 class="payment-style"
3 :focus="true"
4 input-cur-color="red"
5 input-cur-width="10px"
6 input-cur-height="35px"
7 font-family="Verdana"
8 font-weight="bold"
9 font-size="80px"
10 font-color="red"
11></wx-payment>

图例示例:

金额输入区-自定义样式

# 金额控件回调事件

事件名 事件说明 事件参数 注意事项 示例
pay-touch 点击付款事件 detail参数包含amountorderCompleteCallback字段

amount: Number,用户输入的金额
orderCompleteCallback: Function,【商户前端】下单完成后,调用orderCompleteCallback函数传入订单信息调起【商业支付收银台】,继续支付流程。
详见orderCompleteCallback
如果在pay-touch事件触发后30秒内未完成下单并调用orderCompleteCallback, 流程自动走到支付失败逻辑,此时触发 pay-fail 事件,回调事件中retcode返回OrderTimeout {"detail": {"amount": 12.34, "orderCompleteCallback": Function}}
pay-sucess 支付成功事件 detail参数包含orderCompleteCallback传入的orderInfo参数 - {"detail":{"orderInfo":{"appId":"wx2421b1c4370ec43b","timeStamp":"1395712654","nonceStr":"e61463f8efa94090b1f366cccfbbb444","package":"prepay_id=up_wx21201855730335ac86f8c43d1889123400","signType":"RSA","paySign":"oR9d8PuhnIc+YZ8cBHFCwfgpaK9gd7vaRvkYD7rthRAZ\\\\/X+QBhcCYL21N7cHCTUxbQ+EAt6Uy+lwSN22f5YZvI45MLko8Pfso0jm46v5hqcVwrk6uddkGuT+Cdvu4WBqDzaDjnNa5UK3GfE1Wfl2gHxIIY5lLdUgWFts17D4WuolLLkiFZV+JSHMvH7eaLdT9N5GBovBwu5yYKUR7skR8Fu+LozcSqQixnlEZUfyE55feLOQTUYzLmR9pNtPbPsu6WVhbNHMS3Ss2+AehHvz+n64GDmXxbX++IOBvm2olHu3PsOUGRwhudhVf7UcGcunXt8cqNjKNqZLhLw4jq\\\\/xDg=="}}}
pay-fail 支付失败事件 detail参数包含retcode字段,标识失败原因。

retcode: string, 支付失败返回码 PayFai Cancel OrderTimeout

PayFail:支付失败: 如密码错误、风控等
Cancel:用户取消支付
OrderTimeout:下单超时
- {"detail":{"retcode":"PayFail"}}

# orderCompleteCallback 接口说明

下单完成后需要将订单信息通过调用orderCompleteCallback方法传递给控件继续支付流程。

# 请求参数

参数名 是否必填 参数类型 参数描述
appId 必填 string(32) 商户申请的公众号对应的AppID,由微信支付生成,可在公众号后台 (opens new window)查看
timeStamp 必填 string(32) 时间戳,标准北京时间,时区为东八区,自1970年1月1日 0点0分0秒以来的秒数。注意:部分系统取到的值为毫秒级,需要转换成秒(10位数字)。
nonceStr 必填 string(32) 随机字符串,不长于32位。
package 必填 string(128) JSAPI下单接口返回的prepay_id参数值,提交格式如:prepay_id=***
signType 必填 string(32) 签名类型,默认为RSA,仅支持RSA。
paySign 必填 string(256) 签名,使用字段AppID、timeStamp、nonceStr、 package计算得出的签名值
# 签名计算方法

1、构造签名串 签名串一共有四行,每一行为一个参数。行尾以\n(换行符,ASCII编码值为0x0A)结束,包括最后一行。 如果参数本身以\n结束,也需要附加一个\n

参与签名字段及格式:

1应用ID
2时间戳
3随机字符串
4订单详情扩展字符串

数据举例:

1wx8888888888888888
21414561699
35K8264ILTKCH16CQ2502SI8ZNMTM67VS
4prepay_id=wx201410272009395522657a690389285100

2、计算签名值 绝大多数编程语言提供的签名函数支持对签名数据进行签名。强烈建议商户调用该类函数,使用商户私钥对待签名串进行SHA256 with RSA签名,并对签名结果进行Base64编码得到签名值。

# 请求示例

1$ echo -n -e \
2"wx8888888888888888\n1414561699\n5K8264ILTKCH16CQ2502SI8ZNMTM67VS\nprepay_id=wx201410272009395522657a690389285100\n" \
3 | openssl dgst -sha256 -sign apiclient_key.pem \
4 | openssl base64 -A
5 uOVRnA4qG/MNnYzdQxJanN+zU+lTgIcnU9BxGw5dKjK+VdEUz2FeIoC+D5sB/LN+nGzX3hfZg6r5wT1pl2ZobmIc6p0ldN7J6yDgUzbX8Uk3sD4a4eZVPTBvqNDoUqcYMlZ9uuDdCvNv4TM3c1WzsXUrExwVkI1XO5jCNbgDJ25nkT/c1gIFvqoogl7MdSFGc4W4xZsqCItnqbypR3RuGIlR9h9vlRsy7zJR9PBI83X8alLDIfR1ukt1P7tMnmogZ0cuDY8cZsd8ZlCgLadmvej58SLsIkVxFJ8XyUgx9FmutKSYTmYtWBZ0+tNvfGmbXU7cob8H/4nLBiCwIUFluw==

signType参数不参与签名,但需要传递,默认值为RSA,生成的签名需要通过字段paySign传递。

1const orderInfo = {
2 "appId":"wx2421b1c4370ec43b",
3 "timeStamp":"1395712654",
4 "nonceStr":"e61463f8efa94090b1f366cccfbbb444",
5 "package":"prepay_id=up_wx21201855730335ac86f8c43d1889123400",
6 "signType":"RSA",
7 "paySign":"oR9d8PuhnIc+YZ8cBHFCwfgpaK9gd7vaRvkYD7rthRAZ\/X+QBhcCYL21N7cHCTUxbQ+EAt6Uy+lwSN22f5YZvI45MLko8Pfso0jm46v5hqcVwrk6uddkGuT+Cdvu4WBqDzaDjnNa5UK3GfE1Wfl2gHxIIY5lLdUgWFts17D4WuolLLkiFZV+JSHMvH7eaLdT9N5GBovBwu5yYKUR7skR8Fu+LozcSqQixnlEZUfyE55feLOQTUYzLmR9pNtPbPsu6WVhbNHMS3Ss2+AehHvz+n64GDmXxbX++IOBvm2olHu3PsOUGRwhudhVf7UcGcunXt8cqNjKNqZLhLw4jq\/xDg=="
8}
9
10await orderCompleteCallback(true, orderInfo);

微信支付文档中心已升级,你当前所查看的是旧文档中心的内容,旧文档中心将于 2025年 3 月 31日 下线,请移步 [新文档中心] 查看相应的内容