クイックスタートガイド

アカウント登録・プラン選択

VTO API Serviceにアカウント登録し、ご希望のプラン（StarterまたはPro）を選択してください。 Stripe決済後、ライセンスキーが自動発行されます。

サーバー側プロキシを設置

セキュリティのため、クライアント側からのAPI呼び出しを避けるため、サーバー側プロキシエンドポイントを実装します。 以下は標準的なPHP実装例です。

ファイル: /api/widget_token.php

<?php
declare(strict_types=1);

// ===== マイページで取得した値を設定 =====
$API_KEY       = 'api_XXXX-XXXX-XXXX-XXXX';  // APIキー
$SHARED_SECRET = 'your_shared_secret_here';   // シークレットキー
$API_BASE      = 'https://asp.kitemir.jp/API_SERVICES';
// =========================================

header('Content-Type: application/json; charset=utf-8');

// Origin取得（ブラウザから自動送信）
$origin = $_SERVER['HTTP_ORIGIN'] ?? '';
if (empty($origin) && !empty($_SERVER['HTTP_REFERER'])) {
    $parsed = parse_url($_SERVER['HTTP_REFERER']);
    $origin = ($parsed['scheme'] ?? 'https') . '://' . ($parsed['host'] ?? '');
}

// HMAC署名を生成（パイプ区切り: api_key|origin|timestamp）
$timestamp = time();
$message   = $API_KEY . '|' . $origin . '|' . $timestamp;
$signature = hash_hmac('sha256', $message, $SHARED_SECRET);

$payload = json_encode([
    'api_key'   => $API_KEY,
    'origin'    => $origin,
    'timestamp' => $timestamp,
    'signature' => $signature,
]);

// asp.kitemir.jp API にリクエスト
$ch = curl_init($API_BASE . '/api/token.php');
curl_setopt_array($ch, [
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_POST           => true,
    CURLOPT_POSTFIELDS     => $payload,
    CURLOPT_HTTPHEADER     => ['Content-Type: application/json'],
    CURLOPT_SSL_VERIFYPEER => true,
    CURLOPT_TIMEOUT        => 10,
]);

$response = curl_exec($ch);
$httpCode = (int)curl_getinfo($ch, CURLINFO_HTTP_CODE);
curl_close($ch);

// レスポンスをそのまま返却
http_response_code($httpCode);
echo $response;
?>

重要: ライセンスキーとシークレットキーは環境変数（.env）に保存し、 ソースコードに直接記述しないでください。

商品ページに試着ボタンを設置

商品ページのHTMLに「試着してみる」ボタンを追加します。 クリックでWidgetモーダルが起動します。

<button
    onclick="VtoWidget.open({
        garmentUrl: 'https://your-ec-site.com/images/dress.webp',
        category: 'one-pieces',
        productName: '素敵なドレス',
        productPrice: 15000,
        onAddToCart: function() {
            // 「カートに追加」ボタンが押された時の処理
            addToMyCart(123);
        }
    })"
    class="bg-vto text-white font-bold py-3 px-8 rounded-lg hover:bg-purple-800 transition"
>
    試着してみる
</button>

パラメータ説明:

• garmentUrl: 試着用服画像のURL（必須）
• category: tops / bottoms / one-pieces / auto（必須）
• productName: 商品名（Widget内に表示）
• productPrice: 価格（Widget内に表示・円）
• onAddToCart: 試着結果画面の「カートに追加」ボタン押下時のコールバック