Skip to main content

Step3 Add javascript to render Amazon Pay button on your site

Finally add javascript to render Amazon Pay button on your site like below.

<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', 
            //put fundamental parts that you created in Step2 here
        );
    </script>
</body>

Javascript sample (including fundamental parts in javascript) as below.

caution

Note that payloadJSON should be written in one line, but below sample is broken in line for readbility

<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"
      }
    });
  </script>
</body>
caution

Make sure to show button in appropriate size. See FAQ - I want to know how to configure Amazon Pay button



If you want to show more than two Amazon Pay button on the page, use different ID for each button element.

Example:

<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', //put fundamental parts that you created in Step2 here);
       amazon.Pay.renderButton('#AmazonPayButton2', //put fundamental parts that you created in Step2 here);
    </script>
</body>