---
title: Amazon Pay キャンペーンポップアップ 設置手順ガイド
url: walletRewardSetupGuide.html
---

本資料は、従来の Amazon Pay フローを活用しながらキャンペーン応募ポップアップを表示し、シームレスにエントリーを促す仕組みの設置手順です。事業者様側でご対応いただく作業（TODO）を明記しています。

- ポップアップ生成スクリプト（ダウンロード）: `amazonpayWalletReward.js`
- デモページ（カート・支払方法選択画面のサンプル）: `walletReward.php`

---

## 1. 概要

- ポップアップの発動条件は、以下のいずれかを想定しています（JavaScript の組み方で自由にカスタマイズ可能）。
  - **パターンA：** カート画面の表示時点で発動（条件なしで必ず表示）
  - **パターンB：** 支払方法選択画面で「Amazon Payで購入」のラジオボタンを選択した場合に発動
- 選択後、既定では 0.2 秒でポップアップを表示します（表示タイミングは調整可能）。
- ポップアップ表示の瞬間に Amazon Pay ボタンを誤タップすることを防ぎ、かつキャンペーン応募を明示的に同意いただくため、「エントリーする」ボタンを設けています。エントリー前は Amazon Pay ボタンを非活性（グレーアウト）にしています。
- ポップアップには、キャンペーンバナー画像／細則・応募規約リンク／エントリーボタン（内部的に `termsAgreed` と連動）／注意書き／Amazon Pay ボタン／閉じる（×）ボタンと確認ダイアログ、が含まれます。
- キャンペーン対象者の特定方法：ボタンレンダー時のパラメーター（`placement`）と `merchantMetadata.customInformation` をセットすることで通常 Amazon Pay ボタンの決済と区別し、セラーセントラルのトランザクションレポートで対象を特定できます（詳細は「4. キャンペーン対象者の特定方法」）。

---

## 2. ファイル構成

| ファイル | 役割 | 事業者様の対応 |
| --- | --- | --- |
| `amazonpayWalletReward.js` | ポップアップ生成スクリプト（本体、`amazonpayAssist` を定義） | サイトに配置。バナー・細則リンクを差し替え |

> 事業者様に配置いただく配布ファイルは `amazonpayWalletReward.js` のみです。`walletReward.php` / `walletRewardStyle.css` / `campaignTerms.html` は動作イメージ確認用のデモであり、配布物ではありません。

---

## 3. 設置手順

本ガイドの「作業対象」は次の 2 つを指します。

1. **`amazonpayWalletReward.js`**：ダウンロードして配置するポップアップ生成スクリプト本体（バナー画像・細則リンク・文言などポップアップ自体の内容）。
2. **設置対象ページ**：事業者様のポップアップ設置対象ページ（支払方法選択画面／カート画面）のフロント側。スクリプト読み込み、表示制御スクリプト、Amazon Pay ボタンのレンダリング（`placement`）や payload（`customInformation`）の設定を行う箇所。

### ステップ 1：ポップアップ生成スクリプトの配置（作業箇所：設置対象ページ）

`amazonpayWalletReward.js` を取得し、ポップアップ設置対象ページのフロントエンドに配置します。

### ステップ 2：ポップアップ表示制御スクリプトの組み込み（作業箇所：設置対象ページ）

発動条件（パターンA / パターンB）に応じて、以下のいずれかのスクリプトを組み込みます。ボタンパラメータ・payload・署名生成処理は既存の Amazon Pay 実装をそのまま流用可能で、本キャンペーンで変更するのは `placement` と `merchantMetadata.customInformation` の 2 点のみ（トラッキング用）です。

#### パターンA：カート表示時点で発動（productType: PayAndShip）

