Step 4:アドレス帳とお支払い方法ウィジェットの追加 | Amazon Pay Japan

Step 4:アドレス帳とお支払い方法ウィジェットの追加

購入者の認証に成功した後は、サイト上にAmazon Payのアドレス帳お支払い方法ウィジェットをレンダリングできます。アドレス帳お支払い方法ウィジェットは、購入者のAmazonアカウントからそれぞれデフォルトの配送先住所と支払方法を表示します。

アドレス帳お支払い方法ウィジェットが表示された場合は、購入者はセッションが切れるまでに60分間あります。一度セッションが切れると、ウィジェットの中でメッセージが表示され、購入者は新しい住所または支払方法を選択することを試みます。

処理内容

ウィジェットの埋め込み

  1. 表示したい場所があるHTMLページにコードを追加することでWebサイトにウィジェットの埋め込みができます。
    Amazon Pay機能を利用する多くのページでは、Widgets.jsをロードするJavaScriptブロックにクライアントIDをセットしなければなりません。次のサンプルコードで示しているように同じ手順でコードが表示されるか確認します。これらは2つのスクリプトブロック間で他のコードで示すことができます。
     
    <script>  
        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>
    
    上記のサンプルには非同期属性のスクリプトタグが含まれます。バックグラウンドでAmazon Payを素早くWebページにロードさせるJavaScriptコードです。これはAmazon Payが唯一サポートする非同期方法です。
  2. モバイルに最適化されたWebサイトのために、Webページのheadに<meta>タグを追加します。 この<meta>タグは、ユーザーが手動でページズームすること無しに、モバイルデバイスや電子書籍で参照可能な画面サイズに応じてウィジェットを調整します。
     
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0"/>
    
  3. 幅と高さのパラメータを指定してウィジェットがレンダリングされます。(詳しく情報は、Amazon Payウィジェットを参照してください。)

トランザクションフロー

アドレス帳お支払い方法ウィジェットを表示した場合は、購入者はセッションが切れるまでに選択しなければなりません。セッションが切れた場合は、購入者はログイン画面が表示され、再度ログインしなければなりません。

トランザクションは次の通りに発生します。

  1. 購入者の配送先住所を取得します。配送料や消費税を注文の合計金額に含めた計算を行うために購入者の配送先住所が必要になります。onAddressSelect通知を受け取った後で、GetOrderReferenceDetails API呼び出しにて住所を受け取ります。
    AccessToken フィールドはGetOrderReferenceDetails呼び出しを生成するために必要です。このAccess Tokenは、レスポンスに完全な配送先住所を取得するためにどのscopeパラメータをセットするのか影響します。
  2. 購入者の支払方法を取得します。購入者が初期表示された住所の選択を変更した場合は、再度支払方法を選択しなければなりません。これはそれぞれの住所選択でのonPaymentSelect通知を確認しなければなりません。
  3. 購入フローで次に進めることを可能にします。onPaymentSelectコールバックが発生した後では、次の購入フローを可能にできます。例えば、注文確認画面を用意している場合は、「購入する」ボタンや「次に進める」ボタンを有効にできます。

サンプルコード

Pythonサンプルコード(US)
GetOrderReferenceDetailsAPIの呼び出し

 
from pay_with_amazon.client import PayWithAmazonClient  
client = PayWithAmazonClient(  
    mws_access_key='YOUR_ACCESS_KEY',  
    mws_secret_key='YOUR_SECRET_KEY',  
    merchant_id='YOUR_MERCHANT_ID',  
    region='na',  
    currency_code='USD')  
  
response = client.get_order_reference_details(  
    amazon_order_reference_id='AMAZON_ORDER_REFERENCE_ID',  
    address_consent_token='ADDRESS_CONSENT_TOKEN')

Rubyサンプルコード(US)
GetOrderReferenceDetails APIの呼び出し

 
require 'pay_with_amazon'  
  
merchant_id = 'YOUR_MERCHANT_ID'  
access_key = 'YOUR_ACCESS_KEY'  
secret_key = 'YOUR_SECRET_KEY'  
  
