> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dodopayments.com/llms.txt
> Use this file to discover all available pages before exploring further.

# GoHighLevel

> ノーコードの決済リンク、オーバーレイチェックアウト、またはインラインチェックアウトを使用して Dodo Payments と GoHighLevel（GHL）を統合し、webhook でフルフィルメントを自動化します。

## はじめに

[GoHighLevel](https://www.gohighlevel.com/)（GHL）は、ファネル、Webサイト、メール/SMS、オートメーション（「Workflows」）をカバーするオールインワンの CRM およびマーケティングプラットフォームです。GHL では Dodo Payments が組み込みプロセッサとして掲載されていないため、チェックアウトをどの程度ページに組み込みたいか、またどの程度コードを使用できるかに応じて、3つの方法のいずれかで2つを接続します。

どの方法でも、フルフィルメントの処理は同じです。Dodo は [webhook events](/developer-resources/webhooks) を GHL の **Inbound Webhook Workflow** に送信し、コンタクトへのタグ付け、アクセス権の付与、確認メッセージの送信を行います。

## 方法を選択する

| 方法                      | 必要なコード         | チェックアウト体験                       | 最適な用途                        |
| ----------------------- | -------------- | ------------------------------- | ---------------------------- |
| **A. Payment Links**    | なし（ノーコード）      | 顧客は Dodo のホスト型チェックアウトにリダイレクトされる | ほとんどの GHL ユーザー、最短での導入        |
| **B. Overlay Checkout** | カスタムコードとバックエンド | GHL ページ上にモーダルが開く                | ファネルから離れず、ページ上でチェックアウトしたいチーム |
| **C. Inline Checkout**  | カスタムコードとバックエンド | チェックアウトフォームをページ内に埋め込む           | 完全に埋め込まれたブランド UX             |

<Info>
  初めて使用する場合は、**方法 A（Payment Links）** から始めてください。ノーコードで、すべての GHL ユーザーが利用でき、数分で設定できます。方法 B と C では [checkout sessions](/api-reference/checkout-sessions/create) を作成するためのバックエンドが必要で、コードの扱いに慣れたチーム向けです。
</Info>

## 前提条件

* 少なくとも1つの **product** を作成済みの Dodo Payments アカウント。
* ファネル、Webサイト、またはワークフローを備えた GoHighLevel アカウント。
* Dodo ダッシュボードの **Settings → Webhooks**（API key には **Settings → Developer**）へのアクセス権。
* 方法 B と C の場合：checkout sessions を作成するための小規模な **backend または serverless endpoint**。

<Note>
  GHL でファネルを *publish* するには **connected domain** が必要です。構築中はファネルの **Preview** を使用してテストしてください。カスタム JavaScript（方法 B と C）は通常、Preview ではなく、**実際のドメイン上の公開ページ**でのみ実行される点に注意してください。
</Note>

## webhook を使用したフルフィルメント（すべての方法）

これがオートメーション層です。一度設定すれば、どのチェックアウト方法を選択しても機能します。

<Steps>
  <Step title="Create the workflow">
    GHL の **sub-account** で、左側のメニューから **Automation** を開きます（**Workflows** タブが表示されます）。**Create workflow** をクリックし、**Start from Scratch** を選択します。
  </Step>

  <Step title="Add the Inbound Webhook trigger">
    ビルダーで **Add new trigger** をクリックします。**Add trigger** パネルで **webhook** を検索し、**Inbound webhook**（**Triggers → Events** の下に表示）を選択します。生成された **Webhook URL** をコピーします。
  </Step>

  <Step title="Register the webhook in Dodo">
    Dodo ダッシュボードで **Settings → Webhooks** に移動し、新しい endpoint を追加して、GHL Inbound Webhook URL を貼り付けます。テスト購入を行い、GHL がサンプル payload を取得できるようにします。これにより、フィールド（customer email、product、amount、status）をマッピングできます。
  </Step>

  <Step title="Add fulfillment actions">
    GHL ワークフローに戻り、イベントに基づいて、**find/create contact by email**、**add a tag**、**grant course/membership access**、**send a confirmation email** などのアクションを追加します。その後、ワークフローを **Publish** します。
  </Step>
</Steps>

<Warning>
  決済は Dodo で処理されるため、GHL の Payments タブには **表示されません**。上記の webhook ワークフローを使用して GHL に照合し、アクセス権付与の **source of truth** にはブラウザのリダイレクトではなく **webhook** を使用してください。顧客が戻る前にタブを閉じる可能性があるためです。
</Warning>

## 方法 A：Payment Links（ノーコード）

GHL のボタン、ファネル CTA、注文ページのボタン、メール、SMS のいずれにも Dodo payment link を設定できます。

<Steps>
  <Step title="Create a product and copy its payment link">
    Dodo ダッシュボードで **Products → Add Product** に移動し、**name** と **price** を設定して、**one-time** または **subscription** を選択し、**Save** します。product を開き、その **Payment Link**（形式：`https://checkout.dodopayments.com/buy/{product_id}`）をコピーします。
  </Step>

  <Step title="Add the link to your GHL button">
    ファネルまたは Webサイトのページを編集し、**Buy / Checkout button** を選択して、アクションを **Open URL / Website** に設定し、Dodo payment link を貼り付けます。
  </Step>

  <Step title="Set a success page (optional)">
    Dodo で product の **return URL** を GHL のサンキューページに設定し、支払い後に顧客がファネルへ戻れるようにします。
  </Step>
</Steps>

<Tip>
  payment link の顧客情報を事前入力して変更不可にしたり、トラッキングを追加したりするには、[payment-link query parameters](/features/checkout) を使用できます。これは、webhook から読み取れるメタデータとして、ファネル ID やオファー ID を渡す場合に便利です。
</Tip>

## 方法 B：Overlay Checkout（カスタムコード）

[Checkout SDK](/developer-resources/overlay-checkout) を CDN 経由で使用し、GHL ページ上に **modal overlay** として Dodo checkout を開きます。[checkout session](/api-reference/checkout-sessions/create) を作成して `checkoutUrl` を返すバックエンドが必要です。

<Steps>
  <Step title="Create a backend endpoint that calls the Checkout Sessions API">
    この手順は **必須** です。SDK には有効な `checkoutUrl` が必要で、作成には **secret API key** が必要です。GHL は静的ページのみをホストするため、このサーバーサイド呼び出しを代わりに実行することはできません。また、[Create Checkout Session API](/api-reference/checkout-sessions/create) をブラウザから直接呼び出してはいけません。ページのソースに secret key が露出してしまうためです。そのため、overlay checkout と inline checkout は **GHL だけでは動作しません**。セッションを作成し、URL だけを返す、管理下のバックエンドが必要です。

    小規模なバックエンドであればどのようなものでも使用できます。serverless function（Cloudflare Workers、Vercel Functions、AWS Lambda、Supabase Edge Functions など）や、既に運用しているサーバー上の endpoint が利用できます。ロジックはどの環境でも同じです。リクエストを受け取り、secret key を使用して Dodo の API を呼び出し、`checkout_url` を返します。

    ハンドラーのロジック例（使用するプラットフォームに合わせて調整してください）：

    ```js theme={null}
    async function createCheckout(env) {
      const res = await fetch("https://test.dodopayments.com/checkouts", {
        method: "POST",
        headers: {
          "Authorization": `Bearer ${env.DODO_API_KEY}`,
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          product_cart: [{ product_id: "pdt_your_product_id", quantity: 1 }],
        }),
      });

      const data = await res.json();
      return { checkoutUrl: data.checkout_url };
    }
    ```

    デプロイ先のプラットフォームで Dodo API key を secret として保存してください（コードにコミットしないでください）。GHL ドメインからのリクエストを許可し（CORS）、管理下のドメイン配下に endpoint を設定します（例：`https://api.example.com/create-checkout`）。live mode に移行したら `https://live.dodopayments.com/checkouts` に切り替えます。
  </Step>

  <Step title="Add a Custom Code element in the GHL page builder">
    GHL page builder でファネルのステップまたは Webサイトのページを開き、次の操作を行います。

    1. ビルダーの左上にある **+** アイコンをクリックして **Quick Add** を開きます。
    2. 左側のカテゴリ一覧から **Elements** を選択します。
    3. **Custom Code**（HTML と表示される場合もあります）を見つけて、ページにドラッグします。
    4. 以下のコードを要素のコードエディターに貼り付け、保存します。

    ```html theme={null}
    <!-- Load the Dodo Checkout SDK -->
    <script src="https://cdn.jsdelivr.net/npm/dodopayments-checkout@latest/dist/index.js"></script>
    <script>
      DodoPaymentsCheckout.DodoPayments.Initialize({
        mode: "test", // change to "live" in production
        displayType: "overlay",
        onEvent: (event) => console.log("Checkout event:", event),
      });

      async function openDodoCheckout() {
        // calls the backend endpoint from the previous step, creating a fresh session per click
        const res = await fetch("https://api.example.com/create-checkout", { method: "POST" });
        const { checkoutUrl } = await res.json();

        DodoPaymentsCheckout.DodoPayments.Checkout.open({ checkoutUrl });
      }
    </script>

    <button onclick="openDodoCheckout()">Pay Now</button>
    ```
  </Step>

  <Step title="Publish and test on your domain">
    Custom JS は常に Preview で実行されるとは限らず、**公開済み**ページ（connected domain）で実行されます。公開後、**Pay Now** をクリックして overlay が開くことを確認します。
  </Step>
</Steps>

## 方法 C：Inline（埋め込み）Checkout

同じ SDK と mount container を使用して、チェックアウトフォームを GHL ページの **内部に** 埋め込みます（リダイレクトなし、ポップアップなし）。方法 B と同様に、セッションを作成するバックエンドが必要です。

<Steps>
  <Step title="Create a backend endpoint that calls the Checkout Sessions API">
    overlay と同じ要件であり、同様に **必須** です。セッションの作成には secret API key が必要なため、サーバーサイドで実行する必要があります。GHL 単独では実行できません。上記の **Overlay Checkout** セクションで説明したものと同じバックエンド endpoint（管理下の小規模な serverless function またはサーバー）を再利用してください。この endpoint は [Create Checkout Session API](/api-reference/checkout-sessions/create) を呼び出し、`{ checkoutUrl }` を返します。
  </Step>

  <Step title="Add a container and SDK via Custom Code">
    GHL page builder で次の操作を行います。

    1. ビルダーの左上にある **+** アイコンをクリックして **Quick Add** を開きます。
    2. 左側のカテゴリ一覧から **Elements** を選択します。
    3. **Custom Code**（HTML と表示される場合もあります）を見つけ、チェックアウトフォームを表示したい場所にドラッグします。
    4. 以下のコードを要素のコードエディターに貼り付け、保存します。

    ```html theme={null}
    <script src="https://cdn.jsdelivr.net/npm/dodopayments-checkout@latest/dist/index.js"></script>

    <div id="dodo-inline-checkout"></div>

    <script>
      DodoPaymentsCheckout.DodoPayments.Initialize({
        mode: "test",
        displayType: "inline",
        onEvent: (event) => console.log("Checkout event:", event),
      });

      async function mountDodoCheckout() {
        // calls the backend endpoint from the previous step
        const res = await fetch("https://api.example.com/create-checkout", { method: "POST" });
        const { checkoutUrl } = await res.json();

        DodoPaymentsCheckout.DodoPayments.Checkout.open({
          checkoutUrl,
          elementId: "dodo-inline-checkout",
        });
      }

      mountDodoCheckout();
    </script>
    ```
  </Step>

  <Step title="Verify your domain for wallets (Apple Pay)">
    inline checkout で Apple Pay を使用するには、[verify your domain](/features/payment-methods/digital-wallets#apple-pay) を実行してください。関連付けファイルをホストし、ダッシュボードでドメインを登録します。
  </Step>
</Steps>

<Warning>
  Inline は GHL で最も複雑な方法です。カスタムコード、バックエンド、実際のドメイン上の公開ページが必要で、Apple Pay を使用する場合はドメイン検証も必要です。完全に埋め込まれたフォームが不要な場合は、方法 A または B を推奨します。
</Warning>

## 処理する Events

| Dodo event                                        | 発生タイミング                | 推奨する GHL action                        |
| ------------------------------------------------- | ---------------------- | -------------------------------------- |
| `payment.succeeded`                               | 決済が取得されたとき             | コンタクトに支払い済みのタグを付け、アクセス権を付与し、確認メッセージを送信 |
| `subscription.active`                             | subscription が有効化されたとき | membership を付与し、オンボーディングワークフローを開始      |
| `subscription.renewed`                            | 更新決済が行われたとき            | 次のサイクルまでアクセス権を延長                       |
| `subscription.on_hold`                            | 更新に失敗したとき              | 支払い督促またはリマインダーワークフローをトリガー              |
| `subscription.cancelled` / `subscription.expired` | subscription が終了したとき   | アクセス権を削除し、解約済みのタグを付与                   |

すべての webhook には **customer email** が含まれます。GHL の **find/create contact by email** アクションを使用して、決済を正しいコンタクトに紐付けます。完全な一覧については、[Webhook Event Guide](/developer-resources/webhooks/intents/webhook-events-guide) を参照してください。

## テストと本番稼働

<Steps>
  <Step title="Test in test mode">
    Dodo を **Test Mode** にしたまま、テストカード `4242 4242 4242 4242`（有効期限は将来の日付、CVC は任意）を使用して購入を完了し、GHL ワークフローが実行されてタグまたはアクセス権が適用されることを確認します。
  </Step>

  <Step title="Go live">
    Dodo を **Live Mode** に切り替え、live mode 用の webhook endpoint を更新します。その他に変更する内容は、方法によって異なります。

    * **Payment Links（A）：** product の **live** payment link に差し替えます。
    * **Overlay checkout（B）：** バックエンドの接続先を `https://live.dodopayments.com/checkouts` に変更し、**live** API key を使用します。また、`Initialize` 呼び出しで SDK の `mode` を `"live"` に設定します。
    * **Inline checkout（C）：** 同じバックエンド endpoint と SDK 初期化を使用するため、overlay と同じです。

    その後、実際のエンドツーエンドの購入を1件実行して確認します。
  </Step>
</Steps>

## Tips

<Tip>
  アクセス権の付与では、**webhook を source of truth として扱ってください**。ブラウザのリダイレクトではなく、`payment.succeeded` / `subscription.active` に基づいて処理します。
</Tip>

<Tip>
  `webhook-signature` ヘッダー（[Standard Webhooks](/developer-resources/webhooks)）を使用して webhook の真正性を検証し、本物の Dodo イベントだけが GHL でフルフィルメントをトリガーするようにします。
</Tip>

## トラブルシューティング

<AccordionGroup>
  <Accordion title="Payment succeeded but nothing happened in GHL">
    Dodo webhook endpoint が正しい GHL Inbound Webhook URL を指していること、ワークフローが **公開済み** であること、フィールドマッピングを作成できるようトリガーがサンプル payload を取得していることを確認してください。
  </Accordion>

  <Accordion title="Overlay or inline button does nothing">
    Custom JS は通常、Preview ではなく **公開済みページ（実際のドメイン）** でのみ実行されます。ページが公開されていること、SDK `<script>` が読み込まれていること、`checkoutUrl` がバックエンドから返された有効な session URL であることを確認してください。
  </Accordion>

  <Accordion title="Contact not created or not matched">
    ワークフローで **find/create contact by email** が使用され、email フィールドが webhook payload からマッピングされていることを確認してください。
  </Accordion>

  <Accordion title="Payment isn't showing in GHL's Payments tab">
    これは想定された動作です。決済は Dodo で処理されるため、webhook ワークフローを使用して GHL に照合してください。
  </Accordion>
</AccordionGroup>