Amazon Pay キャンペーンポップアップ 設置手順ガイド

<!-- ① ポップアップ生成スクリプト（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> <!-- amazon.Pay を提供 -->
<script type="text/javascript" charset="utf-8">
    document.addEventListener("DOMContentLoaded", function () {
        // 発動トリガーとなる「Amazon Payで購入」ラジオボタン
        const targetRadio = document.querySelector('[id="amazon-pay"]'); // [TODO(事業者様): 自社のラジオボタンidに合わせる]

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

        // 「Amazon Payで購入」選択時にポップアップを表示し、Amazon Pay ボタンを描画する
        function showAmazonPayPopup() {
            if (!targetRadio || !targetRadio.checked) return; // 選択時のみ発動

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

        // ポップアップ内に生成された #AmazonPayButtonOnPopup へ Amazon Pay ボタンを描画
        function renderApayButton() {
            // ボタンパラメータ・payload・署名生成処理は既存の Amazon Pay 実装をそのまま流用可能。
            // 本キャンペーンで変更するのは placement と merchantMetadata.customInformation の2点のみ（トラッキング用）。
            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 ;?>'
                }
            });
            // 描画直後にエントリー状態（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);
            }
        });

        // 初期表示時の選択状態を確認し、以降の選択変更も監視
        if (targetRadio) {
            showAmazonPayPopup();
            targetRadio.addEventListener('change', showAmazonPayPopup);
        }
    });
</script>