Step 3:ボタンウィジェットの追加

Amazon PayはAmazonログインとAmazon Payサービスで構成されており、技術的に関連しており同じプラットフォームで動作します。

Amazon Payは、購入者がAmazonのユーザーアカウントに登録されている配送先住所と支払方法を選択することを許可する購入オプションです。
Amazonログインは、購入者がWebサイトを参照した時にAmazonログイン認証を利用することを推奨します。

購入者がAmazonログインに成功した場合は、access tokenが返されます。この access token は、クライアント、購入者、および、個人情報の種類を要求するための識別子です。顧客情報を取得するために access tokenは必要になります。

処理内容

注意： 処理する前にデータをエンコードしなければなりません。Amazonから取得されるHTML、JavaScript、URL文字列のようないくつかの要素を出力する前にデータをエンコードすることを推奨します。Webサイト上で、悪意のあるスクリプト、その他の取り込まれた実行可能なファイルを実行できないように出力エンコードを確実にします。追加の詳しい情報は、 JavaScriptの「処理開始前にデータをエンコーディング」を参照してください。

次のステップは購入者認証のためのボタンウィジェットを追加する方法を説明します。
注文処理でこのステップを実行します。特に、Step1を完了する前にwidgets.jsスクリプト（Step 2）を追加してはいけません。コードサンプルは、このトピックの最後で説明します。

ボタンを表示させたい全てのページの<head>セクションにonAmazonLoginReadyとonAmazonPaymentsReadyのコールバックを追加します。このonAmazonPaymentsReadyコールバックはボタンを表示します。
```
 
<head>  
    <script type='text/javascript'>  
        window.onAmazonLoginReady = function() {  
            amazon.Login.setClientId('CLIENT-ID');  
        };  
        window.onAmazonPaymentsReady = function() {  
            showButton();  
        };  
    </script>  
</head>
```
詳しい情報は、JavaScriptの「WebページにCallbackとwidgets.jsコードの追加」を参照してください。

コールバック関数にwidget.jsファイルを追加します。

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

このサンプルのスクリプトタグは、バックグラウンドでAmazon Payを速やかにJavaScriptコードをロードするために許可された非同期属性を含みます。これはAmazon Payで唯一サポートしている非同期方法です。

Webページのbodyにボタンコードを追加します。ボタンを表示したい全てのページの<body>にJavaScriptを追加します。

 
<div id="AmazonPayButton">  
    </div>  
    ...  
    <script type="text/javascript">  
        function showButton(){  
            var authRequest;  
            OffAmazonPayments.Button("AmazonPayButton", " SELLER-ID", {  
                type: "TYPE",  
                color: "COLOR",  
                size: "SIZE",  
  
            authorization: function() {  
                loginOptions = {scope: "SCOPES", popup: "POPUP-PARAMETER"};  
                authRequest = amazon.Login.authorize (loginOptions,"REDIRECT-URL");  
        }  
        });  
</script>

このコードサンプルで表示しているパラメータは、Amazonから提示された値、および、システムの設定値に置き換えてください。詳しい情報はウィジェットの「ボタンウィジェット」を参照してください。

ボタンコードのエラーハンドリングを追加

 
    . . .  
    onError: function(error) {  
        // your error handling code.  
        // alert("The following error occurred: "  
        // + error.getErrorCode()  
        // + ' - ' + error.getErrorMessage());  
    }  
    . . .

onErrorハンドラーについての詳しい情報は、エラーハンドリングの「Amazon Payウィジェットのエラーハンドリング」を参照してください。

ログアウトオプションの追加
```
 
    <script type="text/javascript">  
        document.getElementById('Logout').onclick = function() {  
            amazon.Login.logout();  
        };  
    </script>
```
通常はリンク形式でセットアップされるログアウトオプションは、Webサイトからキャッシュされたトークンを削除し、お名前などのお客さま個人情報を取り除きます。それから、Webサイトは再度ログインボタンを表示できます。キャッシュされたトークンを削除するためにamazon.Login.logout()メソッドを呼び出し、Amazonによって生成されたセッションをクリアします。その後のamazon.Login.authorizeを呼び出しでは、デフォルトでログイン画面を表示します。

コードサンプル

 
<head>  
    <script type='text/javascript'>  
        window.onAmazonLoginReady = function() {  
            amazon.Login.setClientId('CLIENT-ID');  
        };  
        window.onAmazonPaymentsReady = function() {  
            showButton();  
        };  
    </script>  
    <script async="async" src='https://static-fe.payments-amazon.com/OffAmazonPayments/jp/sandbox/lpa/js/Widgets.js'>  
    </script>  
</head>  
  
<body>  
. . .  
    <div id="AmazonPayButton">  
    </div>  
    ...  
    <script type="text/javascript">  
        function showButton(){  
                var authRequest;  
                OffAmazonPayments.Button("AmazonPayButton", " SELLER-ID", {  
                    type: "TYPE",  
                    color: "COLOR",  
                    size: "SIZE",  
                authorization: function() {  
                    loginOptions = {scope: "SCOPES", popup: "POPUP-PARAMETER"};  
                    authRequest = amazon.Login.authorize (loginOptions,"REDIRECT-URL");  
                },  
  
                onError: function(error) {  
                    // your error handling code.  
                    // alert("The following error occurred: "  
                    //  + error.getErrorCode()  
                    //  + ' - ' + error.getErrorMessage());  
                }  
            });  
        };  
    </script>  
    . . .  
    <script type="text/javascript">  
    document.getElementById('Logout').onclick = function() {  
    amazon.Login.logout();  
    };  
    </script>  
</body>

Step 3:ボタンウィジェットの追加

処理内容

コードサンプル

その他のシナリオ: