【実験】マネーボタンを非表示にするとどうなるか？
マネーボタンは指先１つで送金・支払いのできるシンプルなシステムですが、
WEBページのレイアウトや用途によっては「ページの読み込み直後はマネーボタンを非表示」にしておきたい場合もあります。
※特定商取引法に沿った申込み画面を作成したい場合にも有効です。
（通販サイトでは注文確定ボタンをマネーボタンに置き換えることが可能です）
（通販サイトでは注文確定ボタンをマネーボタンに置き換えることが可能です）
この記事では、
・マネーボタンを表示／非表示にする方法
・その際に発生する障害と、その障害を回避する方法
・実用に適した方法
などを記述します。
目次
マネーボタンを非表示にすると発生する障害
最初に障害について記載しておきます。
マネーボタンを非表示にするにはjavascriptを使用すると簡単に行えます。
しかし、支払う金額によっては下記のような障害が発生します。
マネーボタンの横幅が小さすぎて、すべての桁が表示できていません。
リロード後、マネーボタンがロードされる前に「表示」を押すと正常に表示されます。
将来的にこの障害は修正されている場合もあります。
それでは実際にマネーボタンを使って表示／非表示の実験を行ってみましょう。
「display：none」でマネーボタンを非表示にする方法
下記のマネーボタンは
- 金額は$ 123,456,789です
- 設定は開発者モードです
（スワイプしても実際には送金されません）
通常表示
実験 A
マネーボタンが最初から隠されている場合
実験 B
マネーボタンが最初から隠されていない場合
使用されているJavascriptのソースコード
Aタグを使用して表示を切り替えるためのHTMLコード
クリックで表示 クリックで非表示 クリックで更新
マネーボタンを表示するHTMLコード
「display：none」でお金ボタンを非表示にすると、実験Aで確認できる障害が発生します。
以下は、この障害の解決策です。マネーボタンを非表示する手段を display:none から visibility: hidden に変更します。
実験 C
マネーボタンが最初から隠されている場合
実験 D
マネーボタンが最初から隠されていない場合
ただし、この方法では空白スペースができてしまいます。
使用されているJavascriptのソースコード
Aタグを使用して表示を切り替えるためのHTMLコード
クリックで表示 クリックで非表示 クリックで更新
マネーボタンを表示するHTMLコード
「position：absolute」を使用して空白の問題を解決する方法
実験 EDIVタグを使用してブロックを作成し、マネーボタンに置き換えます。
DIVの高さ height : 50px でピッタリ
使用されているJavascriptのソースコード
Aタグを使用して表示を切り替えるためのHTMLコード
クリックで表示 クリックで非表示 クリックで更新
マネーボタンを表示するHTMLコード
DIVの高さ height : 50px でピッタリ
実際の使用に適した方法
実験 Fボタン１つでシンプルに表示させています。
この方法は実際の使用に最適だと言えます。
使用されているJavascriptのソースコード
（青いブロックボタンとマネーボタンそれぞれの表示が瞬間的に重ならないように、マネーボタンが出現するタイミングを0.5秒遅らせています）
使用されているスタイルシート
マネーボタンを表示するHTMLコード
