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

# フロントエンドコンポーネント - コンポーネントの使い方

> フロントエンドコンポーネントを連携して、加盟店ページに決済機能を埋め込む方法。

Waffo はフロントエンド SDK `@waffo/payment-sdk` を提供しており、決済およびカードバインド機能を加盟店ページに直接連携できます。

## インストール

```bash theme={null}
npm install @waffo/payment-sdk
```

## 初期化

```typescript theme={null}
import WaffoSDK from '@waffo/payment-sdk';

const sdk = new WaffoSDK('your-client-api-key', {
  env: 'prod',    // 'prod' | 'testing' | 'sandbox'
  locale: 'en'    // optional, defaults to 'en'
});
```

## 機能概要

| 機能            | メソッド                       | 説明                                       |
| ------------- | -------------------------- | ---------------------------------------- |
| カードトークン化      | `sdk.tokenizationSubmit()` | カード情報を安全に送信し、トークンを生成                     |
| 埋め込み Checkout | `WaffoSDK.renderIframe()`  | Waffo の Checkout を iframe として加盟店ページに埋め込む |

## カードトークン化（tokenizationSubmit）

ユーザーのカード情報を暗号化して Waffo に送信します。加盟店サーバーはカード番号の平文に触れません。

### 前提条件

加盟店バックエンドで事前に [Generate API](/docs/ja/developer-docs/integration/tokenization/generate) を呼び出して `tokenSessionId` を取得する必要があります。

### カードの送信

```typescript theme={null}
const result = await sdk.tokenizationSubmit('tokenSessionId', {
  tokenData: {
    pan: '4111111111111111',  // Card number
    name: 'John Doe',         // Cardholder name
    expiry: '12/2025',        // Expiry date MM/YYYY
    cvv: '123'                // CVV (optional)
  },
  billingAddress: {            // Optional
    countryCode: 'USA',
    region: 'CA',
    city: 'San Francisco',
    postalCode: '94102',
    address: '123 Main St'
  }
});
```

### 結果のハンドリング

```typescript theme={null}
if (result.success) {
  if (result.data.validateUrl) {
    // 3DS verification required, redirect the user
    window.location.href = result.data.validateUrl;
  } else {
    // Card binding successful, wait for Webhook to receive tokenId
  }
}
```

完全なフローは [カードバインドとトークン管理](/docs/ja/developer-docs/integration/tokenization/overview) を参照してください。

## 埋め込み Checkout（renderIframe）

Waffo の Checkout を iframe として加盟店ページに埋め込みます。独自の Checkout UI を構築したくない加盟店に適しています。

```typescript theme={null}
WaffoSDK.renderIframe({
  // Customize theme color, logo, Apple Pay, etc.
});
```

対応項目：

* カスタムテーマカラー
* カスタムロゴ
* Apple Pay / Google Pay ボタン
* 多言語対応

## Checkout 外観のカスタマイズ

Checkout の外観テーマ（`cashierAppearance`）、言語（`cashierLanguage`）、決済手段フィルタリングは、注文作成の `paymentInfo` パラメータで設定します。取り得る値・形式・例の詳細は [チェックアウトのカスタマイズ](/docs/ja/developer-docs/integration/checkout/customization) を参照してください。