必要条件

注意：このガイドはテスト環境のAmazon Payでインテグレーションする方法を説明します。Amazon PayのSANDBOXであるこのテスト環境はインテグレーションを本番環境に移行する前にエンドツーエンドのテストを行うために有効です。

SANDBOX環境についての詳しい情報は「SANDBOX環境でのインテグレーションテスト」を参照してください。

SANDBOX環境から本番環境へ切り替えるためには、次の内容を変更します。

Amazon MWS エンドポイント
SANDBOX	https://mws.amazonservices.jp/OffAmazonPayments_Sandbox/2013-01-01/
本番環境	https://mws.amazonservices.jp/OffAmazonPayments/2013-01-01/
Widgets.js URL
SANDBOX	https://static-fe.payments-amazon.com/OffAmazonPayments/jp/sandbox/lpa/js/Widgets.js
本番環境	https://static-fe.payments-amazon.com/OffAmazonPayments/jp/lpa/js/Widgets.js
Profile API エンドポイント
SANDBOX	https://api.sandbox.amazon.co.jp/user/profile
本番環境	https://api.amazon.co.jp/user/profile

Amazon PayをWebサイトに設定

Amazon Payは重要な購入者エクスペリエンスを提供して動作します。ボタンオプションであるAmazonログインやAmazon Payのどのボタンを利用するかにかかわらず、行わなければならないAmazonログインの基本的な設定がいくつかあります。Amazonログインの設定はセラーセントラルのAmazonログインページにアクセスして設定します。

アプリケーション登録は、Amazon Payのセラーセントラルにログインして画面上部から「Amazonログイン」を選択して、新しいアプリケーションを登録するボタンをクリックします。アプリケーション登録フォームが表示されます。
アプリケーション詳細ページには、Webサイトについての基本情報を追加します。これらの詳細はWebサイトで利用されます。

名前　ユーザーが情報を共有することに同意する画面に表示されるサイトの名前です。この名前はアプリケーションであるWebサイトに提供されます。
詳細　Amazonログインを利用するWebサイトの説明です。
プライバシー規約URL　プライバシー規約URLは会社のプライバシーポリシーが記載されているURLです。このリンクはユーザーがアプリケーションへ最初にログインした時に表示されます。（例えば、http://www.example.com/privacy.html）
ロゴデータ　このロゴは購入者がWebサイトやモバイルアプリにログインした時のサインインと同意画面に表示されます。ロゴは自動的に50 x 150ピクセルにリサイズされます。受け取れるフォーマットはPNG、JPEG、GIFになります。

設定が完了しましたら、変更を保存するために保存するをクリックしてください。

Webサイトをアプリケーションに追加

Amazonログイン画面のウェブ設定を参照（クリック）します。クライアントIDとクライアントシークレットは自動的に設定されます。クライアントIDはWebサイトに、クライアントシークレットは認証する状況において、Webサイトを確かめるために利用します。パスワードに似ているクライアントシークレットは機密です。クライアントシークレットを表示するためにはクライアントシークレットを表示するをクリックします。
アプリケーションのJavaScriptの種類とリダイレクトURLを追加するためには編集するをクリックします。注意：WebサイトでAmazonログインを使うためには、JavaScriptの種類（購入者のログイン画面がポップアップ）かリダイレクトURL（購入者のログイン画面が画面遷移）のどちらかを指定しなければなりません。Amazon Payを利用する場合は、オプションの１つを指定しなければなりません。
アドレスはプロトコル、ドメイン名、ポートの組み合わせです。（例としては、https://www.example.com:8443）許可されているアドレスはHTTPSプロトコルを使わなければなりません。標準的なポート（443番ポート）を利用している場合は、ドメイン名を含めるのみで十分です。（例としては、https://www.example.com）ログイン処理中に直接Webサイトと通信するためのドメイン名をJavaScriptの種類に追加します。Webブラウザは、一般的にクロスサイト間の通信するスクリプトは許可されたものでない限りブロックします。アドレスを追加するには、さらに追加するをクリックします。
WebサイトがAmazonログイン認証サービスを呼び出すのにHTTPSで構築し、応答でredirect_uriを指定するのであれば、それらのリダイレクトURIをリダイレクトURLに追加します。戻りのURLにはプロトコル、ドメイン、パス、クエリー文字列を含めます。（例としては、https://www.example.com/login.php）戻りのURLを追加するためには、さらに追加するをクリックします。
保存するをクリックするとAmazonログインの設定が完了されます。

Amazon Payウィジェットを利用するための準備

