---
title: Add the Amazon Pay Button
url: amazon-pay-checkout/v1-add-the-amazon-pay-button.html
---

**[Step 2 of 8]** The Amazon Pay checkout experience starts when your buyer clicks on the Amazon Pay button. Add the button wherever buyers start checkout, such as on your product or shopping cart page. 

* TOC
{:toc}
{::options toc_levels="3" /}

***

### 1. Create an Amazon Pay checkout session

Set up an endpoint on your server to [Create Checkout Session](../amazon-pay-api-v2/v1-checkout-session.html). Use the Checkout Session object to customize and manage your buyer experience- from the time the buyer clicks on the Amazon Pay button, until they complete checkout. Note that in a later step, you will need the [Create Checkout Session](../amazon-pay-api-v2/v1-checkout-session.html) response to start the checkout flow.

Use the `checkoutReviewReturnUrl` parameter to specify the URL which the buyer is redirected to, after they select their preferred shipping address and payment method. 

**Best practice:** 
* Set up your endpoint on the same domain as your website to avoid [Cross-Origin Resource Sharing](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) complications.
* Do not implement caching logic to re-use Checkout Session objects. Your endpoint should make a [Create Checkout Session](../amazon-pay-api-v2/v1-checkout-session.html) request each time it is invoked. 

