Watch Conditions - Paid Viewing

1. Configuration Information

1.1 Paid Viewing Condition Configuration Information

Interface: AuthSettingItemPay

2. Usage

2.1 Get Payment Information for Paid Viewing

Used to obtain payment information for viewers to make paid viewing, such as: PC payment QR code, WeChat H5 WeChat Pay signature, etc. After calling, the viewer's payment status can be queried using the payment id payId.

Api Method: getAuthPayData(): Promise<CommonResult<AuthPayFailReason, AuthPayData>>

Return Value Description: Payment data, type Promise<CommonResult<AuthPayFailReason, AuthPayData>>

Example:

const { success, ...payData } = await watchCore.auth.getAuthPayData();
if(!success) return
console.log('支付 id', payData.payId);
console.log('微信支付地址', payData.codeUrl); // PC 端下使用
console.log('微信支付二维码图片地址', payData.qrcodeUrl); // PC 端下使用
console.log('微信 H5 支付签名', payData.wxPaySignData); // 微信 H5 下使用

2.2 Get Payment Status for Paid Viewing

After calling getAuthPayData, query the payment status based on the returned payId. When true is returned, it indicates successful payment, and the viewer can then enter the viewing page.

Api Method: checkPayStatus(payId?: string): Promise<boolean>

Parameter Description:

• payId: Payment id, type string, optional

Return Value Description: Whether payment was successful, type Promise<boolean>

Example:

// 获取支付数据
const payData = await watchCore.auth.getAuthPayData();
// 检查支付状态
const payStatus = await watchCore.auth.checkPayStatus(payData.payId);
// 支付成功
if (payStatus) {
  toast.success('支付成功');
  handleAuthVerifySuccess({
    success: true,
    authType: AuthType.Pay,
  });
}

2.3 Get WeChat QR Code Viewing Information

Viewers who have already paid can directly enter the viewing page by scanning the WeChat QR code without paying again. Use this method to obtain the QR code information. After calling, the viewer's scan status can be queried using the record id logId.

Api Method: getWechatPayCheckData(): Promise<AuthWechatPayCheckData>

Return Value Description: WeChat QR code viewing information, type Promise<AuthWechatPayCheckData>, detailed type description as follows

Example:

const wechatQrcodeData = await watchCore.auth.getWechatPayCheckData();
console.log('记录 id', wechatQrcodeData.logId);
console.log('微信扫描二维码图片地址', wechatQrcodeData.qrcodeUrl);
console.log('二维码内容', wechatQrcodeData.codeUrl);

2.4 Get WeChat QR Code Viewing Status

After calling getWechatPayCheckData, query the payment status based on the returned logId. When true is returned, it indicates that a paid WeChat account was used to scan the QR code, and the viewer can then enter the viewing page.

Api Method: checkWechatPayStatus(logId?: string): Promise<boolean>

Parameter Description:

• logId: Record id, type string, optional

Return Value Description: Whether a paid WeChat account was successfully used to scan the QR code, type Promise<boolean>

Example:

// 获取扫码数据
const wechatQrcodeData = await watchCore.auth.getWechatPayCheckData();
// 检查扫码状态
const status = await watchCore.auth.checkWechatPayStatus(wechatQrcodeData.logId);
// 扫码成功
if (status) {
  toast.success('扫码成功');
  handleAuthVerifySuccess({
    success: true,
    authType: AuthType.Pay,
  });
}

3. PC Paid Viewing Handling

3.1 PC WeChat QR Code Payment

The PC page requires scanning a WeChat Pay QR code to make a payment. Developers can use getAuthPayData to obtain the WeChat Pay QR code URL and call startCheckWechatPayStatusPolling to poll the WeChat payment status.

Example Code:

/** 获取微信支付二维码 */
async function getPcPayData() {
  const payData = await watchCore.auth.getAuthPayData();

  // 显示支付二维码
  const imageElem = document.createElement('img');
  imageElem.src = payData.qrcodeUrl;

  // 启动前先结束上一次轮询，避免创建多次轮询
  watchCore.auth.closeCheckPayStatusPolling();

  // 启动轮询检查支付状态
  watchCore.auth.startCheckPayStatusPolling({
    // 如果已调用 getAuthPayData，则可以不传 payId
    payId: payData.payId,
    // 支付成功回调，详细的处理流程可见当前文档 [PC 端支付成功处理]
    successCallback: () => {
      onPaySuccess()
    },
    // 支付超时回调
    timeoutCallback: () => {
      console.log('支付超时！');
    },
  });
}

