📖 目次

🎯 実装概要

✅ 実装完了で得られる機能

  • 動的価格計算: 基準料金に応じた保証料の自動計算・表示
  • リアルタイム監視: 価格変更の自動検知と保証料更新
  • イベント通知: 選択状態変更時の事業者システムへの通知
  • 決済統合: 既存決済フローへの保証料金の組み込み

📋 導入方法

✅ 簡単1行導入

導入時間: 5-10分で完了

1行のスクリプトを予約フォームに追加するだけで、天候保証機能が利用できます。

🚀 導入手順

推奨方法: 動的スクリプト読み込み

<script>
(function() {
    const script = document.createElement('script');
    script.src = 'https://linktrip-widget.web.app/quickstart-embed.js?partner=[事業者ID]';
    script.async = true;
    document.head.appendChild(script);
})();
</script>

推奨理由: CSP対応、エラーハンドリング、既存システムとの競合回避

代替方法: 直接スクリプトタグ

<script src="https://linktrip-widget.web.app/quickstart-embed.js?partner=[事業者ID]" async></script>

使用ケース: シンプルな実装が必要な場合

✅ 前提条件

事業者ID・設定は準備済みの前提で、技術的な導入手順を説明します。

✅ 自動で実現される機能

  • 適切な位置へのウィジェット自動挿入
  • 基準価格の自動取得・監視
  • 保証料の動的計算（max(基準価格 × 料率, 最低料金)）
  • 合計金額の自動更新・表示
  • 価格変更の自動検知（MutationObserver使用）

📡 イベント連携仕様

保証選択イベント

LinkTrip.onSelect(callback)

チェックボックスがONになった時に発火

LinkTrip.onSelect((data) => {
    // 保証選択時の処理
});

// data の内容:
{
    instanceId: 'linktrip-1640995200-abc123def',
    partnerId: 'demo-partner',
    isSelected: true,            // 保証選択状態
    price: 1500,                 // 保証料
    basePrice: 15000             // 基準料金
}

保証解除イベント

LinkTrip.onDeselect(callback)

チェックボックスがOFFになった時に発火

LinkTrip.onDeselect((data) => {
    // 保証解除時の処理
});

// data の内容:
{
    instanceId: 'linktrip-1640995200-abc123def',
    partnerId: 'demo-partner',
    isSelected: false,           // 保証選択状態
    price: 0,                    // 保証料（解除時は0）
    basePrice: 15000             // 基準料金
}

📋 まとめ

✅ 基本導入手順

  1. スクリプト追加: 予約フォームページに1行のコードを追加
  2. 動作確認: チェックボックス表示と価格計算の確認
  3. イベント実装: 必要に応じて選択・解除イベントを処理

⚠️ 注意事項

  • 決済システムとの統合は事業者側で実装が必要です
  • 詳細な統合方法は別途「決済システム統合ガイド」を参照してください

📍 配置場所

予約フォームがあるHTMLページの<head>タグ内、または</body>終了タグ直前に配置してください。