(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.

Note: 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, you need to meet the following requirements:

  1. 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. Create an account in Alipay China.

Procedures

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

Step 1: Log in to Alipay China

  1. Go to Alipay China.

image

  1. Enter the account and password that you signed up for on the Alipay Global Merchant portal (Let's name it Account A for distinction). Then click the "登录" button to try to log in. An indicator as below will appear, indicating that you failed to log in because your account is an account for the Alipay Global Merchant portal. To continue, click "点此登录" in blue.

image

  1. You are navigated to the login interface as below. Enter the account and password (Account A). Then enter the one-time code and click Sign In.

image

With the above steps, you have now logged in to Alipay China successfully.

Step 2: 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 Alipay China. 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 3: Download Alipay China IDE

  1. Open this website (https://opendocs.alipay.com/mini/ide/download) to download Alipay China IDE and use the IDE to open your code project.

image

  1. Click Login in the top right corner. On the pop-up window, the developer that is invited opens the Alipay China with Account B and scans the QR code to log in to the IDE. Then start to debug the mini program.

image

Step 4: Configure domain whitelist

  1. Log in to Alipay China with Account A as shown in Step 1. 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 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

Generate QR codes

Remove mini programs

More information

Manage Alipay+ mini programs in Alipay China