メインコンテンツまでスキップ

手順3 - Amazon Payボタンを表示するサイトにjavascriptを設置します

Amazon Payボタンをサイトに表示する際に、以下のjavascriptを設置します

<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.renderButton('#AmazonPayButton', //ここに手順２で準備した "中身のイメージ" をいれます);
    </script>
</body>

こうすることで、貴社のサイトにAmazon Payボタンが表示されます。

完成イメージ は以下のとおりです。

caution

なお、可読性のため改行していますが、payloadJSONは一行で記載ください

<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.renderButton('#AmazonPayButton',{
      "merchantId": "xxxxxx",
      "ledgerCurrency": "JPY",
      "sandbox": true,
      "checkoutLanguage": "ja_JP",
      "productType": "PayAndShip",
      "placement": "Cart",
      "buttonColor": "Gold",
      "createCheckoutSessionConfig": {
        "payloadJSON": '{
          "webCheckoutDetails": {
            "checkoutReviewReturnUrl": "http://localhost:3000/review/",
            "checkoutCancelUrl": "http://localhost:3000/cancel/"
          },
          "storeId": "amzn1.application-oa2-client.ccxxxxxx",
          "chargePermissionType": "OneTime",
          "deliverySpecifications": {
            "addressRestrictions": {
              "type": "Allowed",
              "restrictions": {
                "JP": {
                  "statesOrRegions": ["東京都"],
                  "zipCodes": ["1530064"]
                }
              }
            }
          },
          "paymentDetails": {
            "allowOvercharge": false,
            "extendExpiration": false
          },
          "scopes": ["name","email","phoneNumber","billingAddress"]
        }',
        "signature": "xxxxxxx",
        "publicKeyId": "SANDBOX-xxxxxx",
        "algorithm": "AMZN-PAY-RSASSA-PSS-V2"
      }
    });
  </script>
</body>
tip

上記例の場合、 <div id="AmazonPayButton"></div> の中にAmazon Payボタンが表示されます。表示するボタンサイズには制限がありますので、以下のFAQをご確認の上制限範囲内のサイズで表示するようご注意ください。
FAQ - Amazon Payのボタンの設定方法を知りたいです



同ページ内に２つ以上Amazon Payボタンを表示する場合は、divのidをそれぞれ別のものにし、amazon.Pay.renderButton('#AmazonPayButton' の '#AmazonPayButton' の部分をそれぞれのdiv idとしてください。

例）

<body>
    <div id="AmazonPayButton1"></div>
    <div id="AmazonPayButton2"></div>
    <script src="https://static-fe.payments-amazon.com/checkout.js"></script>
    <script type="text/javascript" charset="utf-8">
       amazon.Pay.renderButton('#AmazonPayButton1', ここに手順２で準備した "中身のイメージ をいれます);
       amazon.Pay.renderButton('#AmazonPayButton2', ここに手順２で準備した "中身のイメージ"（一つ目のAmazon Payボタンと同じものでも別のものでもOK）をいれます);
    </script>
</body>