Amazon Pay インテグレーションガイド

JavaScript

処理開始前にデータをエンコーディング

HTML、JavaScript、URL文字列などのFORM内に出力する前に、Amazonから受け取ったデータをエンコードすることを推奨します。出力エンコーディングに悪意のあるスクリプトやWebサイトで実行可能なスクリプトを除外することを確実にします。

Open Web Application Security Project(OWASP) APIであるESAPIは、無償で提供され、オープンソースのアプリケーションセキュリティコントロールライブラリです。これを利用することでローリスクなアプリケーションを素早く記述できます。この標準ライブラリをアウトプットエンコードに利用してください。

次のサンプルコードは、最も汎用タイプのデータエンコード方法です。

  • HTML:
    String safe = ESAPI.encoder().encodeForHTML( request.getParameter( "input" ) );
  • widthやnameなどの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" ) );

Webページにcallbackとwidgets.jsコードを追加

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

ベストプラクティスとして、ボタン、アドレス帳、お支払い方法ウィジェットを含むWebページの<head>セクション内に次のコードを配置することを勧めます。更に、Amazonから提供されているJavaScriptのコンテンツをローカルコピーや変更しないことにしてください。これはウィジェットのレンダリングや機能的エラーなど意図しない結果を引き起こします。

<head>
<script type='text/javascript'>
window.onAmazonLoginReady = function() {
amazon.Login.setClientId('YOUR_CLIENT_ID_HERE');
};
</script>

<script type='text/javascript'
src='https://static-na.payments-amazon.com/OffAmazonPayments/us/sandbox/js/Widgets.js'>
</script>
</head>

非同期JavaScript

Amazon Payはもっと速くWebページでレンダリングするために、非同期ローディングJavaScriptを限定的に提供しております。非同期ローディングの利用を選択する場合では、スクリプトタグ内の非同期属性だけサポートしています。

非同期でAmazon Payボタンをロードするためには、次の通りにします。

  1. ページのhead部にあるonAmazonLoginReadyコールバックにclientIdをセットします。
  2. ページのbody部に、ボタンまたはウィジェットをレンダリングするJavaScriptの前に LoginWithAmazonの<div>を配置します。
  3. window.onAmazonPaymentsReady機能を定義します。この関数の中にJavaScriptのリファレンスを移動します。
  4. window.onAmazonPaymentsReady関数の次にasync属性をWidgets.jsのスクリプトタグに追加します。

タイミングの問題を防止するために、スクリプトタグは上記の順番に配置する必要があります。

次のサンプルコードは、非同期のAmazon Payボタンをロードする方法です。

<div id="PaymentsWidget"></div>

<script>
window.onAmazonLoginReady = function(){
amazon.Login.setClientId('YOUR_CLIENT_ID');
};
window.onAmazonPaymentsReady = function() {
// Render the button here.
};
</script>

<script async='async' type='text/javascript'
src='https://static-na.payments-amazon.com/OffAmazonPayments/us/sandbox/js/Widgets.js'>
</script>

上記のサンプルはSANDBOX環境です。本番環境にコードを移行する場合は、適宜URLを変更してください。

注意

  • ボタンまたはウィジェットをレンダリングする前に対応するdiv要素を配置してください。ボタンとウィジェットはonAmazonPaymentsReadyコールバック内でレンダリングして、widgets.jsがロードされてから呼び出されます。
  • widgets.jsのローディングは一度だけ発生し、widgets.jsがロードされた<script>タグ内のasync属性が必要です。

非同期属性のスクリプトタグの詳しい情報はを Mozilla Developer Network Script Tag Summary を参照してください。