https://www.shimakazelife.com/base/js/amazonLoginInit.js

1// amazonLoginInit.js
2// AmazonPayでのログインボタンの初期化を行う
3//
4// サインインボタン実装ドキュメント
5// https://amazonpay-onboarding.com/other_features/signIn/integration/
6
7const RENDERED_ATTR = 'data-amazon-rendered';
8
9// Amazon Pay SDK の準備完了を待つユーティリティ
10function ensureAmazonReady(cb) {
11  if (window.amazon?.Pay?.renderButton) cb();
12  else setTimeout(() => ensureAmazonReady(cb), 50);
13}
14
15// 単一要素に対して Amazon サインインボタンを描画する（再利用可能）
16function renderAmazonButton(el) {
17  if (!el) return;
18  // レンダリング済みであれば何もしない
19  if (el.getAttribute(RENDERED_ATTR) === '1') return;
20  // 複数対応：IDが無ければ一意のIDを付与
21  if (!el.id) {
22    el.id = 'AmazonSignInButton_' + Math.random().toString(36).slice(2);
23  }
24  // オプションをパース
25  let options = {};
26  try {
27    options = JSON.parse(el.getAttribute('data-amazon-options') || '{}');
28  } catch (e) {
29    console && console.error && console.error('[Amazon Signin] options JSON parse error:', e, el.getAttribute('data-amazon-options'));
30    return;
31  }
32  // SDK 準備完了後に描画
33  ensureAmazonReady(() => {
34    try {
35      amazon.Pay.renderButton('#' + el.id, options);
36      el.setAttribute(RENDERED_ATTR, '1');
37    } catch (e) {
38      console && console.error && console.error('[Amazon Signin] renderButton failed:', e, options);
39    }
40  });
41}
42
43// Amazonログインボタンを描画する data-amazon-signin の要素を取得
44function collectAmazonSigninNodes(root, includeRendered = true) {
45  const nodes = [];
46  const rootMatches = root.matches?.('[data-amazon-signin]') ?? false;
47
48  if (rootMatches) {
49    const alreadyRendered = root.getAttribute(RENDERED_ATTR) === '1';
50    if (includeRendered || !alreadyRendered) {
51      nodes.push(root);
52    }
53  }
54
55  if (root.querySelectorAll) {
56    const selector = includeRendered
57      ? '[data-amazon-signin]'
58      : '[data-amazon-signin]:not([' + RENDERED_ATTR + '])';
59
60    root.querySelectorAll(selector).forEach((el) => {
61      if (!nodes.includes(el)) {
62        nodes.push(el);
63      }
64    });
65  }
66
67  return nodes;
68}
69
70// まだログインボタンがない要素を探して描画
71function initAmazonButtons(root = document) {
72  const nodes = collectAmazonSigninNodes(root, false);
73  if (!nodes.length) return;
74  nodes.forEach(renderAmazonButton);
75}
76
77// 描画済みボタン要素を再描画
78function rerenderAmazonButtons(root = document) {
79  const nodes = collectAmazonSigninNodes(root, true);
80  if (!nodes.length) return;
81
82  nodes.forEach((el) => {
83    const parent = el.parentNode;
84    if (!parent) return;
85
86    // ボタンのIDや描画ステータスを削除して再描画
87    const newEl = el.cloneNode(false);
88    newEl.removeAttribute('id');
89    newEl.removeAttribute(RENDERED_ATTR);
90    parent.replaceChild(newEl, el);
91    renderAmazonButton(newEl);
92  });
93}
94
95// ページ表示時にAmazonLoginボタンが含まれる時のイベント
96if (document.readyState === 'loading') {
97  document.addEventListener('DOMContentLoaded', () => initAmazonButtons());
98} else {
99  initAmazonButtons();
100}
101
102// DOM変化を監視して自動初期化 (XHRでのページ変更時のイベント)
103const mo = new MutationObserver((mutations) => {
104  for (const m of mutations) {
105    m.addedNodes.forEach((n) => {
106      if (n.nodeType !== 1) return;
107      if (n.matches?.('[data-amazon-signin]') || n.querySelector?.('[data-amazon-signin]')) {
108        initAmazonButtons(n);
109      }
110    });
111  }
112});
113mo.observe(document.documentElement, { childList: true, subtree: true });
114
115// 外部から再描画を要求するためのイベントフック
116// document.dispatchEvent(new CustomEvent('amazon:signin:refresh', { detail: { root: container, options: { ... } } }));
117// detail.options が渡された場合は data 属性を上書きしてから再描画します。
118document.addEventListener('amazon:signin:refresh', (e) => {
119  const scope = e.detail?.root || document;
120  const incomingOpts = e.detail?.options;
121  if (incomingOpts) {
122    const json = JSON.stringify(incomingOpts);
123    scope.querySelectorAll('[data-amazon-signin]').forEach((el) => {
124      el.setAttribute('data-amazon-options', json);
125    });
126  }
127  rerenderAmazonButtons(scope);
128});