```html
<!-- ① ポップアップ生成スクリプト（amazonpayAssist を定義）と Amazon Pay 公式スクリプトを読み込む -->
<script type="text/javascript" src="amazonpayWalletReward.js"></script> <!-- [TODO(事業者様): 配置先パスに合わせる] -->
<script src="https://static-fe.payments-amazon.com/checkout.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    document.addEventListener("DOMContentLoaded", function () {
        // 【カート表示型】条件を設けず、カート画面の表示時点で必ずポップアップを表示する

        // ポップアップ内 Amazon Pay ボタンの活性/非活性を切り替える（エントリー前は押せないようにする）
        function toggleAmazonPayButton(elem, enable) {
            elem.inert = !enable;
            elem.style.opacity = enable ? '1' : '0.5';
            elem.style.pointerEvents = enable ? 'auto' : 'none'; // Safari対策
        }

        // amazonpayAssist() は amazonpayWalletReward.js で定義。引数はポップアップ内に生成するボタンコンテナのid。
        // fadeIn(秒) で指定秒後にポップアップを表示（ページ表示時点で即発動）。
        amazonpayAssist('AmazonPayButtonOnPopup').fadeIn(0.2); // [TODO(事業者様): 表示タイミング(秒)を調整]

        // ポップアップ内に生成された #AmazonPayButtonOnPopup へ Amazon Pay ボタンを描画
        amazon.Pay.renderButton('#AmazonPayButtonOnPopup', {
            merchantId: 'XXXXXXXXXX',   // [TODO] セラーセントラルの Merchant ID
            ledgerCurrency: 'JPY',
            sandbox: true,              // [TODO] 本番は false
            checkoutLanguage: 'ja_JP',
            productType: 'PayAndShip',  // カート表示型は配送あり（PayAndShip）
            placement: 'Home',          // [TODO] 通常導線と別値にしてトラッキング（payload外なので署名再生成は不要）
            buttonColor: 'Gold',
            createCheckoutSessionConfig: {
                payloadJSON: '<?php echo $payloadJSON ;?>', // 既存payload + merchantMetadata.customInformation（キャンペーンコード）
                signature:   '<?php echo $signature ;?>',   // [TODO] customInformation追加後のpayloadで署名を再生成
                publicKeyId: '<?php echo $publicKeyId ;?>'
            }
        });

        // 描画直後にエントリー状態（termsAgreed）を反映
        setTimeout(function () {
            const apayButtonElem = document.getElementById('AmazonPayButtonOnPopup');
            const currentCheckbox = document.querySelector('input[name="termsAgreed"]');
            if (apayButtonElem && currentCheckbox) toggleAmazonPayButton(apayButtonElem, currentCheckbox.checked);
        }, 200);

        // 【JS側と連動】ポップアップ内の「エントリーする」ボタン押下時、amazonpayWalletReward.js が
        // name="termsAgreed" の隠しチェックボックスを切り替えて change を発火する。これを受けて活性/非活性を制御。
        document.addEventListener('change', function (e) {
            if (e.target && e.target.name === 'termsAgreed') {
                const apayButtonElem = document.getElementById('AmazonPayButtonOnPopup');
                if (apayButtonElem) toggleAmazonPayButton(apayButtonElem, e.target.checked);
            }
        });
    });
</script>
```

#### パターンB：Amazon Pay 選択時に発動（productType: PayOnly）