サイト上に埋め込まれたウィジェットを正確に表現するために、onAmazonLoginReadyコールバックのためのハンドラを提供し、WebサイトのソースコードにAmazon PayのJavaScriptファイルであるWidgets.jsを追加しなければなりません。Amazon Payウィジェットを表示したい場所でこれを実行しなければなりません。

onAmazonLoginReadyコールバックを定義する方法、Amazon PayのJavaScriptファイルに追加する方法は、次のサンプルコードに示しているような行を追加します。

ベストプラクティスとして、ボタン、住所、支払ウィジェットが含まれるWebページのheadセクションにこのコードを配置することをAmazon Payは推奨します。さらに、ローカルコピーを作成せず、Amazonから提供しているJavaScriptの内容を変更しないでください。これは意図しないウィジェットの表示や機能的なエラーなどの結果を引き起こすことがあります。

 
<head>  
// your head section here  
<script type='text/javascript'>  
  window.onAmazonLoginReady = function() {  
    amazon.Login.setClientId('YOUR_CLIENT_ID');  
  };  
</script>  
  
<script async='async' type='text/javascript'  
  src='https://static-fe.payments-amazon.com/OffAmazonPayments/jp/sandbox/lpa/js/  
    Widgets.js'>  
</script>  
// your head section here  
</head>

Amazon PayのJavaScriptファイルがソースコードに追加された後は、Amazon Payのウィジェットを導入できる状態になります。

ベストプラクティス

処理前のデータエンコード

HTML、JavaScript、URLの中など多くのフォームの中に出力する前に、Amazonから届いた多くのデータをエンコードすることを推奨します。悪意のあるスクリプトや多く投入された実行可能ファイルをあなたのサイト上で実行できないように出力したエンコードを確実にします。
オープンウェブアプリケーションセキュリティプロジェクト（OWASP）APIであるESAPIは、ローリスクのアプリケーション開発を容易にするためにオープンソースウェブアプリケーションセキュリティコントロールライブラリをフリーで提供しています。アウトプットを確実にするためにこの標準的なライブラリを利用してください。

いつくかの最も一般的な種類のアウトプットのデータをエンコードする方法を次のサンプルで表します。

HTML:
String safe = ESAPI.encoder().encodeForHTML( request.getParameter( "input" ) );
width、名前、値などのHTML属性の値:
String safe = ESAPI.encoder().encodeForHTMLAttribute( request.getParameter( "input" ) );
URLパラメータの値:
String safe = ESAPI.encoder().encodeForURL( request.getParameter( "input" ) );
JavaScriptデータの値:
String safe = ESAPI.encoder().encodeForJavaScript( request.getParameter( "input" ) );

非同期JavaScript

Amazon PayはすばやくWebページに表示するためのJavaScriptの非同期ローディングを限定的にサポートします。非同期ローディングを行う唯一の方法は、Amazon Payのスクリプトタグ内のasync属性です。

非同期のAmazon Payボタンをロードするためには

ページのヘッダー内の、onAmazonLoginReadyコールバック内にクライアント IDをセットします。
ページのbodyに、"LoginWithAmazon"div要素をボタンやウィジェットを表示するJavaScriptの前に配置します。
window.onAmazonPaymentsReady関数を定義します。多くのJavaScriptリファレンスをこのOffAmazonPayments関数の中に移動します。
以下の定義のようにasync属性と同じにWidgets.jsスクリプトタグを追加します。

タイミングの問題が起こらないように、スクリプトタグは上記の順番に配置する必要があります。

次は非同期ローディングのサンプルです。

 
// In the head of the web page:  
<head>  
  <script type='text/javascript'>  
    window.onAmazonLoginReady = function() {  
      amazon.Login.setClientId('YOUR-CLIENT-ID');  
    };  
  </script>  
</head>  
  
// In the body of the page:  
<div id="LoginWithAmazon"></div>  
  
<script>  
  window.onAmazonPaymentsReady = function(){  
    // render the button here  
    OffAmazonPayments.Button('LoginWithAmazon',  
                         '<Your-Seller-ID>', {  
      ...  
  }  
</script>  
  
<script async='async' type='text/javascript' src=' https://static-fe.payments-amazon.  
com/OffAmazonPayments/jp/sandbox/lpa/js/Widgets.js'>  
</script>

注意：上記のサンプルはSANDBOX用です。本番環境に移行する場合はそれに応じたURLに変更が必要です。

スクリプトタグのasync属性についての詳しい情報はMozilla Developer Network script tag Summaryを参照してください。