ログイン
ログイン

Amazon Payボタンを追加する

[Step 2 of 7] 購入者がAmazon Payボタンをクリックすると、Amazon Pay決済エクスペリエンスが始まります。OneTimeチェックアウトフローとは異なり、購入者はAmazon Payボタンをクリックした後、Amazon PayのBuy Nowでホストされたチェックアウトページで決済を完了します。

このステップでは Amazon Payチェックアウトセッションオブジェクトを設定し、Amazon Payボタンをレンダリングします。このステップの最後に購入者をAmazon PayのBuy Nowページにリダイレクトすることができます。

購入者はこのページで配送オプションを確認・変更および注文の詳細を確認し、チェックアウトを完了することができます。

Amazon Payボタンが表示されるドメインをセラーセントラルに追加する必要があります。詳しくは、セラーセントラルにドメインを追加する をご覧ください。

1. Amazon Payスクリプトを追加します

Amazon PayスクリプトをHTMLファイルに追加します。必ず正しいリージョンを選択してください。

<script src="https://static-na.payments-amazon.com/checkout.js"></script>

<script src="https://static-eu.payments-amazon.com/checkout.js"></script>

<script src="https://static-fe.payments-amazon.com/checkout.js"></script>

2. ペイロードを生成します

Amazon Payボタンをレンダリングするには、Amazon Payがチェックアウトを開始するために使用するペイロードを提供する必要があります。

ペイロードを作成するには、購入者がチェックアウトを完了するために必要なすべての詳細を提供する必要があります。OneTimeインテグレーションとの大きな違いとして、webCheckoutDetailsを渡す必要はありません。

ボタンペイロードを生成するための手順:

  • scopes パラメータを使用して、チェックアウトを完了するために必要な購入者情報を指定します。この値を設定しない場合、onInitCheckoutコールバックの一部として、請求先住所以外のすべての購入者情報が要求されます。
  • (EU/UKのみ) バイヤーから追加情報を収集する必要がある場合は一致するscopesパラメータを指定することにより、BuyerAdditionalInfoを要求することができます。リクエストされると、買い手はチェックアウトを完了する前にデータを提供する必要があります。情報はonCompleteCheckoutコールバックの一部として共有されます（近日公開予定）。

オプションのインテグレーション手順:

  • deliverySpecifications パラメータを使用して、住所制限を指定し、購入者がAmazon Hosted Pageのお届け先からサポートされていない住所を選択できないようにします。 一般的なユースケースの処理のついては、アドレス制限のサンプルを参照してください。
  • (EU/UKのみ) presentmentCurrency パラメータを使用して、 他のサポートされている通貨を使用して購入者に請求できます。詳細については、こちら を参照してください。
  • 配送先住所の検証される場合は、onInitCheckout および onShippingAddressSelection callback をご利用ください。

ペイロード の例

{
    "storeId": "amzn1.application-oa2-client.8b5e45312b5248b69eeaStoreId",
    "scopes": ["name", "email", "phoneNumber", "billingAddress"],
    "paymentDetails": {
        "paymentIntent": "Authorize",
        "canHandlePendingAuthorization":false
    },

    "deliverySpecifications": {
        "addressRestrictions": {
            "type": "Allowed",
            "restrictions": {
                "JP": {}
            }
        }
    },
}
名前
ロケーション
説明
paymentDetails
(必須)

Type: paymentDetails
 Body
 paymentIntentや購入者への請求金額など、事業者が指定する支払い内容の情報。
storeId
(必須)

Type: string
Body
Amazon Pay Store ID。 Amazon Pay インテグレーションセントラルからこの値を取得します: US, EU, JP
scopes

Type: list <scope>
Body
リクエストする購入者の詳細情報。手順4のボタンパラメータproductTypeを使用して、配送先住所が必要かどうかを指定します。

サポートされている値:
  • 'name' - 購入者の氏名
  • 'email' - 購入者のメールアドレス
  • 'phoneNumber' - 既定の請求先住所に紐づく電話番号
  • 'billingAddress' - 既定の請求先住所
  • 'shippingAddress' - 規定の配送先住所
デフォルト値: scopesパラメータが設定されていない場合、請求先住所以外のすべての購入者情報をリクエストしたことになります
chargePermissionType

Type: string
Body
リクエストされたCharge PermissionのType

サポートされている値:
  • 'OneTime' - このCharge Permissionは単発の注文に使用できます
デフォルト値: 'OneTime'
deliverySpecifications

Type: deliverySpecifications
Body
配送先の制限を指定して、購入者がAmazonアドレス帳からサポートされていないアドレスを選択できないようにします
merchantMetadata

Type: merchantMetadata
Body
事業者が提供する注文の詳細情報

3. ボタンのレンダー

前のステップで作成した値を使用して、Amazon PayボタンをHTMLコンテナ要素にレンダリングします。ボタンはレスポンシブになり、コンテナ要素のサイズを継承します。詳細は レスポンシブボタンロジック を参照してください。