**Optional integrations steps:**
* Use the `deliverySpecifications` parameter to specify shipping restrictions to prevent buyers from selecting unsupported addresses from their Amazon address book. See [address restriction samples](../amazon-pay-checkout/v1-address-restriction-samples.html) for samples how to handle common use-cases.
* If you registered for Amazon Pay in the EU or UK, you can use the `presentmentCurrency` parameter to charge your buyer using a different [supported currency](../amazon-pay-checkout/v1-multi-currency-integration.html#supported-currencies). See [multi-currency integration](../amazon-pay-checkout/v1-multi-currency-integration.html) for more info.

#### Request

```
curl "https://pay-api.amazon.com/:environment/:version/checkoutSessions/" \
-X POST
-H "x-amz-pay-idempotency-key: AVLo5tI10BHgEk2jEXAMPLEKEY"
-H "x-amz-pay-authorization: Px2e5oHhQZ88vVhc0DO%2FsShHj8MDDg%3DEXAMPLESIGNATURE"
-d @request_body
```

#### Request body

```
{
    "webCheckoutDetail": {
        "checkoutReviewReturnUrl": "https://a.com/merchant-review-page"
    },
    "storeId": "amzn1.application-oa2-client.8b5e45312b5248b69eeaStoreId",
    "deliverySpecifications": {
        "specialRestrictions": ["RestrictPOBoxes"],
        "addressRestrictions": {
            "type": "Allowed",
            "restrictions": {
                "US": {
                    "statesOrRegions": ["WA"],
                    "zipCodes": ["95050", "93405"]
                },
                "GB": {
                    "zipCodes": ["72046", "72047"]
                },
                "IN": {
                    "statesOrRegions": ["AP"]
                },
                "JP": {}
            }
        }
    }
}  
```

####  Request parameters

<table width="100%" border="1">
    <tbody>
        <tr id='SPI9CAupGTX'>
            <td id='s:SPI9CAupGTX;SPI9CAPMpxx' style='vertical-align: top; font-weight: bold; width: 30%' class='bold'>Name
                <br /></td>
            <td id='s:SPI9CAupGTX;SPI9CAm9zzw' style='vertical-align: top; font-weight: bold; width: 20%' class='bold'>Location
                <br /></td>
            <td id='s:SPI9CAupGTX;SPI9CAMemY9' style='vertical-align: top; font-weight:bold;  width: 50%' class='bold'>Description
                <br /></td>
        </tr>
        <tr id='SPI9CAFNMZN'>
            <td id='s:SPI9CAFNMZN;SPI9CAPMpxx' style='vertical-align: top;'>x-amz-pay-idempotency-key<br><b>(required)</b><br><br>Type: string
                <br /></td>
            <td id='s:SPI9CAFNMZN;SPI9CAm9zzw' style='vertical-align: top;'>Header
                <br /></td>
            <td id='s:SPI9CAFNMZN;SPI9CAMemY9' style='vertical-align: top;'><a href="../amazon-pay-api-v2/v1-idempotency.md">Idempotency key</a> to safely retry requests
                <br /></td>
        </tr>
        <tr id='SPI9CAI5yKv'>
            <td id='s:SPI9CAI5yKv;SPI9CAPMpxx' style='vertical-align: top;'>webCheckoutDetail<br><b>(required)</b><br /><br />Type: <a href="../amazon-pay-api-v2/v1-checkout-session.md">webCheckoutDetail</a>
                <br /></td>
            <td id='s:SPI9CAI5yKv;SPI9CAm9zzw' style='text-align: left;vertical-align: top;'>Body
                <br /></td>
            <td id='s:SPI9CAI5yKv;SPI9CAMemY9' style='vertical-align: top;'>URLs associated to the Checkout Session used to complete checkout. The URLs must use HTTPS protocol
                <br /></td>
        </tr>
        <tr id='SPI9CAQrHNB'>
            <td id='s:SPI9CAQrHNB;SPI9CAPMpxx' style='vertical-align: top;'>storeId<br><b>(required)</b><br><br>Type: string
                <br /></td>
            <td id='s:SPI9CAQrHNB;SPI9CAm9zzw' style='vertical-align: top;'>Body
                <br /></td>
            <td id='s:SPI9CAQrHNB;SPI9CAMemY9' style='vertical-align: top;'>Login with Amazon client ID. Do not use the application ID<br><br>Retrieve this value from "Login with Amazon" in <a href="https://sellercentral.amazon.com/">Seller Central</a>
                <br /></td>
        </tr>
         <tr id=''>
            <td id='' style='vertical-align: top;'>deliverySpecifications<br /><br />Type: <a href="../amazon-pay-api-v2/v1-checkout-session.md">deliverySpecifications</a>
                <br /></td>
            <td id='' style='text-align: left;vertical-align: top;'>Body
                <br /></td>
            <td id='' style='vertical-align: top;'>Specify shipping restrictions to prevent buyers from selecting unsupported addresses from their Amazon address book 
                <br /></td>
        </tr>
    </tbody>
</table>

#### Response

```
{
    "checkoutSessionId": "bd504926-f659-4ad7-a1a9-9a747aaf5275",
    "webCheckoutDetail": {
        "checkoutReviewReturnUrl": "https://a.com/merchant-review-page",
        "checkoutResultReturnUrl": null,
        "amazonPayRedirectUrl": null
    },
    "productType": "PayAndShip",
    "paymentDetail": {
        "paymentIntent": null,
        "canHandlePendingAuthorization":false,
        "chargeAmount": null,
        "softDescriptor": null,
        "presentmentCurrency": "USD"
    },
    "merchantMetadata": {
        "merchantReferenceId": null,
        "merchantStoreName": null,
        "noteToBuyer": null,
        "customInformation": null
    },
    "supplementaryData": null, // Amazon Pay system data
    "buyer": null,
    "paymentPreferences": [
        null
    ],
    "statusDetail": {
        "state": "Open",
        "reasonCode": null,
        "reasonDescription": null,
        "lastUpdatedTimestamp": "20191015T204327Z"
    },
    "shippingAddress": null,  // Null for PayOnly product type
    "platformId": null,
    "chargePermissionId": null,
    "chargeId": null,
    "constraints": [
        {
           "constraintId": "BuyerNotAssociated",
            "description": "There is no buyer associated with the Checkout Session. Return the checkout session id to the Amazon Pay Button to allow buyer to login."
        },
        {
           "constraintId": "ChargeAmountNotSet",
            "description": "chargeAmount is not set."
        },
        {
            "constraintId": "CheckoutResultReturnUrlNotSet",
            "description": "checkoutResultReturnUrl is not set."
        },
        {
            "constraintId": "PaymentIntentNotSet",
            "description": "paymentIntent is not set."
        }
    ],
    "creationTimestamp": "20191015T204313Z",
    "expirationTimestamp": "20191016T204313Z",
    "storeId": "amzn1.application-oa2-client.8b5e45312b5248b69eeaStoreId",
    "deliverySpecifications": {
        "specialRestrictions": ["RestrictPOBoxes"],
        "addressRestrictions": {
            "type": "Allowed",
            "restrictions": {
                "US": {
                    "statesOrRegions": ["WA"],
                    "zipCodes": ["95050", "93405"]
                },
                "GB": {
                    "zipCodes": ["72046", "72047"]
                },
                "IN": {
                    "statesOrRegions": ["AP"]
                },
                "JP": {}
            }
        }
    },
    "providerMetadata": {
        "providerReferenceId": null
    },
    "checkoutButtonText": null,
    "releaseEnvironment": "Sandbox"
}
```

***

### 2. Add the Amazon Pay script

Add the Amazon Pay script to your HTML file. Be sure you select the correct region.

<ul id="profileTabs" class="nav nav-tabs">
  <li class="nav-item"><a class="active nav-link noExtIcon" href="#ustab" data-toggle="tab">US</a></li>
  <li class="nav-item"><a class="nav-link noExtIcon" href="#eutab" data-toggle="tab">EU / UK</a></li>
  <li class="nav-item"><a class="nav-link noExtIcon" href="#jptab" data-toggle="tab">JP</a></li>
</ul>
<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="ustab">   
<div markdown="block">
```html
<script src="https://static-na.payments-amazon.com/checkout.js"></script>
```
</div>
  </div>
  <div role="tabpanel" class="tab-pane" id="eutab">
<div markdown="block">
```html
<script src="https://static-eu.payments-amazon.com/checkout.js"></script>
```
</div>
  </div>
  <div role="tabpanel" class="tab-pane" id="jptab">
<div markdown="block">
```html
<script src="https://static-fe.payments-amazon.com/checkout.js"></script>
```
</div>
  </div>
</div>

***

### 3. Render the button

Call [amazon.Pay.renderButton](../amazon-pay-checkout/v1-amazon-pay-script.html) to render the Amazon Pay button to an HTML container element. The button will be responsive, and inherit the size of the container element according to the following logic:

* If no height or width is specified, the button container defaults to 200px by 45px.
* If only width is specified, the button container height will be set to 45px. The provided width must be between 150px and 500px or container width will be resized to the closest supported value.
* If only height is specified, the button container width will be set to 500px. The provided height must be between 45px and 192px or container height will be resized to the closest supported value.
* If both height and width are specified, the button container will be resized to meet these conditions:
  * The container width must be between 150px and 500px. If the provided width is outside those limits, the container width will be resized to the closest supported value.
  * The container height must be between 45px and 192px. If the provided height is outside those limits, the container height will be resized to the closest supported value.
  * The container height:width ratio must be between 1:10 and 1:2.6. If the ratio is outside those limits, the container width will be set to the provided value and the container height will be adjusted to a supported ratio value.

The [Amazon Pay script](../amazon-pay-checkout/v1-amazon-pay-script.html) will make an AJAX request using the configuration provided for the `createCheckoutSession` button parameter. The response must be in JSON format. 

The only required parameter is the `url`. Specify the endpoint you set up in Step 1 as its value. You can customize the request by changing the HTTP request method. If your endpoint does not return the entire [Checkout Session](../amazon-pay-api-v2/v1-checkout-session.html) object, use  `extractAmazonCheckoutSessionId` to specify the Checkout Session ID parameter in the response.

#### Code sample

<ul id="profileTabs" class="nav nav-tabs">
  <li class="nav-item"><a class="active nav-link noExtIcon" href="#usButtonTab" data-toggle="tab">US</a></li>
  <li class="nav-item"><a class="nav-link noExtIcon" href="#euButtonTab" data-toggle="tab">EU</a></li>
  <li class="nav-item"><a class="nav-link noExtIcon" href="#ukButtonTab" data-toggle="tab">UK</a></li>
  <li class="nav-item"><a class="nav-link noExtIcon" href="#jpButtonTab" data-toggle="tab">JP</a></li>
</ul>
<div class="tab-content">


  <div role="tabpanel" class="tab-pane active" id="usButtonTab">   
<div markdown="block">
```html
<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>
```
</div>
  </div>

  <div role="tabpanel" class="tab-pane" id="euButtonTab">
<div markdown="block">
```html
<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.renderButton('#AmazonPayButton', {
            merchantId: 'merchant_id',
            createCheckoutSession: {
                url: 'https://mystore/amazonpay/createcheckoutsession'
            },
            sandbox: true, // dev environment
            ledgerCurrency: 'EUR', // Amazon Pay account ledger currency
            checkoutLanguage: 'en_GB', // render language
            productType: 'PayAndShip', // checkout type
            placement: 'Cart', // button placement
            buttonColor: 'Gold'
        });
    </script>
</body>
```
</div>
  </div>

<div role="tabpanel" class="tab-pane" id="ukButtonTab">
<div markdown="block">
```html
<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.renderButton('#AmazonPayButton', {
            merchantId: 'merchant_id',
            createCheckoutSession: {
                url: 'https://mystore/amazonpay/createcheckoutsession'
            },
            sandbox: true, // dev environment
            ledgerCurrency: 'GBP', // Amazon Pay account ledger currency
            checkoutLanguage: 'en_GB', // render language
            productType: 'PayAndShip', // checkout type
            placement: 'Cart', // button placement
            buttonColor: 'Gold'
        });
    </script>
</body>
```
</div>
  </div>  

  <div role="tabpanel" class="tab-pane" id="jpButtonTab">
<div markdown="block">
```html
<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: 'merchant_id',
            createCheckoutSession: {
                url: 'https://mystore/amazonpay/createcheckoutsession'
            },
            sandbox: true, // dev environment
            ledgerCurrency: 'JPY', // Amazon Pay account ledger currency
            checkoutLanguage: 'ja_JP', // render language
            productType: 'PayAndShip', // checkout type
            placement: 'Cart', // button placement
            buttonColor: 'Gold'
        });
    </script>
</body>
```
</div>
  </div>
</div>

#### Function parameters

<table width="100%" border="1">
    <tbody>
        <tr id='SPI9CAvz30I'>
            <td id='s:SPI9CAvz30I;SPI9CAwqfh9' style='vertical-align: top; font-weight: bold ; width: 30%' class='bold'>Parameter
                <br /></td>
            <td id='s:SPI9CAvz30I;SPI9CAy6rIp' style='vertical-align: top; font-weight: bold; width: 70%' class='bold'>Description
                <br /></td>
        </tr>
        <tr id='SPI9CAIyYS4'>
            <td id='s:SPI9CAIyYS4;SPI9CAwqfh9' style='vertical-align: top;'>merchantId<br>(<b>required</b>)<br><br>Type: string
                <br /></td>
            <td id='s:SPI9CAIyYS4;SPI9CAy6rIp' style='text-align: left;vertical-align: top;'>Amazon Pay merchant account identifier
                <br /></td>
        </tr>
        <tr id='SPI9CAw52Yq'>
            <td id='s:SPI9CAw52Yq;SPI9CAwqfh9' style='vertical-align: top;'>createCheckoutSession<br>(<b>required</b>)<br><br>Type: <a href="../amazon-pay-checkout/v1-amazon-pay-script.md#type-createcheckoutsession">createCheckoutSession</a>
                <br /></td>
            <td id='s:SPI9CAw52Yq;SPI9CAy6rIp' style='text-align: left;vertical-align: top;'>Configuration for calling your endpoint to <a href="../amazon-pay-api-v2/v1-checkout-session.md">Create Checkout Session</a>. The response must be in JSON format
                <br /></td>
        </tr>
         <tr id='SPI9CAf8yEh'>
                    <td id='s:SPI9CAf8yEh;SPI9CAwqfh9' style='text-align: left;vertical-align: top;'>placement<br>(<b>required</b>)<br><br>Type: string
                        <br /></td>
                    <td id='s:SPI9CAf8yEh;SPI9CAy6rIp' style='text-align: left;vertical-align: top;'>Placement of the Amazon Pay button on your website<br><br>Supported values:
                    <ul>
                      <li>'Home' - Initial or main page</li>
                      <li>'Product' - Product details page</li>
                      <li>'Cart' - Cart review page before buyer starts checkout</li>
                      <li>'Checkout' - Any page after buyer starts checkout</li>
                      <li>'Other' - Any page that doesn't fit the previous descriptions</li>
                    </ul>
                  </td>
                </tr>
        <tr id='IXV9CAD2lCG'>
            <td id='s:IXV9CAD2lCG;IXV9CAYD3dl' style='text-align: left;vertical-align: top;'>ledgerCurrency<br>(<b>required</b>)<br><br>Type: string
                <br /></td>
            <td id='s:IXV9CAD2lCG;IXV9CAsibgY' style='text-align: left;vertical-align: top;'>Ledger currency provided during registration for the given merchant identifier<br><br>Supported values: 
            <ul>
                <li>US merchants - 'USD'</li>
                <li>EU merchants - 'EUR'</li>
                <li>UK merchants - 'GBP'</li>
                <li>JP merchants - 'JPY'</li>
              </ul>
            </td>
        </tr>
        <tr id='SPI9CAcT2N8'>
            <td id='s:SPI9CAcT2N8;SPI9CAwqfh9' style='vertical-align: top;'>productType<br><br>Type: string
                <br /></td>
            <td id='s:SPI9CAcT2N8;SPI9CAy6rIp' style='text-align: left;vertical-align: top;'>Product type selected for checkout<br><br>Supported values:<br>
                    <ul>
                      <li>'PayAndShip' - Offer checkout using buyer's Amazon wallet and  address book. Select this product type if you need the buyer's shipping details</li>
                      <li>'PayOnly' - Offer checkout using only the buyer's Amazon wallet. Select this product type if you do not need the buyer's shipping details</li>
                    </ul>
              Default value: 'PayAndShip'
                <br /></td>
        </tr>
        <tr id=''>
            <td id='' style='vertical-align: top;'>buttonColor<br><br>Type: string
                <br /></td>
            <td id='' style='text-align: left;vertical-align: top;'>Color of the Amazon Pay button<br><br>Supported values: 'Gold', 'LightGray', 'DarkGray'<br>
              Default value: 'Gold'
                <br /></td>
        </tr>
        <tr id='SPI9CAUKjWp'>
            <td id='s:SPI9CAUKjWp;SPI9CAwqfh9' style='vertical-align: top;'>checkoutLanguage<br><br>Type: string
                <br /></td>
            <td id='s:SPI9CAUKjWp;SPI9CAy6rIp' style='text-align: left;vertical-align: top;'>Language used to render the button and text on Amazon Pay hosted pages. Please note that supported language(s) is dependent on the region that your Amazon Pay account was registered for<br><br>Supported values: 
              <ul>
                <li>US merchants - 'en_US'</li>
                <li>EU/UK merchants - 'en_GB', 'de_DE', 'fr_FR', 'it_IT', 'es_ES'</li>
                <li>JP merchants - 'ja_JP'</li>
              </ul>
            </td>
        </tr>
        <tr id='SPI9CAvGRow'>
            <td id='s:SPI9CAvGRow;SPI9CAwqfh9' style='vertical-align: top;'>sandbox<br><br>Type: boolean
                <br /></td>
            <td id='s:SPI9CAvGRow;SPI9CAy6rIp' style='text-align: left;vertical-align: top;'>Sets button to Sandbox environment<br><br>Default value: false
                <br /></td>
        </tr>
    </tbody>
</table>