> ## 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.

# フロントエンドコンポーネント - Google Pay 連携

> 加盟店ページに Google Pay 決済を組み込むための完全ガイド。

## 概要

Google Pay により、ユーザーは Google アカウントに保存されたクレジットカードまたはデビットカードで素早く決済を完了でき、チェックアウトを簡素化しコンバージョン率を向上させます。

## 決済フロー

**1. ユーザーが Google Pay ボタンをクリック**

ユーザーが加盟店ページの Google Pay ボタンをクリックします。

**2. Google Pay リクエストを開始**

加盟店が Google Pay Web API / Android SDK 経由でリクエストを開始します。

**3. ユーザーが決済手段を選択**

ユーザーが決済手段を選択すると、Google が暗号化されたトークンを返します。

**4. トークンを送信**

加盟店がトークンを加盟店バックエンドに送信します。

**5. Waffo API を呼び出す**

加盟店がトークンを添えて Waffo の `/api/v1/order/create` を呼び出します。

**6. 結果をハンドリング**

Waffo が決済を処理して結果を返し、加盟店がユーザーに通知します。

## 前提条件

* Waffo アカウントのセットアップ完了
* Waffo TAM から `gatewayMerchantId` を取得（サンドボックスでは `"googletest"` を使用）

## ステップ 1：Google フロントエンド連携

### Web 連携

[Google Pay Web ドキュメント](https://developers.google.com/pay/api/web/guides/setup) を参照し、`tokenizationSpecification` を設定します：

```javascript theme={null}
const tokenizationSpecification = {
  type: 'PAYMENT_GATEWAY',
  parameters: {
    gateway: 'waffo',
    gatewayMerchantId: 'googletest',
  }
};
```

### Android 連携

[Google Pay Android ドキュメント](https://developers.google.com/pay/api/android/guides/setup) を参照してください。

### 注意事項

* サポートする決済タイプ：`CARD`
* サポートするカードネットワーク：`VISA`、`MASTERCARD`、`AMEX`、`DISCOVER`
* 認証方式：`PAN_ONLY`
* 必須フィールド：`name`、`address`、`phone`、`email`

## ステップ 2：Waffo バックエンド連携

Google Pay から返されたトークンを `/api/v1/order/create` 経由で Waffo に送信します：

```json theme={null}
{
  "paymentRequestId": "gp_a1b2c3d4e5f6a1b2c3d4e5f6",
  "merchantOrderId": "ORDER_20260325001",
  "orderAmount": "100.00",
  "orderCurrency": "HKD",
  "notifyUrl": "https://your-site.com/webhook/waffo",
  "merchantInfo": { "merchantId": "M000001" },
  "paymentInfo": {
    "productName": "ONE_TIME_PAYMENT",
    "payMethodName": "GOOGLEPAY",
    "payMethodType": "CARD"
  },
  "userInfo": {
    "userId": "user_123",
    "userFirstName": "John"
  },
  "paymentTokenData": "{ Google Pay returned encrypted token JSON }"
}
```

> [!NOTE]
>
> `paymentTokenData` は文字列ではなく JSON オブジェクトである必要があります。

## Web SDK 連携

Waffo Web SDK の `createPayment()` メソッドを通じて Google Pay を連携します：

```javascript theme={null}
sfc.createPayment({
  sessionToken: '<sessiontoken>',
  merchantId: '<your merchantId>',
  merchantSiteId: '<your merchantSiteId>',
  paymentOption: {
    card: {
      externalToken: {
        externalTokenProvider: 'GooglePay',
        mobileToken: '<encrypted Token using Waffo open key>'
      }
    }
  },
  billingAddress: {
    email: 'user@example.com',
    county: 'HK'
  }
}, function(res) {
  console.log(res);
});
```

### 3DS フロー制御

`googlePay3Dflow` パラメータを使用して 3D Secure 認証を制御します：

* `enable`（既定）：3DS 認証を有効化
* `disable`：3DS をスキップ（事前に Waffo に連絡して設定が必要）

```javascript theme={null}
sfc.createPayment({
  // ...
  googlePay3Dflow: 'enable',
});
```

## 本番公開チェックリスト

1. [Google Production Access](https://services.google.com/fb/forms/googlepayAPIenable) を申請
2. 本番環境向けに Google 連携設定を更新
3. `gatewayMerchantId` を Waffo TAM から提供された本番値に置き換え
4. Waffo TAM に連絡して設定が正しいことを確認

## Checkout 組み込みの Google Pay

カスタム連携が不要な場合、Waffo に連絡して Checkout で Google Pay を有効化できます：

1. Google Pay を処理するウェブサイトのドメインを提供
2. 有効化する加盟店 ID を提供
3. 設定完了後、Checkout ページに Google Pay ボタンが自動的に表示されます

> [!NOTE]
>
> 組み込み Checkout モードでは、3DS トランザクションは SCA 要件に準拠する必要があります。該当する場合は Waffo に連絡して 3DS を有効化してください。


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.