Use TradeNO to pay in Mini Program

Users can use the wallet app to pay for the order placed in the mini program if the wallet app provides the payment service. This document introduces the payment by calling the my.tradePay API with tradeNo.

User experience

To complete a payment in the mini program, users usually follow the steps below:

1. The user chooses goods in the mini program and create an order, then presses the Pay button in the mini program.
2. The mini program redirects the user to the wallet app and the wallet app displays the payment page.
3. The user confirms the order information, such as the payee and amount, then clicks the Pay button for payment.
4. After confirming the payment, the wallet app displays the payment result and redirects the user back to the payment result page in the mini program.

Procedures

To use the my.tradePay API to initiate a payment in the mini program, mini program developers must complete the following steps:

1. Confirm that the payment service provided by the wallet app supports the payment by tradeNO and obtain the integration guide from the wallet.
2. Integrate the payment service at the mini program server side.
3. Create a mini program in the wallet workspace on the Mini Program platform, or make sure that the mini program can be published in the wallet app.
4. Provide goods and payment service in the mini program.
5. Publish the mini program.

Payment process

The following figure illustrates the payment process:

Figure 1. Payment process

The payment process contains the following steps:

1. The user places an order in the mini program. (Step 1)
2. The mini program client sends the create order request to the mini program server by calling the my.request API. (Step 2)
3. The mini program server creates the order and sends the request to the wallet server via the server API provided by the wallet. (Step 3 & 4)
4. The wallet server creates the order and generates tradeNo, and returns tradeNo to the mini program server. (Step 5-7)
5. The mini program server returns tradeNo to the mini program client. (Step 8)
6. The mini program client initiates the payment request by calling the my.tradePay API with tradeNo to the wallet app. (Step 9)
7. The wallet app obtains the order information and renders the cashier page. (Step 10-12)
8. The user confirms the payment and the wallet processes the payment request. (Step 13-16)
9. The wallet app returns the payment result to the mini program client. At the same time, the wallet server returns the payment result to the mini program server. (Step 17 & 18)
10. The mini program client displays the payment result. (Step 19)

Note:

The payment flow is for reference and might differ depending on the API implementation of the wallet.

Sample code

Sample code for the my.tradePay API calling:

my.tradePay({
    tradeNO: '201711152100110410533667792',  
    success: function(res) {            
        my.alert({
            content: JSON.stringify(res),
        });
    },
    fail: function(res) {  
        my.alert({
            content: JSON.stringify(res),
        });
    },
});