```html
<!-- ① ポップアップ生成スクリプト（amazonpayAssist を定義）と Amazon Pay 公式スクリプトを読み込む -->
<script type="text/javascript" src="amazonpayWalletReward.js"></script> <!-- [TODO(事業者様): 配置先パスに合わせる] -->
<script src="https://static-fe.payments-amazon.com/checkout.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    document.addEventListener("DOMContentLoaded", function () {
        // 発動トリガーとなる「Amazon Payで購入」ラジオボタン
        const targetRadio = document.querySelector('[id="amazon-pay"]'); // [TODO(事業者様): 自社のラジオボタンidに合わせる]

        function toggleAmazonPayButton(elem, enable) {
            elem.inert = !enable;
            elem.style.opacity = enable ? '1' : '0.5';
            elem.style.pointerEvents = enable ? 'auto' : 'none';
        }

        // 「Amazon Payで購入」選択時にポップアップを表示し、Amazon Pay ボタンを描画する
        function showAmazonPayPopup() {
            if (!targetRadio || !targetRadio.checked) return; // 選択時のみ発動
            amazonpayAssist('AmazonPayButtonOnPopup').fadeIn(0.2); // [TODO] 表示タイミング(秒)を調整
            renderApayButton();
        }

        function renderApayButton() {
            amazon.Pay.renderButton('#AmazonPayButtonOnPopup', {
                merchantId: 'XXXXXXXXXX',   // [TODO] セラーセントラルの Merchant ID
                ledgerCurrency: 'JPY',
                sandbox: true,              // [TODO] 本番は false
                checkoutLanguage: 'ja_JP',
                productType: 'PayOnly',     // 支払方法選択型のポップアップは PayOnly
                placement: 'Home',          // [TODO] 通常導線と別値にしてトラッキング（payload外なので署名再生成は不要）
                buttonColor: 'Gold',
                createCheckoutSessionConfig: {
                    payloadJSON: '<?php echo $payloadJSON ;?>', // 既存payload + merchantMetadata.customInformation（キャンペーンコード）
                    signature:   '<?php echo $signature ;?>',   // [TODO] customInformation追加後のpayloadで署名を再生成
                    publicKeyId: '<?php echo $publicKeyId ;?>'
                }
            });
            setTimeout(function () {
                const apayButtonElem = document.getElementById('AmazonPayButtonOnPopup');
                const currentCheckbox = document.querySelector('input[name="termsAgreed"]');
                if (apayButtonElem && currentCheckbox) toggleAmazonPayButton(apayButtonElem, currentCheckbox.checked);
            }, 200);
        }

        // 【JS側と連動】「エントリーする」ボタン押下で name="termsAgreed" の change が発火 → 活性/非活性を制御
        document.addEventListener('change', function (e) {
            if (e.target && e.target.name === 'termsAgreed') {
                const apayButtonElem = document.getElementById('AmazonPayButtonOnPopup');
                if (apayButtonElem) toggleAmazonPayButton(apayButtonElem, e.target.checked);
            }
        });

        if (targetRadio) {
            showAmazonPayPopup();
            targetRadio.addEventListener('change', showAmazonPayPopup);
        }
    });
</script>
```

### ステップ 3：TODO 項目の設定

上記スクリプトおよび `amazonpayWalletReward.js` の `[TODO(事業者様): ...]` を、自社環境に合わせて設定します（詳細は「5. 事業者様 対応 TODO 一覧」）。

### ステップ 4：動作確認

選択したパターンに応じてポップアップが表示されること、エントリー後に Amazon Pay ボタンが活性化して決済に進めることを確認します。テスト環境では `sandbox: true` のままご確認ください。

---

## 4. キャンペーン対象者の特定方法

Amazon Pay のセラーセントラルで取得できる**トランザクションレポート**で、`customInformation` がセットされている注文を事業者様側で確認できます。**Sandbox・本番環境ともに、決済後すぐに確認可能**です。

- 箇所：メニュー（≡）＞レポート＞トランザクションレポート
- 方法：レポートの種類「AmazonリファレンスID」、日付範囲を指定し、「レポートを生成」ボタンをクリック
- レポート内容：指定期間の決済一覧をダウンロードでき、主に以下の情報を確認できます。

| カラム | 内容 |
| --- | --- |
| `AmazonOrderReferenceId` | Amazon のリファレンスID |
| `SellerOrderId` | 販売事業者注文番号（＝事業者様の注文番号） |
| `OrderTotal` | Amazon Pay の注文金額 |
| `CustomInformation` | セットされたキャンペーンコード文字列 |
| `OrderReferenceStatus` | 注文のステータス（Open, Closed, Canceled など） |

