Step2：アドレス帳とお支払い方法ウィジェットの追加

購入者の認証が成功された後に、指定した場所にAmazon Payのアドレス帳とお支払い方法ウィジェットを表示できます。アドレス帳とお支払い方法ウィジェットは、購入者のAmazonアカウントに保存された配送先住所と支払方法がそれぞれ表示されます。

Webサイトにアドレス帳ウィジェットを埋め込むには、次のサンプルコードをWebページに追加します。

 
<!--- please put the style below inside your CSS file -->  
<style type="text/css">  
   #addressBookWidgetDiv{width: 400px; height: 228px;}  
</style>  
  
<div id="addressBookWidgetDiv">  
</div>  
  
<script>  
  new OffAmazonPayments.Widgets.AddressBook({  
    sellerId: 'YOUR_SELLER_ID_HERE',  
    agreementType: 'BillingAgreement',  
      
    onReady: function(billingAgreement) {  
      var billingAgreementId = billingAgreement.  
      getAmazonBillingAgreementId();  
    },  
    onAddressSelect: function(billingAgreement) {  
      // Replace the following code with the action you that want to perform  
      // after the address is selected.  
      // The amazonBillingAgreementId can be used to retrieve  
      // the address details by calling the GetBillingAgreementDetails operation.  
      // If rendering the AddressBook and Wallet widgets on the same page, you  
      // should wait for this event before you render the Wallet widget for  
      // the first time.  
      // The Wallet widget will re-render itself on all subsequent  
      // onAddressSelect events, without any action from you. It is not  
      // recommended that you explicitly refresh it.  
    },  
    design: {  
      designMode: 'responsive'  
    },  
    onError: function(error) {  
      // your error handling code  
    }  
  }).bind("addressBookWidgetDiv");  
</script>

注意：Billing AgreementでagreementTypeの値を指定する場合は、Amazon PayはBilling AgreementオブジェクトをDraft状態で生成します。DraftのBilling Agreementオブジェクトは「Step4：Billing Agreementの詳細のセットと同意の確認」に記載している通りに購入者がサイトでボタンをクリックしてから３時間以内に完了しなければキャンセルになります。

注意：ワンタイム購入で可能にするためにAmazon Payを利用したい場合は、Order ReferenceにagreementTypeパラメータの値を指定しなければなりません。この方法で進めたい場合は、Amazon Payインテグレーションガイドを参照してください。

アドレス帳とお支払い方法ウィジェットの両方を利用する場合は、ウィジェットコード内の１つのパラメータに'onReady'コールバック関数を指定しなければなりません。'onReady'関数はウィジェットが表示された時にBilling Agreementオブジェクトを生成します。Billing AgreementオブジェクトでgetAmazonBillingAgreeementId() 関数を呼び出すことでbillingAgreeementIdを取得できます。

注意：購入者から収集する住所にAmazonのアドレス帳を使う必要がない場合は、このガイドの「アドレス帳ウィジェット無しのインテグレーション」を参照してください。

あなたのWebサイトにお支払い方法ウィジェットを埋め込むには、Webページに次のサンプルコードを追加します。

 
<!--- please put the style below inside your CSS file -->  
<style type="text/css">  
   #walletWidgetDiv{width: 400px; height: 228px;}  
</style>  
  
<div id="walletWidgetDiv">  
</div>  
  
<script>  
  new OffAmazonPayments.Widgets.Wallet({  
    sellerId: 'YOUR_SELLER_ID_HERE',  
    // amazonBillingAgreementId obtained from the AddressBook widget  
    amazonBillingAgreementId: amazonBillingAgreementId,  
    onPaymentSelect: function(billingAgreement) {  
      // Replace this code with the action that you want to perform  
      // after the payment method is selected.  
    },  
    design: {  
      designMode: 'responsive'  
    },  
    onError: function(error) {  
      // your error handling code  
    }  
  }).bind("walletWidgetDiv");  
</script>

CSSはAmazonが許可しているパラメータの高さと幅のレンジで規定する限りウィジェットの高さと幅はコントロールすることができます。その他のパーセント、REM、EMのようなCSSユニットは規定されているレンジ内の最小と最大の高さと幅である要素である限り使用できます。

レスポンシブサイトの場合は次のこれらのステップを参照してください。

  1. スマートフォンに最適化された各ページのheadセクションにmetaタグを追加します。このmetaタグは有効な画面サイズでウィジェットが調整するのに有効です。そのため、ユーザーが手動でページのズーム操作をすることなしにスマートフォンで読みやすくなります。 
     
<meta name="viewport" content="width-device-width, initial-scale=1.0, maximum-scale=1.0"/>
  2. 次のサンプルの通りにモバイルファーストデザインで構築するためのCSSメディアクエリを使用することができます。 
     
<style type="text/css">  
  