以下のコードは、ボタンをクリックするとすぐにAmazon Payのチェックアウトを開始します。チェックアウトページでレンダリングされるカートレベルの詳細をAmazon Payに受信し、通信するために、イベントハンドラを登録し、ボタンのJavaScriptコードで定義する必要があります。イベントハンドラの実装は、イベントハンドラを提供するステップで詳しく説明します。

コードサンプル

<body>
    <div id="AmazonPayButton"></div>
    <script src="https://static-na.payments-amazon.com/checkout.js"></script>
    <script type="text/javascript" charset="utf-8">
        amazon.Pay.renderJSButton('#AmazonPayButton', {
            // set checkout environment
            merchantId: 'merchant_id',
            ledgerCurrency: 'USD',
            sandbox: 'true',
            // customize the buyer experience
            checkoutLanguage: 'en_US',
            productType: 'PayAndShip',
            placement: 'Cart',
            buttonColor: 'Gold',
            estimatedOrderAmount: {"amount": "109.99", "currencyCode": "USD"},
            // provide checkout configuration generated in previous step
            checkoutSessionConfig: {
                "storeId": "store_id",
                "scopes": ["name", "email", "phoneNumber", "billingAddress"],
                "paymentDetails": {
                    "paymentIntent": "AuthorizeWithCapture",
                    "canHandlePendingAuthorization": "false"
                },
            },
            // add placeholders for event handlers for user interaction
            /** Invokes when initiated checkout and authenticated **/
            onInitCheckout: function (event) {
                // return initial cart details, total amount, tax, delivery options
            },
            /** Invokes when customer has selected different shipping address **/
            onShippingAddressSelection: function (event) {
                // return updated cart details, total amount, tax, delivery options
            },
            /** Invokes when customer clicks Pay Now **/
            onCompleteCheckout: function (event) {
                // Amazon Pay provides checkout session id, final billing address and payment descriptor.
            },
            /** Invokes when customer has selected different shipping Method **/
            onDeliveryOptionSelection: function (event) {
                // return updated cart details, total amount, tax, delivery options
            },
            /** Invokes when customer abandons the checkout **/
            onCancel: function (event) {
                // take customer back to cart page or product details page based on merchant checkout
            }
        });
    </script>
</body>

<body>
    <div id="AmazonPayButton"></div>
    <script src="https://static-eu.payments-amazon.com/checkout.js"></script>
    <script type="text/javascript" charset="utf-8">
        amazon.Pay.renderJSButton('#AmazonPayButton', {
            // set checkout environment
            merchantId: 'merchant_id',
            ledgerCurrency: 'EUR',
            sandbox: 'true',
            // customize the buyer experience
            checkoutLanguage: 'de_DE',
            productType: 'PayAndShip',
            placement: 'Cart',
            buttonColor: 'Gold',
            estimatedOrderAmount: {"amount": "109.99", "currencyCode": "EUR"},
            // provide checkout configuration generated in previous step
            checkoutSessionConfig: {
                "storeId": "store_id",
                "scopes": ["name", "email", "phoneNumber", "billingAddress"],
                "paymentDetails": {
                    "paymentIntent": "AuthorizeWithCapture",
                    "canHandlePendingAuthorization": "false"
                },
            },
            // add placeholders for event handlers for user interaction
            /** Invokes when initiated checkout and authenticated **/
            onInitCheckout: function (event) {
                // return initial cart details, total amount, tax, delivery options
            },
            /** Invokes when customer has selected different shipping address **/
            onShippingAddressSelection: function (event) {
                // return updated cart details, total amount, tax, delivery options
            },
            /** Invokes when customer clicks Pay Now **/
            onCompleteCheckout: function (event) {
                // Amazon Pay provides checkout session id, final billing address and payment descriptor.
            },
            /** Invokes when customer has selected different shipping Method **/
            onDeliveryOptionSelection: function (event) {
                // return updated cart details, total amount, tax, delivery options
            },
            /** Invokes when customer abandons the checkout **/
            onCancel: function (event) {
                // take customer back to cart page or product details page based on merchant checkout
            }
        });
    </script>
</body>