client = PayWithAmazon::Client.new(  
    merchant_id,  
    access_key,  
    secret_key,  
    sandbox: true,  
    currency_code: :usd,  
    region: :na  
)  
  
amazon_order_reference_id = 'AMAZON_ORDER_REFERENCE_ID'  
address_consent_token = 'ADDRESS_CONSENT_TOKEN'  
client.get_order_reference_details(  
    amazon_order_reference_id,  
    address_consent_token: address_consent_token,  
    mws_auth_token: 'amzn.mws.4ea38b7b-f563-7709-4bae-87aeaEXAMPLE'  
)

その他のサンプルコード(US)

 
https://mws.amazonservices.com/OffAmazonPayments_Sandbox/2013-01-01  
?AWSAccessKeyId=AKIAJKYFSJU7PEXAMPLE  
&Action=GetOrderReferenceDetails  
&AddressConsentToken=IQEBLzAtAhUAjagYW4Jrgw84pCaaIDjrKoEhZXsEXAMPLE  
&AmazonOrderReferenceId=S23-1234567-1234567  
&SellerId=YOUR_SELLER_ID_HERE  
&SignatureMethod=HmacSHA256  
&SignatureVersion=2  
&Timestamp=2012-10-03T19%3A01%3A11Z  
&Version=2013-01-01  
&Signature=CLZOdtJGjAo81IxaLoE7af6HqK0EXAMPLE

アドレス帳ウィジェット

注意: 同じページで両方のウィジェットを表示する場合は、お支払い方法ウィジェットはアドレス帳ウィジェットのローディングが完了してからロードされることを確認してください。

 
<div id="addressBookWidgetDiv">  
</div>  
  
<script>  
    new OffAmazonPayments.Widgets.AddressBook({  
    sellerId: 'YOUR_SELLER_ID_HERE',  
    onOrderReferenceCreate: function(orderReference) {  
        // Here is where you can grab the Order Reference ID.  
        orderReference.getAmazonOrderReferenceId();  
    },  
    onAddressSelect: function(orderReference) {  
        // Replace the following code with the action that you want  
        // to perform after the address is selected. The  
        // amazonOrderReferenceId can be used to retrieve the address  
        // details by calling the GetOrderReferenceDetails operation.  
        // If rendering the AddressBook and Wallet widgets  
        // on the same page, you do not have to provide any additional  
        // logic to load the Wallet widget after the AddressBook widget.  
        // The Wallet widget will re-render itself on all subsequent  
        // onAddressSelect events, without any action from you.  
        // It is not recommended that you explicitly refresh it.  
    },  
    design: {  
        designMode: 'responsive'  
    },  
    onReady: function(orderReference) {  
        // Enter code here you want to be executed  
        // when the address widget has been rendered.  
    },  
    onError: function(error) {  
        // Your error handling code.  
        // During development you can use the following  
        // code to view error messages:  
        // console.log(error.getErrorCode() + ': ' + error.getErrorMessage());  
        // See "Handling Errors" for more information.  
    }  
    }).bind("addressBookWidgetDiv");  
</script>

お支払い方法ウィジェット

 
<!-- Place this code in your HTML where you would like the  
    Wallet widget to appear. -->  
<div id="walletWidgetDiv">  
</div>  
  
<script>  
    new OffAmazonPayments.Widgets.Wallet({  
        sellerId: 'YOUR_SELLER_ID_HERE',  
        onPaymentSelect: function(orderReference) {  
            // Replace this code with the action that you want to perform  
            // after the payment method is selected.  
  
            // Ideally this would enable the next action for the buyer  
            // including either a "Continue" or "Place Order" button.  
        },  
        design: {  
        designMode: 'responsive'  
        },  
  
        onError: function(error) {  
            // Your error handling code.  
            // During development you can use the following  
            // code to view error messages:  
            // console.log(error.getErrorCode() + ': ' + error.getErrorMessage());  
            // See "Handling Errors" for more information.  
        }  
    }).bind("walletWidgetDiv");  
</script>

その他のシナリオ