Use PaymentUrl 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 paymentUrl. Both the integration processes for mini program developers and the user experience for users are similar to those of the payment by 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 paymentUrl and obtain the integration guide from the wallet app.
  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:

image

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 paymentUrl, and 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 wallet app. (Step 9)
  7. The wallet app obtains the order information and renders the cashier page. (Step 10-13)
  8. The user confirms the payment and the wallet processes the payment request. (Step 14-17)
  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 18 & 19)
  10. The mini program client displays the payment result. (Step 20)

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 with paymentUrl:

my.tradePay({

    paymentUrl: 'payment url',  

    success: function(res) {            

        my.alert({

            content: JSON.stringify(res),

        });

    },

    fail: function(res) {  

        my.alert({

            content: JSON.stringify(res),

        });

    },

});