/* 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 theoptimal 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;}  
  
/* Smartphone 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;}  
}

Amazon Payのアドレス帳とお支払い方法ウィジェットを生成する場合は、widthとheightパラメータを指定しなければならず、別の方法ではウィジェットは表示されません。次の表は１カラムと２カラムウィジェットのwidthとheightの有効なパラメータです。

2カラムウィジェット 1カラムウィジェット
パラメータ 推奨 有効 推奨 有効
width 400px 400px - 600px 300px 300px - 399px
height 228px 228px - 400px 228px 228px - 400px

認証に成功した後で、購入者に次のスクリーンショットのようにウィジェットを表示するように指定した場所にアドレス帳ウィジェットが表示されます。

上記のスクリーンショットはWebサイト上にアドレス帳とお支払い方法ウィジェットが表示しています。

それぞれのウィジェットから住所と支払方法を選択されることを確認できるまで、購入ワークフローを有効にしないようにすることをAmazon Payは推奨します。Amazon Payは住所と支払方法の選択をそれぞれのonAddressSelectとonPaymentSelectコールバック関数経由で通知します。これらの通知に基づき、購入フローは次のステップへ進むことができます。例えば、注文確認ページを採用している場合は、Webページ上の続けるボタンを有効にすることができます。

注意：ページ上にアドレス帳とお支払い方法ウィジェットを表示する場合は、最初にお支払い方法ウィジェットを表示する前にonAddressSelectイベントを確認します。

注意：Amazonのアドレス帳とお支払い方法ウィジェットの両方を使用する場合は、Billing Agreementを承認する前に、購入者は住所と支払方法の両方を選択しなければなりません。最初に表示された住所と支払方法が生成された後に購入者が住所選択を変更した場合は、購入者はそれから支払方法を再選択しなければなりません。この意味は、各選択住所に基づきonPaymentSelectを確認しなければなりません。（onAddressSelect通知） アドレス帳ウィジェットから住所情報を収集する必要がない場合は、「アドレス帳ウィジェット無しのインテグレーション」を参照してください。

Amazon Payから配送先住所を取得

多くの場合では、配送料を計算するために購入者の配送先住所を入手する必要があります。onAddressSelect通知を受け取った後は、購入者が選択した住所を受け取るためにGetBillingAgreementDetailsを呼び出すことができます。購入者がウィジェットからサポートされていない住所を選択した場合は、あなたはすぐにフィードバックを提供することができます。このシチュエーションでは、購入者がウィジェットと異なる配送先住所を選択する必要がある場合は、彼らにメッセージを表示するべきです。

Amazon アカウントでお支払いボタン（ゲスト購入）を利用している場合は、部分的な配送先住所（都道府県、郵便番号、国）にアクセスを行います。完全な配送先住所にアクセスするためには、AmazonアカウントでログインボタンかAmazonアカウントでお支払いボタンを利用し、Webページ上に埋め込むために利用しているJavaScriptにpayments:shipping_addressスコープパラメータをセットします。スコープパラメータについての詳しい情報は「Step1：購入者認証用のボタンウィジェット追加」内のENTER_SCOPESセクションを参照してください。

すべてのケースでは、Amazon PayのBilling Agreementを認証した後にGetBillingAgreementDetailsから完全な配送先住所を受け取れます。詳しい情報は、「Step7：Billing Agreementの詳細のセットと同意の確認」を参照してください。

購入者が選択した住所を受け取るには、onAddressSelect通知が始まった後にGetBillingAgreementDetails処理を呼び出します。

注意：全てのAPIを呼び出すには、正確に動作するための署名がされていなければなりません。APIリクエストを署名するためには、AmazonのMWS キーが必要になります。これらのキーをセラーセントラルにログインし、インテグレーションメニューにあるMWS Access Keyサブメニューを参照することで入手できます。このAmazonのMWSキーはAmazon Pay API処理でのAWSAccessKeyId リクエストパラメータ内にセットしなければなりません。サービスに署名されたAPI呼び出しを生成するための設定方法についての詳しい情報は、Webで公開しているAmazon MWS デベロッパーガイドを参照してください。

次のサンプルはGetBillingAgreementDetails処理の呼び出し方法を表します。

 
https://mws.amazonservices.com/OffAmazonPayments_Sandbox/2013-01-01  
?AWSAccessKeyId=AKIAIU5C4FEZYEXAMPLE  
&Action=GetBillingAgreementDetails  
&AccessToken=IQEBLzAtAhUAjagYW4Jrgw84pCaaIDjrKoEhZXsEXAMPLE  
&AmazonBillingAgreementId=C23-1234567-1234567  
&ContentType=JSON&JSONCallBack=cb  
&MWSAuthToken=amzn.mws.4ea38b7b-f563-7709-4bae-87aeaEXAMPLE  
&SellerId=YOUR_SELLER_ID_HERE  
&SignatureMethod=HmacSHA256  
&SignatureVersion=2  
&Timestamp=2013-10-29T10%3A38%3A44.000Z  
&Version=2013-01-01  
&Signature=gP11oEBaaiQdASWsLDyid18Wn%2BB%2FKZQQtKgpHCtEXAMPLE

注文確認する前で完全な配送先住所を取得するためにpayments:shipping_addressスコープパラメータを利用し、「Step1：購入者認証用のボタンウィジェット追加」で取得できる２つパラメータを提示する必要があります。

  1. アクセストークンは購入者がログイン承認された場合に返されます。 &AccessToken=YOUR_ACCESS_TOKEN
  2. AmazonのBilling Agreement IDはログインボタン、アドレス帳、お支払い方法ウィジェットから生成されます。 &AmazonBillingAgreementId=BILLING_AGREEMENT_IDENTIFIER

GetBillingAgreementDetails処理のリクエストパラメータとレスポンス要素の内容についての詳しい情報は、AmazonAPIリファレンスガイドにあるGetBillingAgreementDetailsを参照してください。