---
title: "Webペイウォールの実装"
description: "Adapty SDKを使ってCapacitorアプリにWebペイウォールを実装する方法を学びましょう。"
---

:::important
始める前に、[ダッシュボードでWebペイウォールを設定](web-paywall)し、Adapty SDKバージョン3.6.1以降をインストールしていることを確認してください。
:::
## Webペイウォールを開く \{#open-web-paywalls\}

自分で開発したペイウォールでWebペイウォールを扱う場合は、SDKのメソッドを使用する必要があります。`.openWebPaywall` メソッドは以下を行います：
1. Adaptyが特定のユーザーに表示されたペイウォールとリダイレクト先のWebページを紐付けるための一意のURLを生成します。
2. ユーザーがアプリに戻ったタイミングを追跡し、プロファイルのアクセス権が更新されたかどうかを確認するために短い間隔で `.getProfile` を呼び出します。
支払いが成功してアクセス権が更新されると、サブスクリプションはほぼ即座にアプリ内で有効になります。

```typescript showLineNumbers

try {
  await adapty.openWebPaywall({ paywallOrProduct: product });
} catch (error) {
  console.error('Failed to open web paywall:', error);
}
```
:::note
`openWebPaywall` メソッドには2つのバージョンがあります：
1. `openWebPaywall({ paywallOrProduct: product })` — ペイウォールを基にURLを生成し、プロダクトデータもURLに追加します。
2. `openWebPaywall({ paywallOrProduct: paywall })` — ペイウォールを基にURLを生成しますが、プロダクトデータはURLに追加しません。AdaptyのペイウォールのプロダクトがWebペイウォールのプロダクトと異なる場合に使用してください。
SDK v4では、`paywallOrProduct`のペイウォール側は`AdaptyFlowPaywall`（取得したフローのペイウォールバリアント）を受け取ります。インデックスアクセスする前に`flow.paywalls`が空でないことを確認してください（例：`flow.paywalls[0]`）。
:::

#### エラーの処理 \{#handle-errors\}
| エラー                                   | 説明                                            | 推奨される対処法                                                        |
|-----------------------------------------|--------------------------------------------------------|---------------------------------------------------------------------------|
| AdaptyError.paywallWithoutPurchaseUrl   | ペイウォールにウェブ購入 URL が設定されていません | Adapty ダッシュボードでペイウォールが正しく設定されているか確認してください |
| AdaptyError.productWithoutPurchaseUrl   | プロダクトにウェブ購入 URL がありません            | Adapty ダッシュボードでプロダクトの設定を確認してください                  |
| AdaptyError.failedOpeningWebPaywallUrl  | ブラウザで URL を開くことができませんでした                  | デバイスの設定を確認するか、別の購入方法を提供してください           |
| AdaptyError.failedDecodingWebPaywallUrl | URL 内のパラメーターを正しくエンコードできませんでした        | URL パラメーターが有効かつ正しい形式であるか確認してください                    |
## ウェブペイウォールのURLを自分で取得する \{#get-the-web-paywall-url-without-opening-it\}

SDKにページを開かせるのではなく、ウェブ購入ページを自分で表示したい場合は、`createWebPaywallUrl` を使用してください。これは `openWebPaywall` が開くのと同じ固有のURLを返すので、独自のウェブビューでレンダリングしたり、リダイレクトを自分でハンドリングしたりできます。引数には `openWebPaywall` と同じ `paywallOrProduct` を渡します。フェッチしたフローのペイウォールバリアント（`AdaptyFlowPaywall`）または `AdaptyPaywallProduct` を指定できます。
```typescript showLineNumbers

try {
  const url = await adapty.createWebPaywallUrl({ paywallOrProduct: product });
  // open `url` in your own web view, or handle the redirect yourself
} catch (error) {
  console.error('Failed to create web paywall URL:', error);
}
```

:::note
任意のURL（ウェブペイウォール以外）をネイティブブラウザで開く場合——たとえばフローのボタンから——は、代わりに [`adapty.openWebUrl`](capacitor-handle-paywall-actions#open-urls-from-flows-and-paywalls) を使用してください。
:::
## ウェブペイウォールをアプリ内ブラウザで開く \{#open-web-paywalls-in-an-in-app-browser\}

:::important
アプリ内ブラウザでウェブペイウォールを開く機能は、Adapty SDK v3.15 以降でサポートされています。
:::

デフォルトでは、ウェブペイウォールは外部ブラウザで開きます。

シームレスなユーザー体験を提供するために、ウェブペイウォールをアプリ内ブラウザで開くことができます。これにより、アプリを切り替えることなく、アプリ内でウェブ購入ページを表示してトランザクションを完了できます。

これを有効にするには、`openWebPaywall` の `openIn` に `WebPresentation.BrowserInApp` を設定します。
```typescript showLineNumbers

try {
    await adapty.openWebPaywall({
        paywallOrProduct: product,
        openIn: WebPresentation.BrowserInApp, // default – WebPresentation.BrowserOutApp
    });
} catch (error) {
    console.error('Failed to open web paywall:', error);
}
```