简介
用于用户使用扫码支付场景下的商户前端代码接入，提供开放标签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参数包含amount和orderCompleteCallback字段 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，由微信支付生成，可在公众号后台查看 |
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
5uOVRnA4qG/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}
9await orderCompleteCallback(true, orderInfo);
