Xzx Pay Code

新中新付款码快速接入使用，支持前端任何框架，对 Vue、React 有友好的 hooks 支持。

• ✅ 支持 Typescript。
• ✅ 支持 Vue3、Vue2.7。
• ✅ 支持 React16.8、React17、React18。
• ✅ 支持 Vite。
• 🔲 正在测试 Webpack。

快速开始

安装

# pnpm（⭐️推荐）
pnpm add xzx-paycode
# yarn
yarn add xzx-paycode
# npm
npm install xzx-paycode

原生&前端框架使用

查看 options 相关配置

import { createPayCode, next } from 'xzx-paycode'

createPayCode({
  /**
   * 具体配置可见文档最下方 options
   */
})

/**
 *
 * 手动更新付款码
 * @param payment 必传，当前的支付方式完整对象
 *
 */
next()

<template>
  <div>{{paycode?.data?.code}}</div>
  <button @click="onNext">更新付款码</button>
  <button @click="onChangePayment">切换支付方式</button>
</template>
<script setup>
  import { usePayCode } from 'xzx-paycode/vue'

  /**
   * 具体配置可见文档最下方 options
   */
  const options = {}

  const { paycode, payments, payment, configs, next } = usePayCode({
    ...options,
    /**
     * hooks特有的ready回调，当拿到接口返回的支付方式后回调
     */
    ready: () => {
      // 可通过该方式指定一个初始的支付方式，可以根据你的逻辑修改
      // 赋值后，paycode将自动更新
      // payment.value = payments.value[0]
    },
    /**
     * 当接口返回错误时回调
     */
    error: (error) => {}
  })

  function onNext() {
    next(payment.value)
  }

  function onChangePayment() {
    payment.value = payments.value[1]
  }
</script>

import { useEffect } from 'react'
import { usePayCode } from 'xzx-paycode/react'

function App() {
  /**
   * 具体配置可见文档最下方 options
   */
  const options = {}

  const { paycode, payment, setPayment, payments, next } = usePayCode({
    ...options
  })

  useEffect(() => {
    if (payments?.[0]) {
      setPayment(payments[0])
    }
  }, [payments])

  function onNext() {
    next(payment)
  }

  function onChangePayment() {
    setPayment(payments[1])
  }
  return (
    <>
      <pre>{JSON.stringify(paycode?.data.code)}</pre>
      <button onClick={onNext}>更新付款码</button>
      <button onClick={onChangePayment}>切换支付方式</button>
    </>
  )
}

构建工具配置

import { PayCodeVitePlugin } from 'xzx-paycode/vite'

const vite: UserConfig = defineConfig({
  plugins: [
    PayCodeVitePlugin({
      /**
       * PayCodeViteConfig
       * 详见下方声明
       */
    })
  ]
})

// interface PayCodeViteConfig {
//   baseURL?: string // 接口请求baseurl
//   paycodeURL?: string // 获取付款码接口，一般无需设置
//   paymentsURL?: string // 获取支付方式接口，一般无需设置
//   destroyURL?: string // 手动更新时销毁上一个付款码接口，一般无需设置
//   tenantId?: string // 租户ID，非saas场景下无需配置
//   source?: string // 场景来源，默认h5
//   authorization?: string // 请求凭证
// }

options

baseURL

• type: string
• default: ''
• description: 接口请求 baseurl

authorization

• type: string
• default: ''
• description: 请求凭证，程序优先自动寻找，如未找到，请手动传入

tenantId

• type: string
• default: ''
• description: 租户 ID，非 saas 场景下无需配置

source

• type: string
• default: h5
• description: 场景来源，默认 h5

payment

• type: object
• default: {}
• description: 设置使用的支付方式，默认为支付方式列表的第一个

initIndex

• type: number
• default: 0
• description: 初始化取第几个支付方式，默认为 0

init

• type: function
• default: (params) => {}
• description: 初始化接口
• params: { data: {}, msg: string, success: boolean }

create

• type: function
• default: (params) => {}
• description: 创建付款码接口
• params: { data: { code: string, payment: object }, msg: string, success: boolean }