With this topic, you can learn how to implement cashier payment capability in your mini program. Cashier payment provides an easy, secure payment experience for users to pay on your mini program. To dig deeper, see Alipay+ Cashier Payment Introduction for the benefits, features, and user experience of cashier payments.

Note: This solution is aimed at mini programs that are released to Alipay+ partner apps. If you release your mini program to Alipay China, refer to the Alipay China cashier payment solution.

Before you start

Before you start, make sure you know who your acquiring partner is:

• If you choose Alipay merchant service, refer to Alipay Developer Center to get API documentation.
• If you choose other acquiring partners of Alipay+, contact your local acquiring partner to get API documentation.

Note: This solution is based on Alipay merchant service as the acquiring partner, which is also applicable to other acquiring partners of Alipay+.

Procedures

The following diagrams walk you through how to obtain cashier payment capability.

Sequence

The diagram below shows the sequence of the cashier payment:

The steps in the diagram are described as follows:

1. The user opens a mini program and places an order [1]. The mini program shows the order to the user.
2. After the user confirms the order, the mini program invokes the my.getSiteInfo JASPI and gets the system information from the super app [1.2].
3. The mini program calls the merchant server's order creation API and sends a request to create the order [1.3].
4. The merchant server sends the order creation request to the acquiring partner [1.3.1]. Note: For the order creation API of Alipay merchant service, see /v1/payments/pay.
5. The acquiring partner verifies the request and returns the payment URL to the merchant server [1.3.1.3]. The merchant server returns the URL to the mini program [1.4].
6. With the payment URL, the mini program invokes the my.tradePay JSAPI to make the payment to the super app [1.5]. The super app transfers the payment request to the super app server for decoding. Then the super app shows the cashier page [1.5.1].
7. The user checks the order and confirms the payment [2]. After the payment is made to the super app server, the payment result is returned to the super app while the latter shows the payment result page.
8. Then the super app passes the callback result to the mini program [2.1].
9. The acquiring partner calls the notification API to send the payment result to the merchant [3.1]. Note: For the notifyPayment API of Alipay merchant service, see notifyPayment.
10. The mini program gets the payment result [2.1.2].
11. The user has completed the payment on the mini program.

Workflow

The diagram below shows the workflow of cashier payment:

The steps in the diagram are described as follows:

1. A user starts to place an order in the mini program. The mini program invokes the my.getSystemInfo JSAPI to obtain the information about the system.
2. As the order is created, the merchant server submits the payment request to the acquiring partner. The acquiring partner verifies the payment request and returns payment parameters to the mini program.
3. On the user's mobile, the merchant's mini program shows the cashier dialog. Then the mini program calls the my.tradePay JSAPI to evoke the cashier inside the mini program for the user to confirm the payment and complete the transaction.
4. As the payment is confirmed, the acquiring partner obtains the payment logic.
5. After the user makes the payment, the payment result is returned. And the acquiring partner will notify the merchant of the payment result.
6. The user has completed the payment on the mini program.

Sample code

The following sample code shows the calling of the my.tradePay JSAPI to initiate a cashier payment request:

my.tradePay({
  paymentUrl: '',
  success: (res) => {
    my.alert({
    content: JSON.stringify(res),
  });
  },
  fail: (res) => {
    my.alert({
    content: JSON.stringify(res),
  });
  }
});

API list

Refer to the following two tables for the APIs that are used in the above procedures:

JSAPI

OpenAPI

Note: The openAPIs listed above belong to Alipay merchant service. For other acquiring partners of Alipay+, contact your local acquiring partner to get API documentation.