【実験】マネーボタンを非表示にするとどうなるか?

最終更新日

マネーボタンは指先1つで送金・支払いのできるシンプルなシステムですが、
WEBページのレイアウトや用途によっては「ページの読み込み直後はマネーボタンを非表示」にしておきたい場合もあります。

※特定商取引法に沿った申込み画面を作成したい場合にも有効です。
(通販サイトでは注文確定ボタンをマネーボタンに置き換えることが可能です)

この記事では、
・マネーボタンを表示/非表示にする方法
・その際に発生する障害と、その障害を回避する方法
・実用に適した方法
などを記述します。

マネーボタンを非表示にすると発生する障害

最初に障害について記載しておきます。

マネーボタンを非表示にするにはjavascriptを使用すると簡単に行えます。
しかし、支払う金額によっては下記のような障害が発生します。

マネーボタンの横幅が小さすぎて、すべての桁が表示できていません。
リロード後、マネーボタンがロードされる前に「表示」を押すと正常に表示されます。

将来的にこの障害は修正されている場合もあります。


それでは実際にマネーボタンを使って表示/非表示の実験を行ってみましょう。

「display:none」でマネーボタンを非表示にする方法

下記のマネーボタンは

  • 金額は$ 123,456,789です
  • 設定は開発者モードです
    (スワイプしても実際には送金されません)

  通常表示    


  実験 A  

マネーボタンが最初から隠されている場合

 


  実験 B  

マネーボタンが最初から隠されていない場合

 


使用されているJavascriptのソースコード


 

Aタグを使用して表示を切り替えるためのHTMLコード


クリックで表示

クリックで非表示

クリックで更新

 

マネーボタンを表示するHTMLコード


 

「display:none」でお金ボタンを非表示にすると、実験Aで確認できる障害が発生します。

以下は、この障害の解決策です。

マネーボタンを非表示する手段を  display:none  から  visibility: hidden  に変更します。

「visibility:hidden」でマネーボタンを非表示にする方法

  実験 C  

マネーボタンが最初から隠されている場合

 


  実験 D  

マネーボタンが最初から隠されていない場合

 


ただし、この方法では空白スペースができてしまいます。


 

使用されているJavascriptのソースコード


 

Aタグを使用して表示を切り替えるためのHTMLコード

クリックで表示

クリックで非表示

クリックで更新

 

マネーボタンを表示するHTMLコード

 

この空白スペースの問題を解消するには、DIVタグで「position:absolute」を指定します。

「position:absolute」を使用して空白の問題を解決する方法

  実験 E    

DIVタグを使用してブロックを作成し、マネーボタンに置​​き換えます。

 

DIVの高さ height : 50px でピッタリ


使用されているJavascriptのソースコード


 

Aタグを使用して表示を切り替えるためのHTMLコード

クリックで表示

クリックで非表示

クリックで更新

 

マネーボタンを表示するHTMLコード

DIVの高さ height : 50px でピッタリ

 

実際の使用に適した方法

  実験 F    

ボタン1つでシンプルに表示させています。
この方法は実際の使用に最適だと言えます。


使用されているJavascriptのソースコード
(青いブロックボタンとマネーボタンそれぞれの表示が瞬間的に重ならないように、マネーボタンが出現するタイミングを0.5秒遅らせています)


 

使用されているスタイルシート


 

マネーボタンを表示するHTMLコード


 

Written by JK✪DS

Donate to BSV-LAB ONLINE

If you found this article helpful, please donate.

シェアする