一行代码实现支付功能-APP跳转小程序收银台

更新记录

V1.0（2022-08-03）

初始版本，接入步骤 1）访问元收银商家平台注册页面注册成为商家，地址：https://www.soeasy-pay.com/open/open/register 2）登录元收银商家平台，完成企业/小微商户认证 3）配置SHA签名密钥 4）配置RSA验签公钥 5）配置订单的异步返回地址 6）写代码进行APP端接入支付 7）写代码进行服务端接入订单状态查询、退款、对账、异步返回等 8）使用元收银商家平台进行报表查询、统计

平台兼容性

Vue2	Vue3
√	×

App	快应用	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
app-vue app-nvue	×	√	√	×	×	×

钉钉小程序	快手小程序	飞书小程序	京东小程序
×	×	×	×

H5-Safari	Android Browser	微信浏览器(Android)	QQ浏览器(Android)	Chrome	IE	Edge	Firefox	PC-Safari
√	√	√	√	×	×	×	×	×

简介

元收银平台具有人民银行清算协会颁发的外包收单服务资质，集合了国内主流支付公司的开户、支付等服务，为客户提供简介的支付SDK和统一的接口。资金由支付公司直接清算，保证100%安全。

支付服务开通和使用步骤

1）访问元收银商家平台注册页面注册成为商家，地址：https://www.soeasy-pay.com/open/open/register

2）登录元收银商家平台，完成企业/小微商户认证

3）配置SHA签名密钥

4）配置RSA验签公钥

5）配置订单的异步返回地址

6）写代码进行APP端接入支付

7）写代码进行服务端接入订单状态查询、退款、对账、异步返回等

8）使用元收银商家平台进行报表查询、统计

组件详解

此收银台的完整版本包含了uni支付组件、JavaScript支付函数、JavaScript工具函数、JavaScript配置文件、logo图片、uni测试页面。

组件目录结构

|--components

| |--meta-pay

| |--sha256.min.js sha256签名工具函数

| |--tool.js 其他工具函数

| |--http.js http post/get工具函数

| |--config.js 元收银系统的参数，包含请求地址、商户号、密钥等

| |--pay.js JavaScript支付函数，包含支付、支付状态查询功能

| |--pay.vue uni支付组件

|--pages

| |--meta-pay

| |--test.vue vue测试页面

| |--test.nvue nvue测试页面

|--static

| |--meta-pay

| |--alipay.png 支付宝logo

| |--wechat.png 微信logo

参数文件说明

config.js包含几个主要参数

payUrl：支付路径请求域名，一般无需修改
payUri：支付路径请求目录，一般无需修改
queryUri：支付结果查询目录，一般无需修改
merchantNo：商家通过元收银平台向支付公司申请的商户编号
key：商家自行在元收银后台录入的APP前端签名密钥

组件使用方法

如果您使用的是uni app框架进行APP开发，则可以直接使用此支付组件：pay.vue

组件使用方法可参考测试页面test.vue或test.nvue

调用方法：

1）在您的vue/nvue页面引入支付组件

import pay from "@/components/meta-pay/pay.vue"

components: { pay },

2）添加pay元素

3）在需要支付的步骤调用组件的支付函数

this.\$refs.pay.pay(merchantOrderNo,amount,productDesc)

请求参数

序号	参数名	中文名	必填	备注
1	merchantOrderNo	商户订单编号	是	支付成功后，不能重复
2	amount	金额	是	单位：元，如：100.23
3	productDesc	商品描述	是

4）在页面的onShow周期或其他需要展示当次支付结果的地方调用组件的订单查询函数

if(this.\$refs.pay) {

this.\$refs.pay.query(function(resp) {

console.log('query order resp:'+JSON.stringify(resp))

})

}

返回参数resp为json结构的数据，其参数是

序号	参数名	中文名	必填	备注
1	merchantOrderNo	商户订单编号	是	原值返回
2	orderDate	订单生成日	否	格式：yyyyMMdd
3	orderNo	元收银的订单编号	否
4	amount	金额	否	原值返回
5	resp	返回码	是	0000-请求成功其他-支付失败
6	orderState	订单状态	否	01-未支付 03-支付成功 04-已作废
7	msg	错误描述	是	订单失败原因

注意：需要同时判断resp=0000且orderState=03，才认为订单已经支付成功

原生APP使用方法

如果您使用的是苹果、安卓原生开发，或uni外的其他混合框架开发的APP，则可通过http协议发送请求报文，获取支付路径后，通过代码打开微信、支付宝元收银小程序进行收银，使用方法可参考pay.js、http.js、tool.js，请参考《元收银-APP转小程序-前端接口文档.docx》2.4章节，下载地址：https://www.soeasy-pay.com/webapi/receive/unsign/Res?type=getApi&apiName=%E5%85%83%E6%94%B6%E9%93%B6-APP%E8%BD%AC%E5%B0%8F%E7%A8%8B%E5%BA%8F-%E5%89%8D%E7%AB%AF%E6%8E%A5%E5%8F%A3%E6%96%87%E6%A1%A3.docx

其他情况

商户服务器端还需要对接元收银的服务器端接口，其中包括支付结果异步返回、订单状态查询、退款、对账等接口，请参考《元收银-APP转小程序-服务端接口文档.docx》，下载地址：https://www.soeasy-pay.com/webapi/receive/unsign/Res?type=getApi&apiName=%E5%85%83%E6%94%B6%E9%93%B6-APP%E8%BD%AC%E5%B0%8F%E7%A8%8B%E5%BA%8F-%E6%9C%8D%E5%8A%A1%E7%AB%AF%E6%8E%A5%E5%8F%A3%E6%96%87%E6%A1%A3.docx