Payment Components
Payment components are functional UI elements that enable multi-platform payment processing through a unified interface. They handle order creation, payment workflow orchestration, and transaction status tracking, with native support for Alipay and WeChat Pay platforms, delivering end-to-end payment lifecycle management.
Creating payment components
In the page visual editor, click Insert Component and drag the Payment component onto the canvas. Configure its parameters in the right-side configuration panel.
Payment service elements must be created before adding payment components. For setup instructions, see Payment Services.
Payment component functions must be invoked programmatically before the component can process transactions.
Initiate payment function
Payment components expose an Initiate Payment function to trigger payment workflows.
This function accepts three parameters:
- Order number (optional)
- Order description (required)
- Order amount (required)
Omitting required parameters will cause payment failures.
This function must be invoked from a parent component's event handler. For example, when combining tables with payment components, configure the function call in the table's event logic.
Event logic
Payment components emit After Payment Success and After Payment Failure events to handle post-transaction workflows.
Configure response logic in the payment component's event handlers. For example, trigger receipt printing upon successful payment.
Component usage
Once you've created the payment component and configured its event handlers in the visual editor, payments can be initiated from the page.
In runtime, clicking the Payment button in the table invokes the payment component's workflow, opening the payment interface. After selecting a payment method, the QR code updates dynamically. When users complete the scan-to-pay action, the component fires either the After Payment Success or After Payment Failure event, triggering the corresponding logic.