(Optional) Debug and configure mini programs

With this topic, Alipay+ mini program developers can learn how to debug and configure mini programs that are launched to Alipay China (AlipayCN).

Notes:

  • This topic is aimed at mini programs that are released to AlipayCN. If you release your mini program to Alipay+ partner apps, refer to Configure mini programs.
  • Due to functional limitations, the current version of IDE for Alipay+ mini programs cannot debug mini programs that are launched to Alipay China. So for this kind of mini program, developers need to debug with the help of the mini program IDE of Alipay China.

Prerequisites

Before you start, make sure to meet the following requirements:

  1. The merchant needs to get onboarded to Alipay+ Mini Program Platform, create a mini program, and upload a mini program. To learn more, refer to Manage Alipay+ mini programs in Alipay China.
  2. The merchant needs to log in to Alipay China with the account registered on the Alipay Global Merchant portal (Let's name it Account A for distinction).
  3. The merchant developer needs to create an account in Alipay China.

Procedures

To debug your mini program in the IDE of Alipay China, follow the steps below:

Step 1: Add a new member

Account A

  1. After you logged in to Alipay China with Account A, find the mini program you created and uploaded on Alipay+ Mini Program Platform. Click "查看" to view and manage the mini program.

image

  1. On the left navigation bar, click "成员管理" to add or manage members.

image

  1. Click "添加开发成员" to add a developer member to help with your development. On the pop-up window, enter the developer's account (Name it Account B), click "查找" and then "确定" to invite the developer.

Note: Account B must be an account registered in Alipay China.

image

  1. Then you can see the member invitation status is pending confirmation.

image

Account B

  1. The developer that is invited needs to log in to the Alipay China app. Check the inbox messages. Then click "小程序开发者邀请" to learn more about the invitation.

image

  1. Click "查看详情" to view more details about the invitation.

image

  1. Click the "通过" button to accept the invitation.

image

Step 2: Debug with Alipay IDE Lite

  1. Log in to IDE with the account that you registered on Alipay+ Mini Program Platform (Account A). At the top of the IDE interface, click Open In Alipay IDE.

image

  1. If you haven't installed Alipay IDE, you will be directed to the following window. Click OK to download and install Alipay IDE.

image

  1. Once you complete the installation, you are directed to the debugging interface of Alipay IDE Lite. Click the login icon in the upper-left corner and scan the QR code with Account B. Then start to debug the mini program.

image

Step 3: Configure domain whitelist

  1. Log in to Alipay China with Account A. Then click "查看" to view and manage your mini program.

image

  1. On the left navigation bar, click "开发设置" to configure the server domain whitelist and H5 domain whitelist. See below the access scope of the server domain and H5 domain in the whitelist:
    • Server domain in the whitelist can access data and make out-of-domain calls.
    • H5 domain in the whitelist can access the mobile page (H5) via the web-view component.

image

Server domain whitelist

To add and configure the server domain whitelist, follow the steps below:

  1. Click "添加" to open the configuration window. Enter the domain address in the format of https//:yourpath. Then click "确定" to complete the configuration.

image

  1. A security scan note will appear, indicating that Alipay China will perform a security scan on the domain address you entered.

image

  1. (Optional) Go to "开发" >"安全信息" to view the scan results after one hour.

image

H5 domain whitelist

To add and configure the H5 domain whitelist, follow the steps below:

  1. Click "添加" to open the configuration window.

image

  1. Click "下载校验文件" to download the verification file and place it in the root of the domain.

image

  1. Enter the domain address in the format of https://yourpath, which supports letters, numbers, or hyphens (-).

image

  1. Then click "点击这里" to check whether the verification file is accessible. If the configuration is accurate, the verification is passed. Once passed, click "确定" to complete the configuration of the H5 domain whitelist.

image

With the above steps, you have now learned how to debug and configure your mini program that is launched to Alipay China.

Next steps

Release mini programs

More information

Manage Alipay+ mini programs in Alipay China