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

手順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": {
            "checkoutResultReturnUrl": "http://localhost:3000/result_apb/",
            "checkoutCancelUrl": "http://localhost:3000/cancel/",
            "checkoutMode": "ProcessOrder"
          },
          "storeId": "amzn1.application-oa2-client.ccxxxxxx",
          "chargePermissionType": "OneTime",
          "merchantMetadata": {
            "merchantReferenceId": "",
            "merchantStoreName": "",
            "noteToBuyer": "",
            "customInformation": ""
          },
          "deliverySpecifications": {
            "addressRestrictions": {
              "type": "Allowed",
              "restrictions": {
                "JP": {
                  "statesOrRegions": ["東京都"],
                  "zipCodes": ["1530064"]
                }
              }
            }
          },
          "paymentDetails": {
            "paymentIntent": "Authorize",
            "canHandlePendingAuthorization": false,
            "chargeAmount": {
              "amount": "700",
              "currencyCode": "JPY"
            },
            "allowOvercharge": false,
            "extendExpiration": false
          },
          "scopes": ["name","email","phoneNumber","billingAddress"],
          "addressDetails": {
            "name": "テスト太郎",
            "addressLine1": "目黒区下目黒1-8-1",
            "stateOrRegion": "東京都",
            "postalCode": "123-4567",
            "countryCode": "JP",
            "phoneNumber": "09012345678"
          }
        },
        "signature": "xxxxxx",
        "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>