スマートフォン用の折りたためるウィジェットの利用

すべてのAmazon Payのウィジェットはタブレットとスマートフォンのユーザビリティを改善するためにタッチスクリーン向けに最適化されています。しかしながら、スマートフォン用に最適化されたWebサイトを分けたい場合は、Webサイトで折りたためるウィジェットを利用することをAmazonは推奨します。

折りたためるアドレス帳とお支払い方法ウィジェットは1カラムユーザーインターフェイスに適合するためのデザインがされており、スクロールが不要な最小サイズに拡げることや折りたためることができます。最小化するためのウィジェットを割り当てるスペースを保持したい場合と購入者のデバイス上にて全画面エリアで利用したい場合では最適です。これは高さと横幅が固定されている、または、購入者によって拡げることや折りたためることができない標準のウィジェットとは異なります。標準のウィジェットは「イントロダクション」で説明しています。

折りたためるアドレス帳とお支払い方法ウィジェットはスマートフォン画面の横幅に適合するために調整されます。折りたためるウィジェットは、折りたたみ時では135ピクセルの高さで固定します。購入者は事前に選択された配送先住所または支払方法を変更するためにウィジェットを拡げることができます。このケースでは、ウィジェットはデバイスの最大の高さと横幅で広がります。購入者が選択できた場合は、ウィジェットは自動的に折りたたみされ、購入者は注文を続けることができます。

折りたたみウィジェットをインテグレーションする方法は次のステップの通りです。

スマートフォンに最適化された各ページのheadセクションにmetaタグを追加します。このmetaタグはスマートフォン上でユーザーがページズームの要求なしの参照可能なウィジェットになります。

 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>

designMode パラメータにsmartphoneCollapsibleをセットするために、アドレス帳とお支払い方法ウィジェットを生成するためのコードを次のサンプルのように変更します。

 
new OffAmazonPayments.Widgets.AddressBook({  
  sellerId : 'YOUR_SELLER_ID_HERE',  
  onReady: function(billingAgreement) {  
     var billingAgreementId = billingAgreement.getAmazonBillingAgreementId();  
  },  
  design : {  
     designMode: 'smartphoneCollapsible'  
  },  
  agreementType: 'BillingAgreement',  
  onAddressSelect : function(billingAgreement) {  
  },  
  onError : function(error) {  
  }  
}).bind("addressBookWidgetDiv");

上記のサンプルはアドレス帳ウィジェットの変更方法を表します。お支払い方法ウィジェットと参照のみのアドレス帳とお支払い方法ウィジェットのために同じ変更が必要になります。折りたたみウィジェットの横幅と縦幅を指定することができません。

次の実例は購入者が確認できる折りたたみウィジェットの方法を表します。
最初、ウィジェットは折りたたまれています。ウィジェットはAmazonのデフォルトの配送先住所と支払方法を表示します。
購入者が配送先住所、または、支払方法を変更したい場合は、購入者は変更ボタンをクリックします。ウィジェットはそれから画面全体に拡がります。