展示流程与付费墙 - Capacitor

如果你在付费墙编辑工具中创建了流程或付费墙，无需在移动端代码中手动渲染，即可将其展示给用户。这样的流程已包含展示内容和展示方式的完整配置。

在开始之前，请确保：

1. 你已创建流程或付费墙。
2. 你已将其添加到版位。
3. 你已获取流程并准备好视图。

要将流程或付费墙显示为独立屏幕，请在由 createFlowView 方法创建的 view 上调用 view.present() 方法。每个 view 只能使用一次。如果需要再次显示流程，请再次调用 createFlowView 以创建新的 view 实例。

const view = await createFlowView(flow);

// Optional: handle flow events (close, purchase, restore, etc)
// await view.setEventHandlers({ ... });

try {
  await view.present();
} catch (error) {
  // handle the error
}

配置 iOS 展示样式

通过向 present() 方法传递 iosPresentationStyle 参数，可以配置流程在 iOS 上的展示方式。该参数接受 'full_screen'（默认值）或 'page_sheet' 两个值。在 Android 上，流程始终以全屏 Activity 的形式展示。

try {
  await view.present({ iosPresentationStyle: 'page_sheet' });
} catch (error) {
  // handle the error
}

使用开发者自定义计时器

要在移动应用中使用开发者自定义计时器，请使用 timerId，在本例中为 CUSTOM_TIMER_NY，即你在 Adapty 看板中设置的开发者自定义计时器的 Timer ID。这可确保你的应用动态更新计时器，显示正确的值——例如 13d 09h 03m 34s（计算方式为计时器的结束时间（如元旦）减去当前时间）。

const customTimers = { 'CUSTOM_TIMER_NY': new Date(2025, 0, 1) };

const view = await createFlowView(flow, { customTimers });

在此示例中，CUSTOM_TIMER_NY 是你在 Adapty 看板中设置的开发者自定义计时器的计时器 ID。计时器会确保你的应用动态更新并显示正确的倒计时值——例如 13d 09h 03m 34s（由计时器的结束时间（如元旦）减去当前时间计算得出）。

显示对话框

当 Android 上展示 flow 视图时，请使用此方法代替原生的 alert 对话框。在 Android 上，普通 alert 会出现在 flow 视图的后面，导致用户无法看到。此方法可确保在所有平台上，对话框都能正确显示在 flow 的上层。

try {
  const action = await view.showDialog({
    title: 'Close paywall?',
    content: 'You will lose access to exclusive offers.',
    primaryActionTitle: 'Stay',
    secondaryActionTitle: 'Close',
  });

  if (action === 'secondary') {
    // User confirmed - close the flow
    await view.dismiss();
  }
  // If primary - do nothing, user stays
} catch (error) {
  // handle error
}

用新订阅替换旧订阅

当 Android 用户在已有活跃订阅的情况下尝试购买新订阅时，你可以在创建流程视图时传入订阅更新参数，来控制新购买的处理方式。如需用新订阅替换当前订阅，请在 createFlowView 中使用 productPurchaseParams，并传入 oldSubVendorProductId 和 prorationMode 参数。

const productPurchaseParams = flow.paywalls
  .flatMap((paywall) => paywall.productIdentifiers)
  .map((productId) => {
    const params: MakePurchaseParamsInput = {};
    if (Capacitor.getPlatform() === 'android') {
      params.android = {
        subscriptionUpdateParams: {
          oldSubVendorProductId: 'PRODUCT_ID_OF_THE_CURRENT_ACTIVE_SUBSCRIPTION',
          prorationMode: 'with_time_proration',
        },
      };
    }
    return { productId, params };
  });

const view = await createFlowView(flow, { productPurchaseParams });

如果你已经使用付费墙编辑工具自定义了付费墙，就不需要在移动端代码中手动处理渲染逻辑来向用户展示它。这类付费墙已经包含了展示内容和展示方式的完整配置。

要显示付费墙，请在由 createPaywallView 方法创建的 view 上调用 view.present() 方法。每个 view 只能使用一次。如果需要再次显示付费墙，请重新调用 createPaywallView 创建新的 view 实例。

const view = await createPaywallView(paywall);

view.setEventHandlers({
  onUrlPress(url) {
    window.open(url, '_blank');
    return false;
  },
});

try {
  await view.present();
} catch (error) {
  // handle the error
}

使用开发者自定义计时器

要在移动应用中使用开发者自定义计时器，请使用 timerId，本示例中为 CUSTOM_TIMER_NY，即你在 Adapty 看板中设置的开发者自定义计时器的 Timer ID。这样可以确保应用动态更新计时器，显示正确的值——例如 13d 09h 03m 34s（计算方式为计时器的结束时间（如元旦）减去当前时间）。

const customTimers = { 'CUSTOM_TIMER_NY': new Date(2025, 0, 1) };

const view = await createPaywallView(paywall, { customTimers });

在此示例中，CUSTOM_TIMER_NY 是你在 Adapty 看板中设置的开发者自定义计时器的计时器 ID。该计时器可确保你的应用动态更新计时器显示值，例如 13d 09h 03m 34s（计算方式为计时器的结束时间（如元旦）减去当前时间）。

显示对话框

在 Android 上展示付费墙视图时，请使用此方法代替原生的 alert 对话框。在 Android 上，普通的 alert 会出现在付费墙视图的后面，导致用户看不到它。此方法可确保对话框在所有平台上都能正确显示在付费墙上方。

try {
  const action = await view.showDialog({
    title: 'Close paywall?',
    content: 'You will lose access to exclusive offers.',
    primaryActionTitle: 'Stay',
    secondaryActionTitle: 'Close',
  });

  if (action === 'secondary') {
    // User confirmed - close the paywall
    await view.dismiss();
  }
  // If primary - do nothing, user stays
} catch (error) {
  // handle error
}

配置 iOS 展示样式

通过向 present() 方法传递 iosPresentationStyle 参数，可以配置付费墙在 iOS 上的展示方式。该参数接受 'full_screen'（默认值）或 'page_sheet' 两个值。

await view.present({ iosPresentationStyle: 'page_sheet' });