選択された配送先住所と支払方法の表示
購入者がAmazon Payウィジェットから配送先住所と支払方法の両方を選択した後で、購入者が購入を完了する前に選択したものを確認するために参照のみのアドレス帳とお支払い方法ウィジェットを表示することができます。
注文確認ページを用意しており表示のみのウィジェットを表示することを決定している場合は、Amazonは購入者が完了画面を表示する前に選択された住所と支払方法を確認できることを推奨します。GetBillingAgreementDetails処理を呼び出し、制約要素に含まれるレスポンスをチェックするためにこれを実行できます。それぞれの制約の詳細は適切な調整を行う必要がある情報を提供します。例えば、ShippingAddressNotSetかPaymentPlanNotSet制約のどちらかを受け取った場合は、購入者にまだ配送先住所または支払方法の選択が必要であることを知らせる必要があります。
それとも、自動的に購入者に選択してもらうために適切なページにリダイレクトするようにサイトに組み込むことを行って問題ありません。購入者が配送先住所または支払方法を選択していない場合は、参照のみのウィジェットは選択する必要があることを購入者に通知します。
Billing Agreementに制約が返ってこなかった場合は、ConfirmBillingAgreement呼び出しが成功したことになります。制約について詳しい情報はAmazon Pay APIリファレンスのGetBillingAgreementDetailsとBilling Agreement制約を参照してください。購入者が購入を確認した後は、注文の実行と支払を続行できます。
参照のみのAmazon Payのアドレス帳とお支払い方法ウィジェットを生成した場合は、widthとheightパラメータを指定しなければなりません、そうしないとウィジェットは表示されません。推奨と有効なwidthとheightパラメータは次の表示に定義しています。
パラメータ | 推奨 | 有効 |
---|---|---|
width | 400px | 300px - 600px |
height | 185px | 185px |
参照のみのウィジェットを表示するためには、サイト上の元々表示されたウィジェットのコードの中にdisplayMode: "Read"のパラメータを追加して利用できます。編集可能なアドレス帳とお支払い方法ウィジェットと同じページ上で参照のみのウィジェットを表示したい場合は、onAddressSelectまたはonPaymentSelect通知を記載して、その際に参照のみのウィジェットを再表示します。そうしなければ、参照のみのウィジェットは正しい情報を表示しません。次は追加されたパラメータのサンプルコードです。
<!--- please put the style below inside CSS file -->
<style type="text/css">
#readOnlyAddressBookWidgetDiv {width: 400px; height: 185px;}
#readOnlyWalletWidgetDiv {width: 400px; height: 185px;}
</style>
<div id="readOnlyAddressBookWidgetDiv">
</div>
<div id="readOnlyWalletWidgetDiv">
</div>
<script>
new OffAmazonPayments.Widgets.AddressBook({
sellerId: 'YOUR_SELLER_ID_HERE',
// amazonBillingAgreementId obtained from Address or Wallet widget
amazonBillingAgreementId: amazonBillingAgreementId,
displayMode: "Read",
design: {
designMode: 'responsive'
},
onError: function(error) {
// your error handling code
}
}).bind("readOnlyAddressBookWidgetDiv");
</script>
<script>
new OffAmazonPayments.Widgets.Wallet({
sellerId: 'YOUR_SELLER_ID_HERE',
// amazonBillingAgreementId obtained from Address or Wallet widget
amazonBillingAgreementId: amazonBillingAgreementId,
displayMode: "Read",
design: {
designMode: 'responsive'
},
onError: function(error) {
// your error handling code
}
}).bind("readOnlyWalletWidgetDiv");
</script>
パラメータが追加された場合は、参照のみバージョンのウィジェットは次のスクリーンショットに似たものをWebサイトに表示します。