支付

一个支付操作组件，基于统一的支付接口实现多平台支付功能。它负责订单创建、支付流程管理和状态监控，支持支付宝和微信支付平台，提供完整的支付生命周期管理。

支付元素分层结构为Meta（components.Meta） → Type（components.Payment） → 实例，开发者可通过JitAI的可视化开发工具快捷地创建支付实例元素。

当然，开发者也可以创建自己的Type元素，或者在自己的App中改写JitAi官方提供的components.PaymentType元素，以实现自己的封装。

快速开始

基础配置示例

支付组件基础配置

{
  "fullName": "components.Payment",
  "type": "components.Payment", 
  "name": "Payment1",
  "title": "支付组件",
  "config": {
    "requireElements": [],
    "aliPay": true,
    "weChatPay": true
  },
  "showTitle": true
}

配置属性说明

属性名	类型	默认值	说明	示例值
aliPay	boolean	false	是否启用支付宝支付	true
weChatPay	boolean	false	是否启用微信支付	true
requireElements	array	[]	依赖的元素配置	[]
aliPayFullName	string	-	支付宝支付元素全名	"pays.AliPay"
weChatPayFullName	string	-	微信支付元素全名	"pays.WeChatPay"

变量

tradeNo

• 类型：Stext
• 权限：只读
• 说明：支付成功后生成的交易流水号

获取交易流水号

// 获取支付后的交易流水号
const tradeNumber = Payment1.tradeNo.value;
console.log('交易流水号:', tradeNumber);

属性

name

组件实例名称，在页面中的唯一标识。

• 类型：string

title

组件显示标题。

• 类型：string

config

组件配置对象，包含支付相关设置。

• 类型：PaymentCompConfig & {requireElements: requireElement[]}

showTitle

是否在界面中显示组件标题。

• 类型：boolean

type

组件类型标识，固定为"components.Payment"。

• 类型：string

fullName

组件的完整名称路径。

• 类型：string

app

当前应用实例，提供全局应用上下文。

• 类型：App

page

所属页面实例，提供页面上下文。

• 类型：BasePage

方法

call

发起支付操作，创建订单并启动支付流程。

参数详解

参数名	类型	必填	说明	示例值
outTradeNo	Stext	是	商户订单号，为空时自动生成	"ORDER20241201001"
subject	Stext	是	订单标题描述	"商品购买"
totalAmount	Money	是	订单金额，单位为元	99.99

返回值

无返回值，支付结果通过事件回调获取。

发起支付示例

// 发起支付
await Payment1.call("ORDER20241201001", "商品购买", 99.99);

// 使用自动生成订单号
await Payment1.call("", "VIP会员充值", 199.00);

createOrderId

生成唯一的订单ID，格式为D+年月日时分秒+6位随机数。

返回值

string - 生成的订单ID

生成订单ID

const orderId = Payment1.createOrderId();
console.log(orderId); // 示例：D20241201123456789012

poll

启动支付状态轮询，定期检查支付结果。

参数详解

参数名	类型	必填	说明	示例值
request	Function	是	查询支付状态的请求函数	() => Promise<Record<string, any>>
interval	number	是	轮询间隔时间（毫秒）	4000
maxAttempts	number	是	最大轮询次数	75

支付状态轮询

const queryPayStatus = async () => {
  return await app.services.PayService.queryOrderStatus(orderId);
};

Payment1.poll(queryPayStatus, 4000, 75); // 每4秒查询一次，最多75次

publishEvent

发布组件事件，通知订阅者。继承自BaseComponent。

参数详解

参数名	类型	必填	说明	示例值
name	string	是	事件名称	"onSuccess"
ex	Record<string, any>	否	附加数据	{orderId: "123"}

发布自定义事件

await Payment1.publishEvent('onSuccess', { orderId: 'ORDER001' });

subscribeEvent

订阅组件事件，设置事件回调处理函数。继承自BaseComponent。

参数详解

参数名	类型	必填	说明	示例值
name	string	是	事件名称	"onSuccess"
evtCb	Function	是	事件回调函数	(data) => {...}
unSubscribeExist	boolean	否	是否取消现有订阅	true

