Step1：購入者認証用のボタンウィジェット追加
必要条件：このインテグレーションステップを開始する前に必要条件の全ての要求事項を完了してください。
埋め込みが必要で購入者に表示する最初のウィジェットは、Amazon Payボタンウィジェットです。購入者がサイト上での注文を支払うためにAmazon Payアカウントを使うことができることを知ってもらうためにこのウィジェットボタンを表示します。
Webサイトのheadセクション内に必要な（必要条件内で記述されている通りに）JavaScriptコードを追加している場合は、適切なコードを追加することで選択したボタンを埋め込むことができます。サンプルのAmazon Payボタンコードは以下の内容を参照してください。
<div id="AmazonPayButton"/>
<script type="text/javascript">
var authRequest;
OffAmazonPayments.Button("AmazonPayButton", "YOUR_MERCHANT_ID ", {
type: "ENTER_TYPE_PARAMETER",
color: "ENTER_COLOR_PARAMETER",
size: "ENTER_SIZE_PARAMETER",
authorization: function() {
loginOptions =
{scope: "ENTER_SCOPES", popup: "ENTER_POPUP_PARAMETER"};
authRequest = amazon.Login.authorize (loginOptions,
"YOUR_REDIRECT_URL ");
},
onError: function(error) {
// your error handling code
}
});
</script>
Webページで上記の定義したコードサンプルは、ボタンを表示するために利用されます。ボタンを表示させたいHTML内にこのコードを配置してください。
ボタンウィジェットパラメータ
サイトへボタンコードを追加する場合は、コードサンプルのパラメータを販売事業者の値に変更する必要があります。次のセクションはコードサンプル内のテキスト変更方法を記述します。
YOUR_MERCHANT_ID
アカウント登録時に得られた出品者IDをYOUR_MERCHANT_IDに置き換えます。出品者IDが不明な場合は、セラーセントラルにログインし、インテグレーションメニューのMWS Access Keyページで表示することで得られます。
ENTER_TYPE_PARAMETER
typeパラメータはWebページで選択したいボタンイメージを指定するオプションパラメータです。typeに値を指定しなかった場合は、Amazonログインボタンはデフォルトの値がセットされますので注意してください。
次の表は有効なtypeパラメータの値、ボタンの説明、サンプルのボタンイメージを表します。
| ボタンの説明 | ボタンサンプル | |
| LwA |
Amazonログインボタンを指定します。
typeが指定されていない場合は、これがデフォルトボタンです。 |
|
| PwA | Amazon Payボタンを指定します。 |
|
ENTER_COLOR_PARAMETER
colorパラメータはボタンの色を選択するためのオプションパラメータです。この表は有効なcolorコードの値、色の説明、色のサンプルを表します。
| Color コード | 色の説明 | 色サンプル |
| Gold | Gold（デフォルト） |
|
| LightGray | Light gray |
|
| DarkGray | Dark gray |
|
ENTER_SIZE_PARAMETER
sizeパラメータはボタンのサイズを選択するためのオプションパラメータです。有効なsizeコードの値は次の通りです。
| 標準 | 高詳細 |
|
|
選択されたボタンタイプで実際に表示されるサイズ
| パラメータ |
|
| タイプ | LwA-Amazonログインボタンを指定します。 |
| サイズ |
|
| パラメータ |
|
| タイプ | PwA-Amazon Payボタンを指定します。 |
| サイズ |
|
ENTER_SCOPES
scopeパラメータの値は、呼び出したレスポンス内で返ってきた内容と、個人情報を安全に共有する権限を表示するAmazon Payの同意画面のタイプの両方に影響します。
次のscopeパラメータの組み合わせを利用できます。
| Scopeパラメータ | 説明 | 要件 |
| profile | ログイン後に全てのユーザー情報（ユーザー名、メールアドレス、ユーザーID）へのアクセスを与えます。 | |
| profile:user_id | ログイン後にユーザー情報からユーザーIDだけへのアクセスを与えます。 | |
| postal_code | ユーザーの既定の住所から郵便番号を与えます。 | postal_codeスコープへアクセスした場合で、profileやprofile:user_idスコープと単独、または、組み合わせでアクセス要求時は、ユーザーは個人情報を共有するために同意しなければなりません。 |
| payments:widget | ページ上でAmazon Payウィジェット（アドレス帳とお支払い方法ウィジェット）を表示するために要求します。パラメータ無しで利用した場合は、ConfirmBillingAgreement呼び出し後に完全な配送先住所にアクセスすることを許可されます。 | |
| payments:shipping_address | アドレス帳ウィジェットで選択された住所をすぐにGetBillingAgreementDetailsのAPI呼び出し経由で完全な配送先住所にアクセスすることを与えます。 |
必須のスコープパラメータ
payments:widget AccessToken を GetOrderReferenceDetails呼び出すの中でセットします。 |
組み合わせ例：scope: profile payments:widget payments:shipping_address
payments:shipping_addressは購入者の配送先住所へのアクセスを提供します。完全な配送先住所を取得するためには、GetBillingAgreementDetailsのAPIを呼び出す必要があります。詳しい情報は、「Step2：アドレス帳とお支払い方法ウィジェットの追加」の中の「Amazon Payから配送先住所を取得」、または、Amazon Pay APIリファレンスのGetBillingAgreementDetailsを参照してください。
ENTER_POPUP_PARAMETER
popupパラメータは購入者に認証をポップアップウィンドウで表示するのか、代わりにAmazon Pay認証ページにリダイレクトするのか決定します。
次のpopupパラメータの１つを利用します。
- true- Amazon Payの認証画面は、ポップアップダイアログが表示されWebサイトから離れずに購入者が認証できます。 この値はデスクトップでボタンウィジェットがセキュアページ上で表示されることが必要です。このオプションは正しいTLS/SSL 証明書があるHTTPSページ上に存在することを理解してください。
- false- 購入者は同じブラウザウィンドウ内でAmazon Payページがリダイレクトされます。 この値はスマートフォン向けに最適化されたデバイスや非セキュアページ上でボタンウィジェットをレンダリングする場合に推奨されます。リダイレクトURLはHTTPSプロトコルを使用しなければならず、正しいTLS/SSL証明書が必要であることを理解してください。
詳しい情報は、「リダイレクト認証エクスペリエンスの利用」を参照してください。
デフォルト：popup: true
ポップアップパラメータにtrueをセットしてAmazon Payボタンを埋め込む場合は、購入者はAmazon Payアカウントのメールアドレスとパスワードが求められます。
前のスクリーンショットの中で、会社ロゴを認証ウィンドウに追加することができます。セラーセントラルのAmazonログイン画面のアプリケーション情報でロゴデータを登録することができます。
YOUR_REDIRECT_URL
リダイレクトURLは購入者が認証に成功した後にリダイレクトされるページのパラメータです。例えば、認証が成功した後、配送先住所または支払方法の詳細を選択するための次にページに遷移することが必要です。ボタンコードの中で"popup:false"を利用している場合は、どの方法をリダイレクトログインエクスペリエンスで利用するのか注意して、セラーセントラル内のAmazonログイン設定でのウェブ設定のリダイレクトURLに全て許可する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呼び出しでログイン画面を表示します。