3.2 PC WeChat QR Code Viewing

Viewers who have already paid can directly enter the viewing page by scanning the WeChat QR code without paying again. Developers can use getWechatPayCheckData to obtain the WeChat QR code information and call startCheckWechatPayStatusPolling to poll the WeChat QR code status.

Example Code:

async function getPcWechatPayData() {
  const wechatQrcodeData = await watchCore.auth.getWechatPayCheckData();

  // 显示扫描二维码
  const imageElem = document.createElement('img');
  imageElem.src = wechatQrcodeData.qrcodeUrl;

  // 扫码记录 id
  const logId = wechatQrcodeData.logId;

  watchCore.auth.closeCheckWechatPayStatusPolling();

  // 开启微信扫码状态检查轮询
  watchCore.auth.startCheckWechatPayStatusPolling({
    // 如果已调用 getWechatPayCheckData，则可以不传 logId
    logId: logId,
    // 扫码成功回调，详细的处理流程可见当前文档 [PC 端支付成功处理]
    successCallback: () => {
      onPaySuccess()
    },
    // 扫码超时回调
    timeoutCallback: () => {
      console.log('支付超时！');
    },
  });
}

If you do not use startCheckWechatPayStatusPolling to poll and detect the WeChat QR code, you can call checkWechatPayStatus to obtain the viewer's WeChat QR code login status. Example code:

async function example() {
  const data = await watchCore.auth.getWechatPayCheckData();
  const status = await watchCore.auth.checkWechatPayStatus(data.logId);
  if (status) {
    console.log('扫码成功');
  } else {
    console.log('未扫码登录');
  }
}

3.3 PC Payment Success Handling

Since opening the viewing page on PC via WeChat requires WeChat authorization, after a successful payment on PC, it is necessary to determine the current environment and WeChat authorization status. If on WeChat and not authorized, perform non-silent WeChat authorization. Example code:

import { AuthType } from '@polyv/live-watch-sdk';

function onPaySuccess() {
  // 针对于 PC 端微信客户端，如果需要显示微信用户信息，需要在付费完后做微信非静默授权
  if (isWeixin && !watchCore.weixin.isWeixinWatchAuthorized()) {
    // TODO：执行微信非静默授权
    return;
  }

  handleAuthVerifySuccess({
    success: true,
    authType: AuthType.Pay,
  });
}

4. WeChat H5 Paid Viewing Handling

4.1 WeChat H5 WeChat Pay Viewing

In the WeChat H5 environment, use getAuthPayData to obtain the signature parameters for the WeChat JSSDK payment API. After the viewer successfully pays, call checkPayStatus to check the WeChat payment status. When success is returned, the viewer can enter the live viewing page. Example code:

import { AuthType } from '@polyv/live-watch-sdk';

async function toDoAuthPayMobile() {
  // 非微信打开
  if (!isWeixin) {
    alert('请在微信中打开本页进行支付');
    return;
  }

  const payData = await watchCore.auth.getAuthPayData();
  if (payData.wxPaySignData) {
    // 调用微信 JSSDK 支付 API，唤起支付窗口
    wx.chooseWXPay({
      timestamp: payData.timestamp,
      nonceStr: payData.nonceStr,
      package: payData.package,
      signType: payData.signType,
      paySign: payData.paySign,
      success: () => {
        // 支付成功，详细的处理流程可见文档 4.2
        onPaySuccess();
      },
      cancel: () => {
        alert('您取消了支付');
      },
    });
  }
}

4.2 WeChat H5 Payment Success Handling

After a successful payment on WeChat H5, the viewer needs to perform non-silent WeChat authorization. Example code:

async function onPaySuccess() {
  // 如果未进行非静默授权，则先进行一次非静默授权
  if (!watchCore.weixin.isWeixinWatchAuthorized()) {
    // TODO：执行微信非静默授权
    return;
  }

  // 是否已支付成功
  const payed = await watchCore.auth.checkPayStatus();
  if (payed) {
    handleAuthVerifySuccess({
      success: true,
      authType: AuthType.Pay,
    });
  }
}