---

## 5. 事業者様 対応 TODO 一覧

Amazon Pay ボタンの一般的な設定値（`merchantId` / `publicKeyId` / `payloadJSON` / 署名生成処理 / リターンURL 等）は、**既存の Amazon Pay 実装のものをそのまま流用**してください。ボタンの動作自体は変わりません。本キャンペーンで変更いただくのは、トラッキング用の 2 パラメーター（`placement` と `merchantMetadata.customInformation`）のみです。

### 5.1 トラッキング用パラメーター（★要対応）

| 箇所 | 作業対象 | 内容 |
| --- | --- | --- |
| `placement` | 設置対象ページ | 通常（`'Cart'` 等）と別の値（例: `'Home'`）をセット。payload に含まれないため署名の再生成は不要 |
| `merchantMetadata.customInformation` | 設置対象ページ（payload 生成箇所） | payload 内にキャンペーンコードをセット。payload を変更すると署名も変わるため、追加後の payload に対し既存の署名生成処理で signature を再生成（既存署名は流用不可）。任意の文字列（最大長: 4096 文字/バイト） |

### 5.2 ポップアップ設置（支払方法選択画面 / カート画面）

| 箇所 | 作業対象 | 内容 |
| --- | --- | --- |
| スクリプト読み込みパス | 設置対象ページ | 配置した `amazonpayWalletReward.js` のファイルパスを設定 |
| 発動条件 | 設置対象ページ | パターンA（カート表示時点で必ず表示）または パターンB（`targetRadio` を「Amazon Payで購入」の id に合わせる）を選択 |
| 表示タイミング | 設置対象ページ | `fadeIn(0.2)` の秒数を UX 要件に合わせて調整 |

### 5.3 ポップアップ生成スクリプト（`amazonpayWalletReward.js`）

| 箇所 | 作業対象 | 内容 |
| --- | --- | --- |
| バナー画像 | `amazonpayWalletReward.js` | 事業者様側でバナー画像を作成し、`img.src` を差し替え（サイズ目安：横400 × 縦200〜300px 程度の横長。ポップアップ幅に合わせて自動表示） |
| 細則リンク | `amazonpayWalletReward.js` | 応募規約・キャンペーン細則ページの URL を設定 |
| 文言・スタイル | `amazonpayWalletReward.js`（既定値）／設置対象ページ（`option` で上書き） | `option.styles` で上書き可能 |

### 5.4 細則ページ

応募規約・キャンペーン細則ページは事業者様側でご用意ください。デモの `campaignTerms.html` は参考用のプレースホルダーです。

---

## 6. Amazon Pay ボタン押下後の挙動について

すでに稼働中の通常 Amazon Pay ボタンと比べ、**戻り値・パラメーター・ボタンの動作自体に変更はありません**。決済フローやリターンURL等の一般的な実装は既存のものをそのまま流用してください。キャンペーン対象者の特定のためだけに、以下の 2 パラメーターを変更いただきます。

- **`placement`（`amazon.Pay.renderButton()` の引数）**：通常（`'Cart'` 等）と別の値（例: `'Home'`）をセット。payload に含まれないため署名の再生成は不要。
- **`merchantMetadata.customInformation`（payload 内）**：キャンペーンコードをセット（任意の文字列、最大 4096 文字/バイト）。payload の一部のため、追加後の payload に対して署名を再生成（既存署名は流用不可）。

これらにより、Amazon 側のログ・トランザクションレポートで通常購入者とキャンペーン応募者を色分けできます。

---

## 7. 補足

- 事業者様に配置いただく配布ファイルは `amazonpayWalletReward.js` のみです。
- バナー画像・キャンペーン細則は仮の状態です。キャンペーン準備が整い次第、`amazonpayWalletReward.js` 内のバナー画像 `img.src` と細則リンク先を差し替えてください。
- 不明点がありましたら、いつでもお問い合わせください。