觀看條件 - 付費觀看

一、設定資訊

1.1 付費觀看條件設定資訊

Interface 介面： AuthSettingItemPay

二、使用方式

2.1 取得付費觀看的支付資訊

用於取得觀眾進行付費觀看的支付資訊，如：PC 端的支付 QR Code、微信 H5 的微信支付簽名等，呼叫後可根據支付 id payId 查詢觀眾的付費狀態。

Api 方法： getAuthPayData(): Promise<CommonResult<AuthPayFailReason, AuthPayData>>

回傳值說明： 支付資料，Promise<CommonResult<AuthPayFailReason, AuthPayData>> 型別

範例：

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 取得付費觀看的支付狀態

當呼叫 getAuthPayData 後，根據回傳的 payId 查詢支付狀態，回傳 true 時表示支付成功，隨後即可進入觀看頁。

Api 方法： checkPayStatus(payId?: string): Promise<boolean>

參數說明：

• payId：支付 id，string 型別，選傳

回傳值說明： 是否支付成功，Promise<boolean> 型別

範例：

// 获取支付数据
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 取得微信掃碼觀看資訊

已付費過的觀眾可以透過微信掃描 QR Code 直接進入觀看頁，無需二次支付，透過該方法取得掃碼資訊，呼叫後可根據記錄 id logId 查詢觀眾的掃碼狀態。

Api 方法： getWechatPayCheckData(): Promise<AuthWechatPayCheckData>

回傳值說明： 微信掃碼觀看資訊，Promise<AuthWechatPayCheckData> 型別，詳細型別說明如下

範例：

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

2.4 取得微信掃碼觀看狀態

當呼叫 getWechatPayCheckData 後，根據回傳的 logId 查詢支付狀態，回傳 true 時表示使用已支付的微信掃碼，隨後即可進入觀看頁。

Api 方法： checkWechatPayStatus(logId?: string): Promise<boolean>

參數說明：

• logId：記錄 id，string 型別，選傳

回傳值說明： 是否使用已支付的微信掃碼成功，Promise<boolean> 型別

範例：

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

三、PC 端付費觀看處理

3.1 PC 端微信掃碼支付

PC 端頁面需要透過掃描微信支付 QR Code 進行支付，開發者可透過 getAuthPayData 取得微信支付 QR Code 位址，並呼叫 startCheckWechatPayStatusPolling 輪詢微信支付狀態。

範例程式碼：

/** 获取微信支付二维码 */
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 端微信掃碼觀看

已付費過的觀眾可以透過微信掃描 QR Code 直接進入觀看頁，無需二次支付，開發者可透過 getWechatPayCheckData 取得微信掃碼資訊，並呼叫 startCheckWechatPayStatusPolling 輪詢微信掃碼狀態。

範例程式碼：

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('支付超时！');
    },
  });
}

如果您不使用 startCheckWechatPayStatusPolling 來輪詢偵測微信掃碼，可呼叫 checkWechatPayStatus 來取得觀眾的微信掃碼登入狀態，範例程式碼：

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 端支付成功處理

由於 PC 端微信開啟觀看頁時需要進行微信授權處理，因此在 PC 端支付成功後需要判斷當前環境與微信授權狀態，在微信端且未授權時進行微信非靜默授權，範例程式碼：

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

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

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

四、微信 H5 付費觀看處理

4.1 微信 H5 微信支付觀看

在微信 H5 環境下，可透過 getAuthPayData 取得微信 JSSDK 支付 API 的簽名參數，當觀眾支付成功後，呼叫 checkPayStatus 檢查微信支付狀態，當回傳成功後即可進入直播觀看頁，程式碼範例如下：

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 微信 H5 支付成功處理

在微信 H5 支付成功後，需要觀眾進行微信非靜默授權，範例程式碼如下：

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

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