简介

业务应用通过提交表单的方式调用支付中心收银台实现支付能力。

演示DEMO： http://dev.k8s.flyrise.cn/pay-dev

安装与使用

确保项目已安装插件snowflake-id(依赖雪花算法生成随机id,用于订单号)
消费订单业务系统需传订单id,其他又支付中心生成

方法一 本地工程调用(不推荐)

支付组件封装方法 pay-center.js

import Cookies from 'js-cookie'
import { Notification } from 'element-ui'

// 支付中心url
function toUrl (appUrl = '/pay/order') {
  let serverUrl =
    process.env.NODE_ENV === 'development'
      ? process.env.SERVER_URL
      // ? 'http://localhost:81'
      : process.env.REQUEST_BASE_URL
  return `${serverUrl}${appUrl}`
}
// json转get url
function json2GetUrl (json) {
  return Object.keys(json)
    .map(function (key) {
      return encodeURIComponent(key) + '=' + encodeURIComponent(json[key])
    })
    .join('&')
}
// 传入当前token防止重新登录
function getToken () {
  return Cookies.get(process.env.TOKEN_KEY) || $nuxt.$store.state.token
}
export const submitOrder = (form,appUrl) => {
  let obj = form
  if (!obj.callbackUrl) {
    obj.callbackUrl = window.location.href
  }
  console.log('callbackUrl=>>>' + obj.callbackUrl)
  formValidate(obj).then(_ => {
    linkTo(obj,appUrl)
  }).catch(err => {
    console.log(err)
    Notification({
      title: '警告',
      message: err.join('<br>'),
      dangerouslyUseHTMLString: true,
      type: 'warning'
    })
  })
}

function linkTo(form,appUrl) {
  let obj = { ...form, token: getToken() }
  let href = `${toUrl(appUrl)}?${json2GetUrl(obj)}`
  window.location.href = href
}

// 退款窗口

const rules = {
  amount: {
    require: true, message: '金额为必填项'
  },
  source: {
    require: true, message: '访问终端为类型必填项' // Mobile:1,PC:2
  },
  payerId: {
    require: true, message: '付款方为必填项'
  },
  // payeeId: {
  //   require: true, message: '收款方为必填项'
  // },
  parkId: {
    require: true, message: '园区id为必填项'
  },
  orderType: {
    require: true, message: '订单类型为必填项'
  },
  bizOrderNo: {
    require: true, message: '订单id为必填项'
  },
  suiteCode: {
    require: true, message: '套件标识为必填项'
  },
  callbackUrl: {
    require: false, message: '回调url'
  }
}

// 简易非空校验
function formValidate (form) { // 参数为要验证的form
  return new Promise((resolve, reject) => {
    let elements = form // 表单元素集合
    let errorArr = [] // 错误信息数组

    Object.getOwnPropertyNames(rules).forEach(function (key) {
      if (Object.keys(elements).every(e => e.require && e != key)) {
        errorArr.push(rules[key].message)
      }
      Object.getOwnPropertyNames(elements).forEach(item => { // 对每个有valid的表单元素分别操作
        if (key == item) {
          if (rules[key].require == true && (!elements[item])) {
            errorArr.push(rules[key].message)
          }
        }
      })
    })
    if (errorArr.length == 0) {
      resolve()
    } else {
      reject(errorArr) // 返回该数组
    }
  })
}

引入支付组件封装的方法

import { submitOrder } from '~/plugins/pay-center'

校验表单后,调用组件方法,提交表单

submit() {
    this.$refs['form'].validate(valid => {
        if (valid) {
            submitOrder(this.form)
        }
    })
}

方法二 调用spui支付方法(推荐)

文档地址: https://pai.flyrise.cn/pai-sp-ui/#/docs/payment

this.$paispui.payment.submitOrder(obj);  //消费订单

this.$paispui.payment.cancelOrder(cancelObj); //退款订单

请求参数:

支付中心收银台
若当前企业已开通通联支付或电子钱包,可选择支付方式正常支付

否则提示暂无支付能力,需要到支付中心开通通联支付或电子钱包

使用场景

通联支付

开通流程

通联支付首页

1. 收款记录(被消费和被转账的订单列表)
   • 退款审批
   • 查看全部订单
2. 收益与消费统计
3. 账户余额和其他订单功能
   • 提现
   • 充值
   • 转账
   • 基础设置(运营方)
     • 交易手续费设置
     • 提现手续费设置

普通订单(充值、转账、提现、退款)

充值

转账

提现

退款

审批订单(退款审批)

电子钱包

开通流程

电子钱包首页(运营方)

1. 收款记录(被消费和被转账的订单列表)
   • 退款审批
   • 查看全部订单
2. 收益与消费统计
3. 账户余额和其他订单功能
   • 钱包配置
     • 基础设置
       • 交易手续费设置
       • 钱包信息设置
     • 支付密码设置
   • 充值
   • 转账
4. 电子钱包下账户信息
   • 企业钱包信息
   • 个人钱包信息
5. 提现审批列表

电子钱包首页(企业方)

1. 收款记录(被消费和被转账的订单列表)
   • 退款审批
   • 查看全部订单
2. 收益与消费统计
3. 账户余额和其他订单功能
   • 钱包配置
     • 支付密码设置
   • 提现申请
   • 充值
   • 转账
4. 电子钱包下账户信息
   • 企业钱包信息
   • 个人钱包信息

普通订单(充值、转账、提现、退款)

充值(与通联支付一致)

转账(与通联支付一致)

退款(与通联支付一致)

提现(企业方提现/运营方审批)

订单支付验证方法

订单列表