返回值

string - 事件处理器ID

订阅支付事件

const handlerId = Payment1.subscribeEvent('onSuccess', async (data) => {
  console.log('支付成功，交易流水号:', data.tradeNo);
});

unSubscribeEvent

取消事件订阅。继承自BaseComponent。

参数详解

参数名	类型	必填	说明	示例值
id	string	是	事件处理器ID	"handler_123"

返回值

boolean - 是否成功取消

取消事件订阅

const handlerId = Payment1.subscribeEvent('onSuccess', callback);
// 取消订阅
Payment1.unSubscribeEvent(handlerId);

setConfig

动态设置组件配置。继承自BaseComponent。

参数详解

参数名	类型	必填	说明	示例值
next	Partial<PaymentCompConfig>	是	新的配置对象	{aliPay: true}
clean	boolean	否	是否完全替换配置	false

动态配置支付方式

// 启用支付宝支付
Payment1.setConfig({ aliPay: true });

// 完全替换配置
Payment1.setConfig({ aliPay: true, weChatPay: false }, true);

newVariable

创建新的数据类型变量实例。继承自BaseComponent。

参数详解

参数名	类型	必填	说明	示例值
varConfig	DataTypeConfig	是	变量配置对象	{name: "amount", dataType: "Money"}

创建支付相关变量

const payAmount = Payment1.newVariable({
  name: 'payAmount',
  dataType: 'Money',
  title: '支付金额',
  decimal: 2
});

destroy

销毁组件实例，清理所有资源和事件监听。继承自BaseComponent。

销毁组件

Payment1.destroy();

runCode

执行代码字符串，在页面上下文中运行。继承自BaseComponent。

参数详解

参数名	类型	必填	说明	示例值
code	string	是	要执行的代码字符串	"this.Payment1.tradeNo.value"

返回值

any - 代码执行结果

执行代码

const result = Payment1.runCode('this.Payment1.tradeNo.value');

getPermConfig

获取组件权限配置。继承自BaseComponent。

返回值

Record<string, any> | undefined - 权限配置对象

获取权限配置

const permConfig = Payment1.getPermConfig();
console.log('权限配置:', permConfig);

事件

onSuccess

支付成功后触发，返回交易流水号。

事件数据：tradeNo（交易流水号）

支付成功处理

Payment1.subscribeEvent('onSuccess', async (data) => {
  console.log('支付成功，流水号:', data.tradeNo);
  await OrderModel.updateByPK([orderId], { 
    status: 'paid',
    tradeNo: data.tradeNo 
  });
});

onFailed

支付失败后触发，无返回数据。

支付失败处理

Payment1.subscribeEvent('onFailed', async () => {
  console.log('支付失败');
  await showErrorMessage('支付失败，请检查网络或重试');
});

高级特性

完整支付流程

完整支付流程示例

class PaymentManager {
  private handlerIds: string[] = [];

  async initPayment() {
    // 订阅事件
    const successId = Payment1.subscribeEvent('onSuccess', this.onPaySuccess.bind(this));
    const failedId = Payment1.subscribeEvent('onFailed', this.onPayFailed.bind(this));
    this.handlerIds.push(successId, failedId);

    // 配置支付方式
    Payment1.setConfig({ aliPay: true, weChatPay: true });

    // 发起支付
    const orderId = Payment1.createOrderId();
    await Payment1.call(orderId, '商品购买', 99.99);

    // 启动状态监控
    Payment1.poll(this.queryPayStatus.bind(this), 4000, 75);
  }

  async onPaySuccess(data) {
    await this.updateOrderStatus('paid', data.tradeNo);
    this.cleanup();
  }

  async onPayFailed() {
    await this.handlePaymentError();
    this.cleanup();
  }

  async queryPayStatus() {
    return await app.services.PayService.getOrderStatus(this.orderId);
  }

  cleanup() {
    // 清理事件订阅
    this.handlerIds.forEach(id => Payment1.unSubscribeEvent(id));
    this.handlerIds = [];
  }
}