---
title: "ウェブペイウォールの実装"
description: "Adapty SDK を使用して React Native アプリにウェブペイウォールを実装する方法を説明します。"
---

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

## ウェブペイウォールを開く \{#open-web-paywalls\}

自分で開発したペイウォールを使用する場合は、SDK メソッドを使ってウェブペイウォールを処理する必要があります。`.openWebPaywall` メソッドは以下を行います：
1. 特定のユーザーに表示されたペイウォールと、そのユーザーがリダイレクトされるウェブページを Adapty が紐付けるための、一意の URL を生成します。
2. ユーザーがアプリに戻ってきたことを検知し、短い間隔で `.getProfile` をリクエストして、プロファイルのアクセス権が更新されたかどうかを確認します。

これにより、支払いが成功してアクセス権が更新された場合、サブスクリプションはほぼ即座にアプリ内で有効化されます。

```typescript showLineNumbers title="React Native (TSX)"

try {
    await adapty.openWebPaywall(product);
} catch (error) {
    console.warn('Failed to open web paywall:', error);
}
```

:::note
`openWebPaywall` メソッドには 2 つのバージョンがあります：
1. `openWebPaywall(product)` — ペイウォールに基づいて URL を生成し、プロダクトデータも URL に追加します。
2. `openWebPaywall(paywall)` — ペイウォールに基づいて URL を生成しますが、プロダクトデータは URL に追加しません。Adapty ペイウォール内のプロダクトとウェブペイウォール内のプロダクトが異なる場合に使用してください。
:::

#### エラーのハンドリング \{#handle-errors\}

| エラー                                  | 説明                                                   | 推奨される対処法                                                           |
|-----------------------------------------|--------------------------------------------------------|---------------------------------------------------------------------------|
| AdaptyError.paywallWithoutPurchaseUrl   | ペイウォールにウェブ購入 URL が設定されていない         | Adapty ダッシュボードでペイウォールが正しく設定されているか確認してください |
| AdaptyError.productWithoutPurchaseUrl   | プロダクトにウェブ購入 URL が設定されていない           | Adapty ダッシュボードでプロダクトの設定を確認してください                  |
| AdaptyError.failedOpeningWebPaywallUrl  | ブラウザで URL を開くことができなかった                 | デバイスの設定を確認するか、別の購入方法を提供してください                 |
| AdaptyError.failedDecodingWebPaywallUrl | URL のパラメータのエンコードに失敗した                  | URL パラメータが有効で正しい形式であることを確認してください               |

## アプリ内ブラウザでウェブペイウォールを開く \{#open-web-paywalls-in-an-in-app-browser\}

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

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

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

これを有効にするには、`openWebPaywall` の第 2 引数に `WebPresentation.BrowserInApp` を渡してください：

```typescript showLineNumbers title="React Native (TSX)"

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

```