ボタンウィジェット
Amazonではサイズが異なる複数のボタンを提供しており利用できます。ボタンサイズは利用されている環境に適切なものをご利用ください。
次の表はそれぞれのボタンウィジェットのオプションです。ボタンのテキストは、お客様が混乱しないようにするために変更はできません。
ボタン | ユースケース |
---|---|
Amazon アカウントでログイン
![]() |
Amazonアカウント情報を利用してサイトにログインすることを購入者に許可するボタンです。購入者は購入処理前、または途中でログインすることができます。購入者がAmazonアカウントでログインボタンをクリックした後は次の方法を利用できます。
|
Amazon アカウントでお支払い
![]() |
このボタンは、Amazonアカウントを利用してカートページや多くの商品ページから登録されている配送先と支払方法を利用して注文を作成するために利用します。
購入者がAmazonアカウントでお支払いボタンをクリックした場合は、配送先と支払情報にアクセスする前にAmazonのユーザー名とパスワードを利用してログインします。 このボタンタイプでは、次の機能を提供することができます。
|
ボタンウィジェットパラメータ
Amazon Payボタンウィジェットは、WebサイトのHTMLコードのbody内にJavaScriptコードを利用してレンダリングされます。JavaScriptコードは、ボタンタイプ、カラー、サイズなどに影響するパラメータを含みます。
次はJavaScriptボタンウィジェットコードに含められるパラメータと値を説明します。
MerchantID
YOUR_MERCHAN_IDにアカウント作成で取得された販売事業者のID(出品者ID)と置き換えてください。販売事業者ID(出品者ID)が不明な場合は、セラーセントラルにログインし、インテグレーションメニューのMWS Access Keyページを参照してください。
Type
typeパラメータは、Webページに選択したいボタンイメージのタイプを指定するためのオプションパラメータです。typeを指定しなかった場合は、LwA(Amazonログイン)ボタンがデフォルト値としてセットされます。
次の表は有効なtypeパラメータ値、ボタンの説明、サンプルボタンイメージです。
type | 説明 | イメージ |
---|---|---|
LwA | Amazonアカウントでログインボタンを指定します。typeが指定されていない場合のデフォルトボタンです。 |
![]() |
PwA | Amazonアカウントでお支払いボタンを指定します。 |
![]() |
Color
colorパラメータは、ボタンの色を選択したい場合のオプションパラメータです。次の表はcolorコード、colorの説明、colorのサンプルです。
color | 説明 | サンプル |
---|---|---|
Gold | Gold(デフォルト値) |
![]() |
LightGray | Light gray |
![]() |
DarkGray | Dark gray |
![]() |
Size
sizeパラメータはボタンのサイズを選択したい場合のオプションパラメータです。有効なsize codeは次の通りです。
パラメータ |
![]() |
![]() |
---|---|---|
size |
small(156px × 32px)
medium(174px × 46px) large(312px × 64px) x-large(390px × 92px) |
small(148px × 30px)
medium(200px × 45px) large(296px × 60px) x-large(400px × 90px) |
Scope
scopeパラメータの値は、呼び出しレスポンスで返されたコンテンツと個人情報の共有するための同意画面のタイプに影響します。
次のscopeパラメータの組み合わせが利用できます。
パラメータ | 説明 | 要求事項 |
---|---|---|
profile | ログイン後にすべての個人情報(名前、メールアドレス、ユーザーID)へのアクセスを提供します。 | |
profile:user_id | ログイン後に個人情報からユーザーIDだけへのアクセスを提供します。 | |
postal_code | メインの配送先住所の郵便番号だけ提供します。 | postal_code を単独、または、 profile、 profile:user_id スコープと複合してアクセス要求した場合は、購入者は情報共有の同意画面が表示されます。 |
payments:widget | Amazon Payのウィジェット(住所と支払ウィジェット)をWebサイト上で表示させる場合に必須です。次のパラメータ無しで利用した場合は、ConfirmOrderReference呼び出し後に完全な配送先住所へのアクセスが与えられます。 | |
payments:shipping_address | アドレス帳ウィジェットに選択された住所を直ぐにGetOrderReferenceDetails API呼び出し経由で、完全な配送先住所としてアクセスできます。 |
|
例 scope:profile payments:widget payments:shipping_address
payments:shipping_address は購入者の配送先住所へのアクセスを提供します。完全な配送先住所を取得するためには、GetOrderReferenceDetails APIを呼び出す必要があります。詳しい情報は、Step 4:アドレス帳とお支払い方法ウィジェットの追加か、Amazon Pay APIリファレンスのGetOrderReferenceDetailsを参照してください。
Popup
popup パラメータは、認証ためにポップアップウィンドウを表示するか、Amazon Payページでリダイレクト認証するかを決定します。
popup パラメータは次の中から1つを利用します。
- true - Amazon Payは、購入者はWebサイトから離れずに認証することができるポップアップダイアログを認証画面として表示します。この値は暗号化されたデスクトップPCでの利用を推奨します。このオプションは正しいSSL証明書のあるHTTPSページに属するボタンでは必要です。デフォルト値です。
- false - 購入者は同じブラウザウィンドウ内でAmazon Payページにリダイレクトされます。この値は、デバイスに最適化されたスマートフォンや、非セキュアページボタンウィジェットをレンダリングする場合での利用に推奨します。リダイレクト先のURLは正しいSSL証明書のあるHTTPSプロトコルである必要があります。
詳しい情報は、リダイレクト認証の利用を参照してください。
Amazon Payにポップアップパラメータをtrueにセットして導入した場合は、購入者はAmazonアカウントのメールアドレスとパスワードが求められます。
上記画面イメージでは、ログイン認証画面に会社のロゴを追加することができます。セラーセントラルにログインしてAmazonログイン画面より各アプリケーション毎にロゴを設定することができます。
リダイレクトURL
redirect URLのパラメータでは、購入者が認証に成功した後に指定されたページにリダイレクトします。例えば、認証に成功した後で、購入者に配送先住所または支払方法の詳細を選択する購入フローの画面に遷移させることができます。ボタンコードにpopup:falseを利用することで、リダイレクトログインエクスペリエンスができます。それには、セラーセントラルにログインして、Amazonログインのアプリケーションにリダイレクト先のURLを事前に登録しなければなりません。
エラーハンドリングコード
Amazonはコード内のonErrorハンドラの設定を推奨します。このonErrorコードはオプションですが、インテグレーションの問題を解決するために考慮するべきです。詳しくは、SANDBOX環境でのインテグレーションテストを参照してください。
ログアウトオプションの追加
ユーザーがログインしている場合は、Webサイト上にログアウトオプション(ハイパーリンク)を提供するべきです。ログアウトオプションはキャッシュされたトークンと個人情報(名前など)をWebサイトから削除します。それから、再度Webサイトにログインボタンを表示します。
AmazonログインSDK for JavaScriptを利用している場合は、キャッシュされたトークンを削除するためにamazon.Login.logoutメソッドを呼びます。
<script type="text/javascript">
document.getElementById('Logout').onclick = function() {
amazon.Login.logout();
};
</script>
この次に、デフォルトでamazon.Login.authorizeを呼び出して、ログイン画面を表示します。