Skip to main content

WeChat Mini Program Payment Management Template

Supports payment-related management capabilities for mini programs, including order inquiry, refund management, and transaction and fund bill inquiry and download.

Template Key Features​

1. Order Inquiry​

2. Refund Management​

3. Transaction Bill​

4. Funds Bill​

Setup Principles​

Business Core using WeChat Pay - Mini Program service documentation address: https://docs.cloudbase.net/toolbox/datasource/weixin-pay

Component Documentation:https://docs.cloudbase.net/lowcode/components/

1. Order Inquiry​

  • Radio component controls order number and merchant order number
  • Single-line input component receives order number
  • Query button
  • Grid Layout + Loop Display component to display order details
  • Request Refund button

2. Refund Management​

  • Tab component refund inquiry interface
  • Single-line input receives refund order number
  • Grid Layout + Loop Display to display refund order data
  • Tab component refund request interface
  • Use form container component
  • Radio component sets WeChat Pay order number or merchant order number
  • Single-line input 1 controls receiving order number
  • Single-line input 2 (read-only) displays the order amount
  • Single-line input 3 receives refund amount
  • Multi-line input for refund reason
  • Submit Application button

3. Transaction Bill​

  • Date picker component for billing time
  • Radio component receives bill type
  • Query bill button
  • Download bill button
  • Data table displays billing data
  • Loop Display Component displays summary data

4. Funds Bill​

  • Date picker component for billing time
  • Radio component receives bill type
  • Query bill button
  • Download bill button
  • Data table displays billing data
  • Loop Display Component displays summary data

Function Setup Instructions​

After the page is built, the main function is that the click event of the query button triggers the WeChat Pay-Mini Program Service to obtain order and billing information.

Apis Introduction:https://cloud.tencent.com/document/product/1301/93144

JavaScript Custom Methods Introduction:https://cloud.tencent.com/document/product/1301/86581

Introduction to Events and Event Flow:https://cloud.tencent.com/document/product/1301/86578

Introduction to Creating a New Code Area

1. Order Inquiry​

  • Variables
    • The variable radioValue receives the radio selection value
    • The variable searchId receives the order number
  • Apis
    • getOrderByOrderId: Query order details by WeChat order number
    • getOrderByMchId: Query order details by merchant order number
    • The input parameter is searchId
  • Event Flow
    • setOrderDetail writes the retrieved order details data to the orderDetail variable
  • Click event
    • Query click event: Determine the requested Apis based on the selected value of radioValue, and call the data query API to request data.
    • Request Refund click event: If order details data exists, navigate to the Request Refund page with the data

2. Refund Management​

  • Variables
    • The variable radioValue receives the radio selection value in the Request Refund tab
    • The variable out_refund_no receives the refund order number passed from the page
    • The variable reason receives the refund reason in the Request Refund tab
    • The variable refund receives the refund amount in the Request Refund tab
    • The variable amount receives the order amount information in the Request Refund tab
    • The variable refundId receives the refund order number in the Refund Query tab
    • The variable refundDetail receives the order details in the refund query
  • Apis
    • getOrderDetail: Query order details by WeChat order number (out_trade_no)
    • getMachIdDetail: Query order details by merchant order number (transaction_id)
    • queryRefund: Query refund order details (out_refund_no)
    • refundApi: Send a refund request. Parameters: (out_refund_no, refund, reason, transaction_id, out_trade_no, amount)
  • Event Flow
    • setRefundDetail writes the retrieved order details data to the refundDetail variable
    • setAmount writes the retrieved amount object from the order to the amount variable
  • Click event
    • Query click event: Based on the passed refund order number, it uses the data query API to make the request.
    • Submit Application click event: After completing the information, submitting the application triggers the refundApi to make the request.

3. Transaction Bill​

  • Variables
    • The variable billTime receives the billing date.
    • The variable billType receives the bill type.
    • The variable billData receives the billing data.
    • The variable exportData receives the converted billing export data.
    • The variable payCoulom is the column field of the payment bill data table.
    • The variable allCoulom is the column field of the all billing data table.
    • The variable refundCoulom is the table column field for refund billing data.
    • The variable totalData is for displaying the summarized billing data.
  • Apis
    • getTradeBill: Query trade bill application information (billTime, billType)
  • JavaScript method
    • setBillData consolidates the obtained billing data and assigns it to the variables billData and totalData.
  • Click event
    • Query bill click event: triggers getTradeBill to query the trade bill of the currently selected date and type.
    • Download bill click event: if there is order data, it triggers exporting an excel file and downloads the file directly.

4. Funds Bill​

  • Variables
    • The variable billTime receives the billing date.
    • The variable billType receives the bill type.
    • The variable billData receives the billing data.
    • The variable totalData is for displaying the summarized billing data.
  • Apis
    • getFundFlowBill: Query fund flow bill application information (billTime, billType)
  • JavaScript method
    • setBillData consolidates the obtained billing data and assigns it to the variables billData and totalData.
  • Click event
    • Query bill click event: triggers getTradeBill to query the trade bill of the currently selected date and type.
    • Download bill click event: if there is order data, it triggers exporting an excel file and downloads the file directly.