ボタンウィジェット | Amazon Pay Japan

ボタンウィジェット

Amazonではサイズが異なる複数のボタンを提供しており利用できます。ボタンサイズは利用されている環境に適切なものをご利用ください。

次の表はそれぞれのボタンウィジェットのオプションです。ボタンのテキストは、お客様が混乱しないようにするために変更はできません。

ボタン ユースケース
Amazon アカウントでログイン Amazonアカウント情報を利用してサイトにログインすることを購入者に許可するボタンです。購入者は購入処理前、または途中でログインすることができます。購入者がAmazonアカウントでログインボタンをクリックした後は次の方法を利用できます。
  • 購入者の個人情報にアクセス
    ボタンウィジェットのscopeパラメータを設定内容に応じて、購入者のAmazon個人情報(名前、メールアドレス、ユニークなユーザーID)にアクセスできます。 購入者の購入エクステンションをカスタマイズするために個人情報を利用でき、ブラウザ履歴をトラックできます。ユーザーIDは購入者が再訪したときに利用できます。
  • 購入者のためにローカルアカウントを作成
    Amazonユーザープロファイルに含まれる情報を利用してショップアカウントを作成します。このアカウントは通常のショップアカウントと同じであり、同じベネフィットを提供できます。異なるのは、顧客はAmazonログインでパスワードを生成できないことです。
Amazon アカウントでお支払い このボタンは、Amazonアカウントを利用してカートページや多くの商品ページから登録されている配送先と支払方法を利用して注文を作成するために利用します。 購入者がAmazonアカウントでお支払いボタンをクリックした場合は、配送先と支払情報にアクセスする前にAmazonのユーザー名とパスワードを利用してログインします。 このボタンタイプでは、次の機能を提供することができます。
  • ログインして購入
    Amazonログインと同様に、サイトに初めてログインした時に購入者の個人情報を共有して良いか購入者に要求できます。
  • ゲスト購入
    Amazonアカウントでお支払いボタンは、トランザクションを完了する前に、個人情報の共有なしでお買い物を完了することができます。 配送先と支払情報にアクセスするために購入者がログインした場合は、住所情報、郵便番号など送料計算するための情報のみ受け取ります。 ゲストとしてAmazon Payを利用してログインした場合は、購入者に同意画面は表示されません。 購入者が注文処理を完了した後で、購入者の名前、メールアドレス、配送先住所を取得できます。

ボタンウィジェットパラメータ

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 を単独、または、 profileprofile:user_id スコープと複合してアクセス要求した場合は、購入者は情報共有の同意画面が表示されます。
payments:widget Amazon Payのウィジェット(住所と支払ウィジェット)をWebサイト上で表示させる場合に必須です。次のパラメータ無しで利用した場合は、ConfirmOrderReference呼び出し後に完全な配送先住所へのアクセスが与えられます。
payments:shipping_address アドレス帳ウィジェットに選択された住所を直ぐにGetOrderReferenceDetails API呼び出し経由で、完全な配送先住所としてアクセスできます。
  • scope parameterに Payments:widget
  • GetOrderReferenceDetails呼び出しのAddressConsentToken(=AccessToken)をセットします。

例 scope:profile payments:widget payments:shipping_address

payments:shipping_address は購入者の配送先住所へのアクセスを提供します。完全な配送先住所を取得するためには、GetOrderReferenceDetails APIを呼び出す必要があります。詳しい情報は、Step 4:アドレス帳とお支払い方法ウィジェットの追加か、Amazon Pay APIリファレンスのGetOrderReferenceDetailsを参照してください。

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を呼び出して、ログイン画面を表示します。