<body>
    <div id="AmazonPayButton"></div>
    <script src="https://static-eu.payments-amazon.com/checkout.js"></script>
    <script type="text/javascript" charset="utf-8">
        amazon.Pay.renderJSButton('#AmazonPayButton', {
            // set checkout environment
            merchantId: 'merchant_id',
            ledgerCurrency: 'GBP',
            sandbox: 'true',
            // customize the buyer experience
            checkoutLanguage: 'en_GB',
            productType: 'PayAndShip',
            placement: 'Cart',
            buttonColor: 'Gold',
            estimatedOrderAmount: {"amount": "109.99", "currencyCode": "GBP"},
            // provide checkout configuration generated in previous step
            checkoutSessionConfig: {
                "storeId": "store_id",
                "scopes": ["name", "email", "phoneNumber", "billingAddress"],
                "paymentDetails": {
                    "paymentIntent": "AuthorizeWithCapture",
                    "canHandlePendingAuthorization": "false"
                },
            },
            // add placeholders for event handlers for user interaction
            /** Invokes when initiated checkout and authenticated **/
            onInitCheckout: function (event) {
                // return initial cart details, total amount, tax, delivery options
            },
            /** Invokes when customer has selected different shipping address **/
            onShippingAddressSelection: function (event) {
                // return updated cart details, total amount, tax, delivery options
            },
            /** Invokes when customer clicks Pay Now **/
            onCompleteCheckout: function (event) {
                // Amazon Pay provides checkout session id, final billing address and payment descriptor.
            },
            /** Invokes when customer has selected different shipping Method **/
            onDeliveryOptionSelection: function (event) {
                // return updated cart details, total amount, tax, delivery options
            },
            /** Invokes when customer abandons the checkout **/
            onCancel: function (event) {
                // take customer back to cart page or product details page based on merchant checkout
            }
        });
    </script>
</body>

<body>
    <div id="AmazonPayButton"></div>
    <script src="https://static-fe.payments-amazon.com/checkout.js"></script>
    <script type="text/javascript" charset="utf-8">
        amazon.Pay.renderJSButton('#AmazonPayButton', {
            // set checkout environment
            merchantId: 'merchant_id',
            ledgerCurrency: 'JPY',
            sandbox: 'true',
            // customize the buyer experience
            checkoutLanguage: 'ja_JP',
            productType: 'PayAndShip',
            placement: 'Cart',
            buttonColor: 'Gold',
            // provide checkout configuration generated in previous step
            checkoutSessionConfig: {
                "storeId": "store_id",
                "scopes": ["name", "email", "phoneNumber", "billingAddress"],
                "paymentDetails": {
                    "paymentIntent": "AuthorizeWithCapture",
                    "canHandlePendingAuthorization": "false"
                },
            },
            // add placeholders for event handlers for user interaction
            /** Invokes when initiated checkout and authenticated **/
            onInitCheckout: function (event) {
                // return initial cart details, total amount, tax, delivery options
            },
            /** Invokes when customer has selected different shipping address **/
            onShippingAddressSelection: function (event) {
                // return updated cart details, total amount, tax, delivery options
            },
            /** Invokes when customer clicks Pay Now **/
            onCompleteCheckout: function (event) {
                // Amazon Pay provides checkout session id, final billing address and payment descriptor.
            },
            /** Invokes when customer has selected different shipping Method **/
            onDeliveryOptionSelection: function (event) {
                // return updated cart details, total amount, tax, delivery options
            },
            /** Invokes when customer abandons the checkout **/
            onCancel: function (event) {
                // take customer back to cart page or product details page based on merchant checkout
            }
        });
    </script>
</body>

Function parameters

パラメータ
説明
merchantId
(必須)

Type: string
Amazon Pay 事業者アカウント識別子
createCheckoutSessionConfig
(必須)

Type: buttonConfig
Checkout Session構成を作成します。productTypeをPayAndShipかPayOnlyで利用する場合、これは必須フィールドです
placement
(必須)

Type: string
ウェブサイトへのAmazon Payボタンの配置場所

サポートされている値:
  • 'Home' - 初期ページまたはメインページ
  • 'Product' - 商品詳細ページ
  • 'Cart' - 購入者が決済を開始する前のカート確認ページ
  • 'Checkout' - 購入者が決済を開始した後の任意のページ
  • 'Other' - 上記説明に当てはまらないページ
ledgerCurrency
(必須)

Type: string
指定された出品者IDの登録時に提供された通貨

サポートされている値:
  • US事業者 - 'USD'
  • EU事業者 - 'EUR'
  • UK事業者 - 'GBP'
  • JP事業者 - 'JPY'
productType

Type: string
決済用に選択されたProduct type

サポートされている値:
  • 'PayAndShip' - 購入者のお届け先と支払い方法を使用した決済を提供します。購入者のお届け先情報が必要な場合は、このproduct typeを選択してください
デフォルト値: 'PayAndShip'
buttonColor

Type: string
Amazon Payボタンの色

サポートされている値: 'Gold', 'LightGray', 'DarkGray'
デフォルト値: 'Gold'
checkoutLanguage

Type: string
Amazon Pay Hosted pageでボタンとテキストをレンダリングするために使用される言語。サポートされている言語は、Amazon Payアカウントの申し込みを行った地域によって異なることに注意してください。

サポートされている値: 
  • US事業者 - 'en_US'
  • EU/UK事業者 - 'en_GB', de_DE', 'fr_FR', 'it_IT', 'es_ES'
  • JP事業者 - 'ja_JP'
sandbox

Type: boolean
ボタンをSANDBOXに設定します

デフォルト値: false