Amazon Payウィジェット

Amazon Payウィジェットには、アドレス帳とお支払い方法ウィジェットの２種類があります。購入者は、Amazonアカウントに登録された配送先と支払情報にアクセスするために、埋め込まれたAmazon Payウィジェットを利用します。

アドレス帳ウィジェットは、購入者のAmazonアカウントに登録された住所を表示します。

お支払い方法ウィジェットは、購入者のAmazonアカウントに登録されたクレジットカードを表示します。

お支払い方法ウィジェットは、購入者のAmazonアカウントに登録された支払方法を表示します。

Amazon PayウィジェットのCSSコード

Amazon Payのアドレス帳と支払ウィジェットを表示する場合は、widthとheightパラメータを指定する必要があります。指定しなければウィジェットはレンダリングされません。許可されたパラメータの範囲を設定します。

次の表では、Amazonが推奨する１カラムと２カラムウィジェットを指定するためにwidthとheightの有効なパラメータです。

	２カラム		１カラム
パラメータ	推奨	有効	推奨	有効
width	400px	400px - 600px	300px	300px - 399px
height	228px	228px - 400px	228px	228px - 400px

CSSユニット単位としては、パーセント、REM、EMなどが利用できます。

次のサンプルコードはCSSファイル内に配置します。このコードはモバイルとデスクトップWebページの両方の値をセットしています。

 
/* Please include the min-width, max-width, min-height   
/* and max-height if you plan to use a relative CSS unit   
/* measurement to make sure the widget renders in the   
/* optimal size allowed.      
*/  
  
#addressBookWidgetDiv {  
  min-width: 300px;   
  max-width: 600px;  
  min-height: 228px;   
  max-height: 400px;  
}  
  
  
#walletWidgetDiv {  
  min-width: 300px;   
  max-width:600px;   
  min-height: 228px;  
  max-height: 400px;  
}  
  
  
/* Mobile optimized and small window */  
  
#addressBookWidgetDiv {  
  width: 100%;   
  height: 228px;  
}  
  
#walletWidgetDiv {  
  width: 100%;   
  height: 228px;  
}  
  
/* Desktop and tablet */  
  
@media only screen and (min-width: 768px) {  
  
  #addressBookWidgetDiv {  
    width: 400px;   
    height: 228px;  
  }  
  
  #walletWidgetDiv {  
    width: 400px;   
    height: 228px;  
  }  
}

その他の方法としては、ウィジェットを表示したそれぞれのHTMLページの<head>タグ内にアドレス帳とお支払い方法ウィジェットのためのCSSスタイルを配置することもできます。

 
<!-- Include the following in your  HTML file -->  
<style type="text/css">  
  #addressBookWidgetDiv{width: 400px; height: 228px;}  
  #walletWidgetDiv {width: 400px; height: 228px;}</style>

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

全てのAmazon Payのウィジェットは、タブレットやスマートフォンなどのタッチスクリーンに最適化されています。しかしながら、スマートフォン向けにWebサイトが別れている場合は、AmazonはWebサイトに折りたたみできるウィジェットの利用を推奨します。

折りたたみウィジェットは１カラムユーザーインターフェイスに合うようにデザインされており、購入者は最小サイズでスクロールできるように広げたり、折りたたむことができます。小さいサイズのウィジェットを配置することでWebサイトに充分なスペースを確保でき、購入者デバイスの全画面で利用することもできます。標準的な方法である高さと幅を固定化することは、購入者が広げたり折りたたむことができません。この標準的なウィジェットはStep 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',   
  onOrderReferenceCreate: function(orderReference) {  
    orderReference.getAmazonOrderReferenceId();  
  },   
  design : {  
    designMode: 'smartphoneCollapsible'  
  },  
  onAddressSelect : function(orderReference) {  
  },  
  onError : function(error) {  
  }  
}).bind("addressBookWidgetDiv");

上記のサンプルはアドレス帳ウィジェットを変更する方法です。必要であれば、同様の変更をお支払い方法ウィジェット、参照のみのアドレス帳とお支払い方法ウィジェットに行います。この折りたたみウィジェットには、widthとheightを指定できません。

次のサンプルは購入者が影響する折りたたみウィジェット方法です。

図１では、最初にウィジェットは折りたたまれます。ウィジェットはデフォルトの配送先住所と支払方法を表示します。
図２では、購入者が配送先住所または支払方法を変更したい場合に、購入者が変更ボタンをクリックします。それからウィジェットは入力画面を全画面に広げます。
購入者が異なる配送先住所または支払方法を選択、もしくは、キャンセルボタンをタップした後では、ウィジェットは再度折りたたまれます。

図１：折りたたまれたアドレス帳とお支払い方法ウィジェット	図２：広げられたアドレス帳ウィジェット