Use PaymentUrl to pay

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

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 creates an order, then presses the Pay button in the mini program.
2. The mini program redirects the user to the super app and the super app displays the payment page.
3. The user confirms the order information, such as the payee and amount, then clicks the Pay button to make the payment.
4. After confirming the payment, the super 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 super app supports the payment by paymentUrl and obtain the integration guide from the super app.
2. Integrate the payment service at the mini program server side.
3. Create a mini program in the super app workspace on the Mini Program Platform, or make sure that the mini program can be published in the super app.
4. Provide goods and payment services in the mini program.
5. Publish the mini program.

Payment process

The following figure illustrates the 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 a request to create the order 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 super app server via the server API provided by the Super APP (Step 3 & 4).
4. The Super APP server creates the order and generates paymentUrl, then returns paymentUrl to the mini program server (Step 5-7).
5. The mini program server returns paymentUrl to the mini program client (Step 8).
6. The mini program client initiates the payment request by calling the my.tradePay API with paymentUrl to the super app (Step 9).
7. The Super APP app obtains the order information and renders the cashier page (Step 10-13).
8. The user confirms the payment and the super app processes the payment request (Step 14-17).
9. The super app returns the payment result to the mini program client. At the same time, the super app server returns the payment result to the mini program server (Step 18 & 19).
10. The mini program client displays the payment result (Step 20).

Note:

The payment flow is for reference and may vary depending on the API implementation of the super app.

Sample code

Sample code for the my.tradePay API calling with paymentUrl is as follows:

my.tradePay({
    paymentUrl: 'payment url',  
    success: function(res) {            
        my.alert({
            content: JSON.stringify(res),
        });
    },
    fail: function(res) {  
        my.alert({
            content: JSON.stringify(res),
        });
    },
});