Amazon Payスクリプト


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>

Amazon Payボタンをレンダリングする

amazon.Pay.renderButton()を使用して、 Amazon Payの決済ボタンとサインインボタンをHTMLコンテナ要素にレンダリングします。

Amazon Pay決済のコードサンプル

Amazonサインインのコードサンプル

パラメータ

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

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

Type: buttonConfig
Create Checkout Session構成を作成します。productTypeにPayAndShipかPayOnlyを使用する場合は、必須です。
signInConfig
(必須)

Type: buttonConfig
Amazon Sign-in構成を作成します。productTypeにSignInを使用する場合は、必須です。
placement
(必須)

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

サポートされている値: ‘Home’, ‘Product’, ‘Cart’, ‘Checkout’, and 'Other'
ledgerCurrency
(必須)

Type: string
特定の事業者IDの登録時に提供される通貨

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

Type: string
決済用に選択された製品の種類

サポートされている値:
  • 'PayAndShip' - 購入者のAmazon支払い方法と配送先を使用して決済を提供します。購入者の配送の詳細が必要な場合は、このproduct typeを選択してください。
  • 'PayOnly' - 購入者のAmazon支払い方法のみを使用して決済を提供します。購入者の配送の詳細が必要ない場合は、このproduct typeを選択してください。
  • 'SignIn' - Amazon Sign-inを提供します。購入者がAmazonPayの決済を開始する前に購入購入者の詳細が必要な場合は、このproduct typeを選択してください。詳細については、Amazon Sign-inを参照してください。
デフォルト値: 'PayAndShip'
buttonColor

Type: string
Amazon Payボタンの色

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

Type: string
Amazon Payがホストするページでボタンとテキストをレンダリングするために使用される言語。サポートされている言語は、AmazonPayアカウントが登録されているリージョンによって異なることに注意してください

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

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

デフォルト値: false

Type: buttonConfig

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

Type: string
createCheckoutSessionConfigの場合、この値を使用してCheckoutSessionオブジェクトを作成します。これは、Create Checkout Sessionのリクエストbodyと同じです。

signInConfigの場合、Amazon Payはこの値を使用して、共有する購入者の詳細と、サインイン後に購入者をリダイレクトする場所を決定します。
signature
(必須)

Type: string
要求者のIDを確認し、転送中にデータを保護するために使用される文字列
publicKeyId
(必須)

Type: string
Amazon Payによって提供されるクレデンシャル。詳細については、Public Key IDを取得するを参照してください。

デカップリングボタンのレンダリングと、決済またはサインインの開始

Amazon Payのボタンクリックイベントを制御する必要がある場合は、ボタンのレンダリングアクションと決済またはサインインの開始を切り離すことができます。amazon.Pay.renderButton()をボタンのレンダリングに、amazonPayButton.initCheckout()をAmazon Pay決済の開始に使用してください。

AmazonPay決済のコードサンプル

Amazonサインインのコードサンプル


CheckoutSessionオブジェクトを使用したレンダリングボタン

Note: Amazon Payボタンをレンダリングするの指示に従う必要があります。 Amazon Payは、バックエンドで生成したCheckoutSessionオブジェクトを使用したボタンのレンダリングを引き続きサポートしますが、AdditionalPaymentButton(今すぐ支払う)などの新機能は利用できません。

Amazon PayがCheckoutSessionオブジェクトの作成に使用するpayloadを生成する代わりに、Create Checkout Sessionを呼び出すエンドポイントをサーバーに設定することもできます。ボタンのレンダリングコードでそのエンドポイントを設定すると、Amazon Payスクリプトは、ボタンがクリックされるたびにそのURLにリクエストをPOSTします。

エンドポイントのレスポンスはJSON形式である必要があります。 Create Checkout Sessionレスポンス全体を返すか、 checkoutSessionIdキーを含むレスポンスを返すことができます。例:{"checkoutSessionId": "116e5701-a0bf-49f2-a63d-000000000000"}。

コードサンプル

<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.renderButton('#AmazonPayButton', {
            merchantId: 'merchant_id',
            createCheckoutSession: {
                url: 'https://mystore/amazonpay/createcheckoutsession'
            },
            sandbox: true, // dev environment
            ledgerCurrency: 'USD', // Amazon Pay account ledger currency
            checkoutLanguage: 'en_US', // render language
            productType: 'PayAndShip', // checkout type
            placement: 'Cart', // button placement
            buttonColor: 'Gold'
        });
    </script>
</body>

レスポンシブボタンロジック

Amazon Payボタンはレスポンシブで、次のロジックに従ってコンテナ要素のサイズを継承します。

  • heightまたはwidthが指定されていない場合、ボタンコンテナはデフォルトで450px x45pxになります。
  • widthのみを指定した場合、ボタンコンテナのheightは45pxに設定されます。指定されたwidthは150pxから500pxの間である必要があります。そうでない場合、コンテナのwidthはサポートされている最も近い値に変更されます。
  • heightのみを指定した場合、ボタンコンテナのwidthは500pxに設定されます。指定されたheightは45pxから192pxの間である必要があります。そうでない場合、コンテナのheightはサポートされている最も近い値に変更されます。
  • heightとwidthの両方が指定されている場合、ボタンコンテナは次の条件を満たすようにサイズ変更されます。
    • コンテナのwidthは150pxから500pxの間でなければなりません。指定されたwidthがこれらの制限を超えている場合、コンテナのwidthはサポートされている最も近い値に変更されます。
    • コンテナのheightは45pxから192pxの間でなければなりません。指定されたheightがこれらの制限を超えている場合、コンテナのheightはサポートされている最も近い値に変更されます。
    • コンテナのheight:widthの比率は1:10から1:2.6の間でなければなりません。比率がこれらの制限を超えている場合、コンテナーのwidthは指定されたvalueに設定され、コンテナーのheightはサポートされている比率の値に調整されます。

決済情報の更新を有効にする

購入者が別の配送先住所または支払い方法を選択したい場合に備えて、 amazon.Pay.bindChangeAction()を使用して更新を有効にします。

コードサンプル

<script type="text/javascript" charset="utf-8">
    amazon.Pay.bindChangeAction('#changeButton1', {
      amazonCheckoutSessionId: 'xxxx',
      changeAction: 'changeAddress'
    });
</script>

パラメータ

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

Type: string
Amazon Pay Checkout Session識別子
changeAction
(必須)

Type: string
購入者の更新要求

サポートされている値: 'changeAddress', 'changePayment'

サインアウト

amazon.Pay.signout()を使用して、Amazonアカウントからサインアウトするオプションを購入者に提供します。

ベストプラクティス: 購入者が決済を完了した後にサインアウトするオプションを提供します。注文確認ページの「Amazonからサインアウト」リンクに関数をバインドします。

コードサンプル

<script type="text/javascript">
  document.getElementById('Signout').onclick = function() {
    amazon.Pay.signout();
  };
</script>