---
title: Amazon Pay script
url: amazon-pay-checkout/amazon-pay-script.html
---

<script>
  function keySpecifics(){
    const keyQuery = "?environmentSpecificKeys=";
    const currentSetting = window.location.search?.split("?environmentSpecificKeys=")[1] ?? 'false';
    const newSetting = currentSetting === 'false' ? 'true' : 'false';
    window.location = window.location.origin + window.location.pathname + keyQuery + newSetting // +  window.location.hash (not included as it feels weird to jump down)
  }
</script>
<div style="display:none" class="environmentSpecificKeys">
  <div markdown="span" class="alert alert-info" role="alert"><i class="fa fa-info-circle"></i> <b>Note:</b> If your publicKeyId <b>_does not_</b> have an environment prefix (does not begin with 'SANDBOX' or 'LIVE') follow <a href='#' onclick='keySpecifics()' rel='noopener noreferrer'>these instructions</a> instead.</div>
</div>
<div style="display:none" class="notEnvironmentSpecificKeys">
  <div markdown="span" class="alert alert-info" role="alert"><i class="fa fa-info-circle"></i> <b>Note:</b> If your publicKeyId has an environment prefix (for example: SANDBOX-AFVX7ULWSGBZ5535PCUQOY7B) follow <a href='#' onclick='keySpecifics()' rel='noopener noreferrer'>these instructions</a> instead.</div>
</div>


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

***

### Amazon Pay script

Add the Amazon Pay script to your HTML file to enable front-end functionality on your website. 

<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>

***

### Render the Amazon Pay button

Use amazon.Pay.renderButton() to render the Amazon Pay Checkout and Sign In buttons to a HTML container element.

#### Code sample for Amazon Pay Checkout

<div style="display:none" class="environmentSpecificKeys">
<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">
        const amazonPayButton = amazon.Pay.renderButton('#AmazonPayButton', {
            // set checkout environment
            merchantId: 'merchant_id',
            publicKeyId: 'SANDBOX-xxxxxxxxxx',
            ledgerCurrency: 'USD',              
            // customize the buyer experience
            checkoutLanguage: 'en_US',
            productType: 'PayAndShip',
            placement: 'Cart',
            buttonColor: 'Gold',
            estimatedOrderAmount: { "amount": "109.99", "currencyCode": "USD"},
            // configure Create Checkout Session request
            createCheckoutSessionConfig: {                     
                payloadJSON: 'payload', // payload generated in step 2
                signature: 'xxxx', // signature generatd in step 3
                algorithm: 'AMZN-PAY-RSASSA-PSS-V2'
            }   
        });
    </script>
</body>
```
<a href="../amazon-pay-checkout/add-the-amazon-pay-button.md" target="_blank" rel="noopener noreferrer">Documentation</a>
</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">
        const amazonPayButton = amazon.Pay.renderButton('#AmazonPayButton', {
            // set checkout environment
            merchantId: 'merchant_id',
            publicKeyId: 'SANDBOX-xxxxxxxxxx',
            ledgerCurrency: 'EUR',             
            // customize the buyer experience
            checkoutLanguage: 'en_GB',
            productType: 'PayAndShip',
            placement: 'Cart',
            buttonColor: 'Gold',
            estimatedOrderAmount: { "amount": "109.99", "currencyCode": "EUR"},
            // configure Create Checkout Session request
            createCheckoutSessionConfig: {                     
                payloadJSON: 'payload', // payload generated in step 2
                signature: 'xxxx', // signature generatd in step 3
                algorithm: 'AMZN-PAY-RSASSA-PSS-V2'
            }   
        });
    </script>
</body>
```
<a href="../amazon-pay-checkout/add-the-amazon-pay-button.md" target="_blank" rel="noopener noreferrer">Documentation</a>
</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">
        const amazonPayButton = amazon.Pay.renderButton('#AmazonPayButton', {
            // set checkout environment
            merchantId: 'merchant_id',
            publicKeyId: 'SANDBOX-xxxxxxxxxx',
            ledgerCurrency: 'GBP',            
            // customize the buyer experience
            checkoutLanguage: 'en_GB',
            productType: 'PayAndShip',
            placement: 'Cart',
            buttonColor: 'Gold',
            estimatedOrderAmount: { "amount": "109.99", "currencyCode": "GBP"},
            // configure Create Checkout Session request
            createCheckoutSessionConfig: {                     
                payloadJSON: 'payload', // payload generated in step 2
                signature: 'xxxx', // signature generatd in step 3
                algorithm: 'AMZN-PAY-RSASSA-PSS-V2'
            }   
        });
    </script>
</body>
```
<a href="../amazon-pay-checkout/add-the-amazon-pay-button.md" target="_blank" rel="noopener noreferrer">Documentation</a>
</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', {
            // set checkout environment
            merchantId: 'merchant_id',
            publicKeyId: 'SANDBOX-xxxxxxxxxx',
            ledgerCurrency: 'JPY',         
            // customize the buyer experience
            checkoutLanguage: 'ja_JP',
            productType: 'PayAndShip',
            placement: 'Cart',
            buttonColor: 'Gold',
            // configure Create Checkout Session request
            createCheckoutSessionConfig: {                     
                payloadJSON: 'payload', // payload generated in step 2
                signature: 'xxxx', // signature generatd in step 3
                algorithm: 'AMZN-PAY-RSASSA-PSS-V2'
            }   
        });
    </script>
</body>
```
<a href="../amazon-pay-checkout/add-the-amazon-pay-button.md" target="_blank" rel="noopener noreferrer">Documentation</a>
</div>
  </div>
</div>
</div>
<div style="display:none" class="notEnvironmentSpecificKeys">
<ul id="profileTabs" class="nav nav-tabs">
  <li class="nav-item"><a class="active nav-link noExtIcon" href="#usButtonTabNESK" data-toggle="tab">US</a></li>
  <li class="nav-item"><a class="nav-link noExtIcon" href="#euButtonTabNESK" data-toggle="tab">EU</a></li>
  <li class="nav-item"><a class="nav-link noExtIcon" href="#ukButtonTabNESK" data-toggle="tab">UK</a></li>
  <li class="nav-item"><a class="nav-link noExtIcon" href="#jpButtonTabNESK" data-toggle="tab">JP</a></li>
</ul>
<div class="tab-content">


  <div role="tabpanel" class="tab-pane active" id="usButtonTabNESK">   
<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">
        const amazonPayButton = amazon.Pay.renderButton('#AmazonPayButton', {
            // set checkout environment
            merchantId: 'merchant_id',
            ledgerCurrency: 'USD',
            sandbox: true,               
            // customize the buyer experience
            checkoutLanguage: 'en_US',
            productType: 'PayAndShip',
            placement: 'Cart',
            buttonColor: 'Gold',
            estimatedOrderAmount: { "amount": "109.99", "currencyCode": "USD"},
            // configure Create Checkout Session request
            createCheckoutSessionConfig: {                     
                payloadJSON: 'payload', // payload generated in step 2
                signature: 'xxxx', // signature generatd in step 3
                algorithm: 'AMZN-PAY-RSASSA-PSS-V2',
                publicKeyId: 'xxxxxxxxxx' 
            }   
        });
    </script>
</body>
```
<a href="../amazon-pay-checkout/add-the-amazon-pay-button.md" target="_blank" rel="noopener noreferrer">Documentation</a>
</div>
  </div>

  <div role="tabpanel" class="tab-pane" id="euButtonTabNESK">
<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">
        const amazonPayButton = amazon.Pay.renderButton('#AmazonPayButton', {
            // set checkout environment
            merchantId: 'merchant_id',
            ledgerCurrency: 'EUR',
            sandbox: true,               
            // customize the buyer experience
            checkoutLanguage: 'en_GB',
            productType: 'PayAndShip',
            placement: 'Cart',
            buttonColor: 'Gold',
            estimatedOrderAmount: { "amount": "109.99", "currencyCode": "EUR"},
            // configure Create Checkout Session request
            createCheckoutSessionConfig: {                     
                payloadJSON: 'payload', // payload generated in step 2
                signature: 'xxxx', // signature generatd in step 3
                algorithm: 'AMZN-PAY-RSASSA-PSS-V2',
                publicKeyId: 'xxxxxxxxxx' 
            }   
        });
    </script>
</body>
```
<a href="../amazon-pay-checkout/add-the-amazon-pay-button.md" target="_blank" rel="noopener noreferrer">Documentation</a>
</div>
  </div>

<div role="tabpanel" class="tab-pane" id="ukButtonTabNESK">
<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">
        const amazonPayButton = amazon.Pay.renderButton('#AmazonPayButton', {
            // set checkout environment
            merchantId: 'merchant_id',
            ledgerCurrency: 'GBP',
            sandbox: true,               
            // customize the buyer experience
            checkoutLanguage: 'en_GB',
            productType: 'PayAndShip',
            placement: 'Cart',
            buttonColor: 'Gold',
            estimatedOrderAmount: { "amount": "109.99", "currencyCode": "GBP"},
            // configure Create Checkout Session request
            createCheckoutSessionConfig: {                     
                payloadJSON: 'payload', // payload generated in step 2
                signature: 'xxxx', // signature generatd in step 3
                algorithm: 'AMZN-PAY-RSASSA-PSS-V2',
                publicKeyId: 'xxxxxxxxxx' 
            }   
        });
    </script>
</body>
```
<a href="../amazon-pay-checkout/add-the-amazon-pay-button.md" target="_blank" rel="noopener noreferrer">Documentation</a>
</div>
  </div>  

  <div role="tabpanel" class="tab-pane" id="jpButtonTabNESK">
<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', {
            // set checkout environment
            merchantId: 'merchant_id',
            ledgerCurrency: 'JPY',
            sandbox: true,               
            // customize the buyer experience
            checkoutLanguage: 'ja_JP',
            productType: 'PayAndShip',
            placement: 'Cart',
            buttonColor: 'Gold',
            // configure Create Checkout Session request
            createCheckoutSessionConfig: {                     
                payloadJSON: 'payload', // payload generated in step 2
                signature: 'xxxx', // signature generatd in step 3
                algorithm: 'AMZN-PAY-RSASSA-PSS-V2',
                publicKeyId: 'xxxxxxxxxx' 
            }   
        });
    </script>
</body>
```
<a href="../amazon-pay-checkout/add-the-amazon-pay-button.md" target="_blank" rel="noopener noreferrer">Documentation</a>
</div>
  </div>
</div>
</div>

#### Code sample for Amazon Sign-in

<div style="display:none" class="environmentSpecificKeys">
<ul id="profileTabs" class="nav nav-tabs">
  <li class="nav-item"><a class="active nav-link noExtIcon" href="#usButtonTabSignIn" data-toggle="tab">US</a></li>
  <li class="nav-item"><a class="nav-link noExtIcon" href="#euButtonTabSignIn" data-toggle="tab">EU</a></li>
  <li class="nav-item"><a class="nav-link noExtIcon" href="#ukButtonTabSignIn" data-toggle="tab">UK</a></li>
  <li class="nav-item"><a class="nav-link noExtIcon" href="#jpButtonTabSignIn" data-toggle="tab">JP</a></li>
</ul>
<div class="tab-content">


  <div role="tabpanel" class="tab-pane active" id="usButtonTabSignIn">   
<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', {
            // set checkout environment
            merchantId: 'merchant_id',
            publicKeyId: 'SANDBOX-xxxxxxxxxx',
            ledgerCurrency: 'USD',          
            // customize the buyer experience
            checkoutLanguage: 'en_US',
            productType: 'SignIn',
            placement: 'Cart',
            buttonColor: 'Gold',
            // configure sign in
            signInConfig: {                     
                payloadJSON: 'payload', // payload generated in step 2
                signature: 'xxxx', // signature generatd in step 3
                algorithm: 'AMZN-PAY-RSASSA-PSS-V2'
            }  
        });
    </script>
</body>
```
<a href="../amazon-pay-checkout/amazon-sign-in.md" target="_blank" rel="noopener noreferrer">Documentation</a>
</div>
  </div>

  <div role="tabpanel" class="tab-pane" id="euButtonTabSignIn">
<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', {
            // set checkout environment
            merchantId: 'merchant_id',
            publicKeyId: 'SANDBOX-xxxxxxxxxx',
            ledgerCurrency: 'EUR',             
            // customize the buyer experience
            checkoutLanguage: 'en_GB',
            productType: 'SignIn',
            placement: 'Cart',
            buttonColor: 'Gold',
            // configure sign in
            signInConfig: {                     
                payloadJSON: 'payload', // payload generated in step 2
                signature: 'xxxx', // signature generatd in step 3
                algorithm: 'AMZN-PAY-RSASSA-PSS-V2'
            }   
        });
    </script>
</body>
```
<a href="../amazon-pay-checkout/amazon-sign-in.md" target="_blank" rel="noopener noreferrer">Documentation</a>
</div>
  </div>

<div role="tabpanel" class="tab-pane" id="ukButtonTabSignIn">
<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', {
            // set checkout environment
            merchantId: 'merchant_id',
            publicKeyId: 'SANDBOX-xxxxxxxxxx',
            ledgerCurrency: 'GBP',           
            // customize the buyer experience
            checkoutLanguage: 'en_GB',
            productType: 'SignIn',
            placement: 'Cart',
            buttonColor: 'Gold',
            // configure sign in
            signInConfig: {                     
                payloadJSON: 'payload', // payload generated in step 2
                signature: 'xxxx', // signature generatd in step 3
                algorithm: 'AMZN-PAY-RSASSA-PSS-V2'
            }  
        });
    </script>
</body>
```
<a href="../amazon-pay-checkout/amazon-sign-in.md" target="_blank" rel="noopener noreferrer">Documentation</a>
</div>
  </div>  

  <div role="tabpanel" class="tab-pane" id="jpButtonTabSignIn">
<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', {
            // set checkout environment
            merchantId: 'merchant_id',
            publicKeyId: 'SANDBOX-xxxxxxxxxx',
            ledgerCurrency: 'JPY',          
            // customize the buyer experience
            checkoutLanguage: 'ja_JP',
            productType: 'SignIn',
            placement: 'Cart',
            buttonColor: 'Gold',
            // configure sign in
            signInConfig: {                     
                payloadJSON: 'payload', // payload generated in step 2
                signature: 'xxxx', // signature generatd in step 3
                algorithm: 'AMZN-PAY-RSASSA-PSS-V2'
            } 
        });
    </script>
</body>
```
<a href="../amazon-pay-checkout/amazon-sign-in.md" target="_blank" rel="noopener noreferrer">Documentation</a>
</div>
  </div>
</div>
</div>
<div style="display:none" class="notEnvironmentSpecificKeys">
<ul id="profileTabs" class="nav nav-tabs">
  <li class="nav-item"><a class="active nav-link noExtIcon" href="#usButtonTabSignInNESK" data-toggle="tab">US</a></li>
  <li class="nav-item"><a class="nav-link noExtIcon" href="#euButtonTabSignInNESK" data-toggle="tab">EU</a></li>
  <li class="nav-item"><a class="nav-link noExtIcon" href="#ukButtonTabSignInNESK" data-toggle="tab">UK</a></li>
  <li class="nav-item"><a class="nav-link noExtIcon" href="#jpButtonTabSignInNESK" data-toggle="tab">JP</a></li>
</ul>
<div class="tab-content">


  <div role="tabpanel" class="tab-pane active" id="usButtonTabSignInNESK">   
<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', {
            // set checkout environment
            merchantId: 'merchant_id',
            ledgerCurrency: 'USD',
            sandbox: true,               
            // customize the buyer experience
            checkoutLanguage: 'en_US',
            productType: 'SignIn',
            placement: 'Cart',
            buttonColor: 'Gold',
            // configure sign in
            signInConfig: {                     
                payloadJSON: 'payload', // payload generated in step 2
                signature: 'xxxx', // signature generatd in step 3
                algorithm: 'AMZN-PAY-RSASSA-PSS-V2',
                publicKeyId: 'xxxxxxxxxx' 
            }  
        });
    </script>
</body>
```
<a href="../amazon-pay-checkout/amazon-sign-in.md" target="_blank" rel="noopener noreferrer">Documentation</a>
</div>
  </div>

  <div role="tabpanel" class="tab-pane" id="euButtonTabSignInNESK">
<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', {
            // set checkout environment
            merchantId: 'merchant_id',
            ledgerCurrency: 'EUR',
            sandbox: true,               
            // customize the buyer experience
            checkoutLanguage: 'en_GB',
            productType: 'SignIn',
            placement: 'Cart',
            buttonColor: 'Gold',
            // configure sign in
            signInConfig: {                     
                payloadJSON: 'payload', // payload generated in step 2
                signature: 'xxxx', // signature generatd in step 3
                algorithm: 'AMZN-PAY-RSASSA-PSS-V2',
                publicKeyId: 'xxxxxxxxxx' 
            }   
        });
    </script>
</body>
```
<a href="../amazon-pay-checkout/amazon-sign-in.md" target="_blank" rel="noopener noreferrer">Documentation</a>
</div>
  </div>

<div role="tabpanel" class="tab-pane" id="ukButtonTabSignInNESK">
<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', {
            // set checkout environment
            merchantId: 'merchant_id',
            ledgerCurrency: 'GBP',
            sandbox: true,               
            // customize the buyer experience
            checkoutLanguage: 'en_GB',
            productType: 'SignIn',
            placement: 'Cart',
            buttonColor: 'Gold',
            // configure sign in
            signInConfig: {                     
                payloadJSON: 'payload', // payload generated in step 2
                signature: 'xxxx', // signature generatd in step 3
                algorithm: 'AMZN-PAY-RSASSA-PSS-V2',
                publicKeyId: 'xxxxxxxxxx' 
            }  
        });
    </script>
</body>
```
<a href="../amazon-pay-checkout/amazon-sign-in.md" target="_blank" rel="noopener noreferrer">Documentation</a>
</div>
  </div>  

  <div role="tabpanel" class="tab-pane" id="jpButtonTabSignInNESK">
<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', {
            // set checkout environment
            merchantId: 'merchant_id',
            ledgerCurrency: 'JPY',
            sandbox: true,               
            // customize the buyer experience
            checkoutLanguage: 'ja_JP',
            productType: 'SignIn',
            placement: 'Cart',
            buttonColor: 'Gold',
            // configure sign in
            signInConfig: {                     
                payloadJSON: 'payload', // payload generated in step 2
                signature: 'xxxx', // signature generatd in step 3
                algorithm: 'AMZN-PAY-RSASSA-PSS-V2',
                publicKeyId: 'xxxxxxxxxx' 
            } 
        });
    </script>
</body>
```
<a href="../amazon-pay-checkout/amazon-sign-in.md" target="_blank" rel="noopener noreferrer">Documentation</a>
</div>
  </div>
</div>
</div>

#### Parameters

<table width="100%" border="1">
    <tbody>
        <tr id='IXV9CA8wPdP'>
            <td id='s:IXV9CA8wPdP;IXV9CAYD3dl' style='vertical-align: top; font-weight: bold; width: 30%;' class='bold'><b>Parameter</b>
                <br /></td>
            <td id='s:IXV9CA8wPdP;IXV9CAsibgY' style='vertical-align: top; font-weight: bold; width: 70%;' class='bold'><b>Description</b>
                <br /></td>
        </tr>
        <tr id='IXV9CAG9zH5'>
            <td id='s:IXV9CAG9zH5;IXV9CAYD3dl' style='vertical-align: top;'>merchantId<br>(<b>required</b>)<br><br>Type: string
                <br /></td>
            <td id='s:IXV9CAG9zH5;IXV9CAsibgY' style='text-align: left;vertical-align: top;'>Amazon Pay merchant account identifier
                <br /></td>
        </tr>
        <tr id=''>
            <td id='' style='vertical-align: top;'>createCheckoutSessionConfig<br>(<b>required</b>)<br><br>Type: <a href="../amazon-pay-checkout/amazon-pay-script.md#type-buttonconfig">buttonConfig</a>
                <br /></td>
            <td id='' style='text-align: left;vertical-align: top;'>Create Checkout Session configuration. This is a required field if you use PayAndShip or PayOnly <code>productType</code>
                <br /></td>
        </tr>
        <tr id=''>
            <td id='' style='vertical-align: top;'>signInConfig<br>(<b>required</b>)<br><br>Type: <a href="../amazon-pay-checkout/amazon-pay-script.md#type-buttonconfig">buttonConfig</a>
                <br /></td>
            <td id='' style='text-align: left;vertical-align: top;'>Amazon Sign-in configuration. This is a required field if you use SignIn <code>productType</code>
                <br /></td>
        </tr>

        <tr id='IXV9CAuxZkz'>
            <td id='s:IXV9CAuxZkz;IXV9CAYD3dl' style='text-align: left;vertical-align: top;'>placement<br>(<b>required</b>)<br><br>Type: string
                <br /></td>
            <td id='s:IXV9CAuxZkz;IXV9CAsibgY' style='text-align: left;vertical-align: top;'>Placement of the Amazon Pay button on your website<br><br>Supported values: ‘Home’, ‘Product’, ‘Cart’, ‘Checkout’, and 'Other'
                <br /></td>
        </tr>
        <tr id='' style="display:none;" class="environmentSpecificKeys">
            <td id='' style='vertical-align: top;'>publicKeyId<br>(<b>required</b>)<br><br>Type: string
                <br /></td>
            <td id='' style='text-align: left;vertical-align: top;'>Credential provided by Amazon Pay. See <a href="../amazon-pay-checkout/get-set-up-for-integration.md#4-get-your-publickeyid" target="_blank" rel="noopener noreferrer">Get you publicKeyId</a> for more info<br><br>
            You must also set the <code>sandbox</code> parameter if your <code>publicKeyId</code> does not have an environment prefix
                <br /></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=''>
            <td id='' style='text-align: left;vertical-align: top;'>estimatedOrderAmount<br><br>Type: <a href="../amazon-pay-api-v2/checkout-session.md#type-price">price</a>
                <br /></td>
            <td id='' style='text-align: left;vertical-align: top;'>This is the estimated checkout order amount, it does not have to match the final order amount if the buyer updates their order after starting checkout. Amazon Pay will use this value to assess transaction risk and prevent buyers from selecting payment methods that can't be used to process the order
            </td>
        </tr>
        <tr id='IXV9CARMeio'>
            <td id='s:IXV9CARMeio;IXV9CAYD3dl' 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>
                      <li>'SignIn' - Offer Amazon Sign-in. Select this product type if you need buyer details before the buyer starts Amazon Pay checkout. See <a href="../amazon-pay-checkout/amazon-sign-in.md" target="_blank" rel="noopener noreferrer">Amazon Sign-in</a> for more information.</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='IXV9CAGCmFe'>
            <td id='s:IXV9CAGCmFe;IXV9CAYD3dl' style='vertical-align: top;'>sandbox<br><br>Type: boolean
                <br /></td>
            <td id='' style='text-align: left;vertical-align: top;'>Sets button to Sandbox environment
            <br><br>You do not have to set this parameter if your <code>publicKeyId</code> has an environment prefix (for example: SANDBOX-AFVX7ULWSGBZ5535PCUQOY7B)
            <br><br>Default value: false
                <br /></td>
        </tr>
    </tbody>
</table>

#### Type: buttonConfig

<table width="100%" border="1">
    <tbody>
        <tr id='IXV9CANwXji'>
            <td id='s:IXV9CANwXji;IXV9CA9vlVH' style='vertical-align: top;' class='bold'>Parameter
                <br /></td>
            <td id='s:IXV9CANwXji;IXV9CAxsfso' style='vertical-align: top;' class='bold'>Description
                <br /></td>
        </tr>
        <tr id='OKb9CAupwNy'>
            <td id='s:OKb9CAupwNy;OKb9CAuzKYG' style='vertical-align: top;'>payloadJSON<br>(<b>required</b>)<br><br>Type: string
                <br /></td>
            <td id='' style=''>For <code>createCheckoutSessionConfig</code>, Amazon Pay will use this value to create a Checkout Session object. This is the same as the request body for the <a href="../amazon-pay-api-v2/checkout-session.md#create-checkout-session" target="_blank" rel="noopener noreferrer">Create Checkout Session</a> API<br /><br />
            For <code>signInConfig</code>, Amazon Pay will this value to determine which buyer details to share and where to redirect the buyer after they sign in
            </td>
        </tr>
        <tr id='OKb9CAa4tUK'>
            <td id='s:OKb9CAa4tUK;OKb9CAuzKYG' style='vertical-align: top;'>signature<br>(<b>required</b>)<br><br>Type: string
                <br /></td>
            <td id='s:OKb9CAa4tUK;OKb9CArf6Kx' style='text-align: left;vertical-align: top;'>String used to verify the identity of the requestor and protect the data during transit
            <br /></td>
        </tr>
        <tr id='OKb9CAa4kUK'>
            <td id='s:OKb9CAa4tUK;OKb9CAuzKYG' style='vertical-align: top;'>algorithm<br><br>Type: string
                <br /></td>
            <td id='s:OKb9CAa4tUK;OKb9CArf6Kx' style='text-align: left;vertical-align: top;'>String used to identify the hashing algorithm used to sign the request. This value on the front-end should be in sync with the signing algorithm value used in the back-end code or SDK<br /><br />
            Possible values: 'AMZN-PAY-RSASSA-PSS-V2' and 'AMZN-PAY-RSASSA-PSS'<br /><br />
            AMZN-PAY-RSASSA-PSS-V2 is the latest and recommended signing algorithm using a salt length of 32. AMZN-PAY-RSASSA-PSS is the prior version supporting a salt length of 20, this is the default value if this field is not populated.
                <br /></td>
        </tr>
        <tr id='OKb9CA9fD5W'>
            <td id='s:OKb9CA9fD5W;OKb9CAuzKYG' style='vertical-align: top;'>publicKeyId<br>(<b>required</b>)<br><br>Type: string
                <br /></td>
            <td id='s:OKb9CA9fD5W;OKb9CArf6Kx' style='text-align: left;vertical-align: top;'>Credential provided by Amazon Pay. See <a href="../amazon-pay-checkout/get-set-up-for-integration.md#4-get-your-publickeyid" target="_blank" rel="noopener noreferrer">Get you publicKeyId</a> for more info
            <br /><br />You do not have to set this parameter if your publicKeyId has an environment prefix (for example: SANDBOX-AFVX7ULWSGBZ5535PCUQOY7B)
                <br /></td>
        </tr>
    </tbody>
</table>

***

### Decoupling button render and checkout or sign-in initiation

If you need control of the Amazon Pay button click event, you can decouple the button render action and checkout or sign-in initiation. Use amazon.Pay.renderButton() to render the button and amazonPayButton.initCheckout() to initiate Amazon Pay checkout. 

#### Code sample for Amazon Pay Checkout


<div style="display:none" class="environmentSpecificKeys">
<ul id="profileTabs" class="nav nav-tabs">
  <li class="nav-item"><a class="active nav-link noExtIcon" href="#usButtonDecoupledTab" data-toggle="tab">US</a></li>
  <li class="nav-item"><a class="nav-link noExtIcon" href="#euButtonDecoupledTab" data-toggle="tab">EU</a></li>
  <li class="nav-item"><a class="nav-link noExtIcon" href="#ukButtonDecoupledTab" data-toggle="tab">UK</a></li>
  <li class="nav-item"><a class="nav-link noExtIcon" href="#jpButtonDecoupledTab" data-toggle="tab">JP</a></li>
</ul>
<div class="tab-content">


  <div role="tabpanel" class="tab-pane active" id="usButtonDecoupledTab">   
<div markdown="block">
```javascript
var amazonPayButton = amazon.Pay.renderButton('#AmazonPayButton', {
   merchantId: 'xxxxx',
   publicKeyId: 'SANDBOX-xxxxxxxxxx', 
   ledgerCurrency: 'USD',          
   checkoutLanguage: 'en_US', 
   productType: 'PayAndShip', 
   placement: 'Cart',
   buttonColor: 'Gold'
});

amazonPayButton.onClick(function(){
  // define your custom actions here
  
  amazonPayButton.initCheckout({
    estimatedOrderAmount: { "amount": "109.99", "currencyCode": "USD"},
    createCheckoutSessionConfig: {  
      payloadJSON: 'payload',
      signature: 'xxxx',
      algorithm: 'AMZN-PAY-RSASSA-PSS-V2',
      publicKeyId: 'xxxxxxxxxx'
    }
  });
});
```
</div>
  </div>

  <div role="tabpanel" class="tab-pane" id="euButtonDecoupledTab">
<div markdown="block">
```javascript
var amazonPayButton = amazon.Pay.renderButton('#AmazonPayButton', {
   merchantId: 'xxxxx',
   publicKeyId: 'SANDBOX-xxxxxxxxxx', 
   ledgerCurrency: 'EUR',          
   checkoutLanguage: 'en_GB', 
   productType: 'PayAndShip', 
   placement: 'Cart',
   buttonColor: 'Gold'
});

amazonPayButton.onClick(function(){
  // define your custom actions here
  
  amazonPayButton.initCheckout({
    estimatedOrderAmount: { "amount": "109.99", "currencyCode": "EUR"},
    createCheckoutSessionConfig: { 
      payloadJSON: 'payload',
      signature: 'xxxx',
      algorithm: 'AMZN-PAY-RSASSA-PSS-V2',
      publicKeyId: 'xxxxxxxxxx'
    }
  });
});
```
</div>
  </div>

<div role="tabpanel" class="tab-pane" id="ukButtonDecoupledTab">
<div markdown="block">
```javascript
var amazonPayButton = amazon.Pay.renderButton('#AmazonPayButton', {
   merchantId: 'xxxxx',
   publicKeyId: 'SANDBOX-xxxxxxxxxx', 
   ledgerCurrency: 'GBP',          
   checkoutLanguage: 'en_GB', 
   productType: 'PayAndShip', 
   placement: 'Cart',
   buttonColor: 'Gold'
});

amazonPayButton.onClick(function(){
  // define your custom actions here
  
  amazonPayButton.initCheckout({
    estimatedOrderAmount: { "amount": "109.99", "currencyCode": "GBP"},
    createCheckoutSessionConfig: { 
      payloadJSON: 'payload',
      signature: 'xxxx',
      algorithm: 'AMZN-PAY-RSASSA-PSS-V2',
      publicKeyId: 'xxxxxxxxxx'
    }
  });
});
```
</div>
  </div>  

  <div role="tabpanel" class="tab-pane" id="jpButtonDecoupledTab">
<div markdown="block">
```javascript
var amazonPayButton = amazon.Pay.renderButton('#AmazonPayButton', {
   merchantId: 'xxxxx',
   publicKeyId: 'SANDBOX-xxxxxxxxxx', 
   ledgerCurrency: 'JPY',          
   checkoutLanguage: 'ja_JP', 
   productType: 'PayAndShip', 
   placement: 'Cart',
   buttonColor: 'Gold'
});

amazonPayButton.onClick(function(){
  // define your custom actions here
  
  amazonPayButton.initCheckout({
    createCheckoutSessionConfig: { 
      payloadJSON: 'payload',
      signature: 'xxxx',
      algorithm: 'AMZN-PAY-RSASSA-PSS-V2',
      publicKeyId: 'xxxxxxxxxx'
    }
  });
});
```
</div>
  </div>
</div>
</div>
<div style="display:none" class="notEnvironmentSpecificKeys">
<ul id="profileTabs" class="nav nav-tabs">
  <li class="nav-item"><a class="active nav-link noExtIcon" href="#usButtonDecoupledTabNESK" data-toggle="tab">US</a></li>
  <li class="nav-item"><a class="nav-link noExtIcon" href="#euButtonDecoupledTabNESK" data-toggle="tab">EU</a></li>
  <li class="nav-item"><a class="nav-link noExtIcon" href="#ukButtonDecoupledTabNESK" data-toggle="tab">UK</a></li>
  <li class="nav-item"><a class="nav-link noExtIcon" href="#jpButtonDecoupledTabNESK" data-toggle="tab">JP</a></li>
</ul>
<div class="tab-content">


  <div role="tabpanel" class="tab-pane active" id="usButtonDecoupledTabNESK">   
<div markdown="block">
```javascript
var amazonPayButton = amazon.Pay.renderButton('#AmazonPayButton', {
   merchantId: 'xxxxx',
   ledgerCurrency: 'USD',          
   sandbox: true, 
   checkoutLanguage: 'en_US', 
   productType: 'PayAndShip', 
   placement: 'Cart',
   buttonColor: 'Gold'
});

amazonPayButton.onClick(function(){
  // define your custom actions here
  
  amazonPayButton.initCheckout({
    estimatedOrderAmount: { "amount": "109.99", "currencyCode": "USD"},
    createCheckoutSessionConfig: {  
      payloadJSON: 'payload',
      signature: 'xxxx',
      algorithm: 'AMZN-PAY-RSASSA-PSS-V2',
      publicKeyId: 'xxxxxxxxxx'
    }
  });
});
```
</div>
  </div>

  <div role="tabpanel" class="tab-pane" id="euButtonDecoupledTabNESK">
<div markdown="block">
```javascript
var amazonPayButton = amazon.Pay.renderButton('#AmazonPayButton', {
   merchantId: 'xxxxx',
   ledgerCurrency: 'EUR',          
   sandbox: true, 
   checkoutLanguage: 'en_GB', 
   productType: 'PayAndShip', 
   placement: 'Cart',
   buttonColor: 'Gold'
});

amazonPayButton.onClick(function(){
  // define your custom actions here
  
  amazonPayButton.initCheckout({
    estimatedOrderAmount: { "amount": "109.99", "currencyCode": "EUR"},
    createCheckoutSessionConfig: { 
      payloadJSON: 'payload',
      signature: 'xxxx',
      algorithm: 'AMZN-PAY-RSASSA-PSS-V2',
      publicKeyId: 'xxxxxxxxxx'
    }
  });
});
```
</div>
  </div>

<div role="tabpanel" class="tab-pane" id="ukButtonDecoupledTabNESK">
<div markdown="block">
```javascript
var amazonPayButton = amazon.Pay.renderButton('#AmazonPayButton', {
   merchantId: 'xxxxx',
   ledgerCurrency: 'GBP',          
   sandbox: true, 
   checkoutLanguage: 'en_GB', 
   productType: 'PayAndShip', 
   placement: 'Cart',
   buttonColor: 'Gold'
});

amazonPayButton.onClick(function(){
  // define your custom actions here
  
  amazonPayButton.initCheckout({
    estimatedOrderAmount: { "amount": "109.99", "currencyCode": "GBP"},
    createCheckoutSessionConfig: { 
      payloadJSON: 'payload',
      signature: 'xxxx',
      algorithm: 'AMZN-PAY-RSASSA-PSS-V2',
      publicKeyId: 'xxxxxxxxxx'
    }
  });
});
```
</div>
  </div>  

  <div role="tabpanel" class="tab-pane" id="jpButtonDecoupledTabNESK">
<div markdown="block">
```javascript
var amazonPayButton = amazon.Pay.renderButton('#AmazonPayButton', {
   merchantId: 'xxxxx',
   ledgerCurrency: 'JPY',          
   sandbox: true, 
   checkoutLanguage: 'ja_JP', 
   productType: 'PayAndShip', 
   placement: 'Cart',
   buttonColor: 'Gold'
});

amazonPayButton.onClick(function(){
  // define your custom actions here
  
  amazonPayButton.initCheckout({
    createCheckoutSessionConfig: { 
      payloadJSON: 'payload',
      signature: 'xxxx',
      algorithm: 'AMZN-PAY-RSASSA-PSS-V2',
      publicKeyId: 'xxxxxxxxxx'
    }
  });
});
```
</div>
  </div>
</div>
</div>

#### Code sample for Amazon Sign-in

<div style="display:none" class="environmentSpecificKeys">
<ul id="profileTabs" class="nav nav-tabs">
  <li class="nav-item"><a class="active nav-link noExtIcon" href="#usButtonDecoupledSignInTab" data-toggle="tab">US</a></li>
  <li class="nav-item"><a class="nav-link noExtIcon" href="#euButtonDecoupledSignInTab" data-toggle="tab">EU</a></li>
  <li class="nav-item"><a class="nav-link noExtIcon" href="#ukButtonDecoupledSignInTab" data-toggle="tab">UK</a></li>
  <li class="nav-item"><a class="nav-link noExtIcon" href="#jpButtonDecoupledSignInTab" data-toggle="tab">JP</a></li>
</ul>
<div class="tab-content">


  <div role="tabpanel" class="tab-pane active" id="usButtonDecoupledSignInTab">   
<div markdown="block">
```javascript
var amazonPayButton = amazon.Pay.renderButton('#AmazonPaySignInButton', {
   merchantId: 'xxxxx',
   publicKeyId: 'SANDBOX-xxxxxxxxxx',
   ledgerCurrency: 'USD',          
   checkoutLanguage: 'en_US', 
   productType: 'SignIn', 
   placement: 'Cart',
   buttonColor: 'Gold'
});

amazonPayButton.onClick(function(){
  // define your custom actions here
  
  amazon.Pay.initCheckout({
        // set environment
        merchantId: 'xxxxx',
        ledgerCurrency: 'USD',
        sandbox: true,               
        // customize the buyer experience
        checkoutLanguage: 'en_US',
        productType: 'SignIn',
        placement: 'Cart',
        buttonColor: 'Gold',            
        // configure Sign In flow
        signInConfig: {                     
            payloadJSON: 'payload', 
            signature: 'xxxx', 
            algorithm: 'AMZN-PAY-RSASSA-PSS-V2',
            publicKeyId: 'xxxxxxxxxx' 
        }   
    });
}); 
```
</div>
  </div>

  <div role="tabpanel" class="tab-pane" id="euButtonDecoupledSignInTab">
<div markdown="block">
```javascript
var amazonPayButton = amazon.Pay.renderButton('#AmazonPaySignInButton', {
   merchantId: 'xxxxx',
   publicKeyId: 'SANDBOX-xxxxxxxxxx',
   ledgerCurrency: 'EUR',          
   checkoutLanguage: 'en_GB', 
   productType: 'SignIn', 
   placement: 'Cart',
   buttonColor: 'Gold'
});

amazonPayButton.onClick(function(){
  // define your custom actions here
  
  amazon.Pay.initCheckout({
        // set environment
        merchantId: 'xxxxx',
        ledgerCurrency: 'EUR',
        sandbox: true,               
        // customize the buyer experience
        checkoutLanguage: 'en_GB',
        productType: 'SignIn',
        placement: 'Cart',
        buttonColor: 'Gold',            
        // configure Sign In flow
        signInConfig: {                     
            payloadJSON: 'payload', 
            signature: 'xxxx',
            algorithm: 'AMZN-PAY-RSASSA-PSS-V2', 
            publicKeyId: 'xxxxxxxxxx' 
        }   
    });
});
```
</div>
  </div>

<div role="tabpanel" class="tab-pane" id="ukButtonDecoupledSignInTab">
<div markdown="block">
```javascript
var amazonPayButton = amazon.Pay.renderButton('#AmazonPaySignInButton', {
   merchantId: 'xxxxx',
   publicKeyId: 'SANDBOX-xxxxxxxxxx',
   ledgerCurrency: 'GBP',          
   checkoutLanguage: 'en_GB', 
   productType: 'SignIn', 
   placement: 'Cart',
   buttonColor: 'Gold'
});

amazonPayButton.onClick(function(){
  // define your custom actions here
  
  amazon.Pay.initCheckout({
        // set environment
        merchantId: 'xxxxx',
        ledgerCurrency: 'GBP',
        sandbox: true,               
        // customize the buyer experience
        checkoutLanguage: 'en_GB',
        productType: 'SignIn',
        placement: 'Cart',
        buttonColor: 'Gold',            
        // configure Sign In flow
        signInConfig: {                     
            payloadJSON: 'payload', 
            signature: 'xxxx', 
            algorithm: 'AMZN-PAY-RSASSA-PSS-V2',
            publicKeyId: 'xxxxxxxxxx' 
        }   
    });
});
```
</div>
  </div>  

  <div role="tabpanel" class="tab-pane" id="jpButtonDecoupledSignInTab">
<div markdown="block">
```javascript
var amazonPayButton = amazon.Pay.renderButton('#AmazonPaySignInButton', {
   merchantId: 'xxxxx',
   publicKeyId: 'SANDBOX-xxxxxxxxxx',
   ledgerCurrency: 'JPY',          
   checkoutLanguage: 'ja_JP', 
   productType: 'SignIn', 
   placement: 'Cart',
   buttonColor: 'Gold'
});

amazonPayButton.onClick(function(){
  // define your custom actions here
  
  amazon.Pay.initCheckout({
        // set environment
        merchantId: 'xxxxx',
        ledgerCurrency: 'JPY',
        sandbox: true,               
        // customize the buyer experience
        checkoutLanguage: 'ja_JP',
        productType: 'SignIn',
        placement: 'Cart',
        buttonColor: 'Gold',            
        // configure Sign In flow
        signInConfig: {                     
            payloadJSON: 'payload', 
            signature: 'xxxx', 
            algorithm: 'AMZN-PAY-RSASSA-PSS-V2',
            publicKeyId: 'xxxxxxxxxx' 
        }   
    });
});
```
</div>
  </div>
</div>
</div>
<div style="display:none" class="notEnvironmentSpecificKeys">
<ul id="profileTabs" class="nav nav-tabs">
  <li class="nav-item"><a class="active nav-link noExtIcon" href="#usButtonDecoupledSignInTabNESK" data-toggle="tab">US</a></li>
  <li class="nav-item"><a class="nav-link noExtIcon" href="#euButtonDecoupledSignInTabNESK" data-toggle="tab">EU</a></li>
  <li class="nav-item"><a class="nav-link noExtIcon" href="#ukButtonDecoupledSignInTabNESK" data-toggle="tab">UK</a></li>
  <li class="nav-item"><a class="nav-link noExtIcon" href="#jpButtonDecoupledSignInTabNESK" data-toggle="tab">JP</a></li>
</ul>
<div class="tab-content">


  <div role="tabpanel" class="tab-pane active" id="usButtonDecoupledSignInTabNESK">   
<div markdown="block">
```javascript
var amazonPayButton = amazon.Pay.renderButton('#AmazonPaySignInButton', {
   merchantId: 'xxxxx',
   ledgerCurrency: 'USD',          
   sandbox: true, 
   checkoutLanguage: 'en_US', 
   productType: 'SignIn', 
   placement: 'Cart',
   buttonColor: 'Gold'
});

amazonPayButton.onClick(function(){
  // define your custom actions here
  
  amazon.Pay.initCheckout({
        // set environment
        merchantId: 'xxxxx',
        ledgerCurrency: 'USD',
        sandbox: true,               
        // customize the buyer experience
        checkoutLanguage: 'en_US',
        productType: 'SignIn',
        placement: 'Cart',
        buttonColor: 'Gold',            
        // configure Sign In flow
        signInConfig: {                     
            payloadJSON: 'payload', 
            signature: 'xxxx', 
            algorithm: 'AMZN-PAY-RSASSA-PSS-V2',
            publicKeyId: 'xxxxxxxxxx' 
        }   
    });
}); 
```
</div>
  </div>

  <div role="tabpanel" class="tab-pane" id="euButtonDecoupledSignInTabNESK">
<div markdown="block">
```javascript
var amazonPayButton = amazon.Pay.renderButton('#AmazonPaySignInButton', {
   merchantId: 'xxxxx',
   ledgerCurrency: 'EUR',          
   sandbox: true, 
   checkoutLanguage: 'en_GB', 
   productType: 'SignIn', 
   placement: 'Cart',
   buttonColor: 'Gold'
});

amazonPayButton.onClick(function(){
  // define your custom actions here
  
  amazon.Pay.initCheckout({
        // set environment
        merchantId: 'xxxxx',
        ledgerCurrency: 'EUR',
        sandbox: true,               
        // customize the buyer experience
        checkoutLanguage: 'en_GB',
        productType: 'SignIn',
        placement: 'Cart',
        buttonColor: 'Gold',            
        // configure Sign In flow
        signInConfig: {                     
            payloadJSON: 'payload', 
            signature: 'xxxx', 
            algorithm: 'AMZN-PAY-RSASSA-PSS-V2',
            publicKeyId: 'xxxxxxxxxx' 
        }   
    });
});
```
</div>
  </div>

<div role="tabpanel" class="tab-pane" id="ukButtonDecoupledSignInTabNESK">
<div markdown="block">
```javascript
var amazonPayButton = amazon.Pay.renderButton('#AmazonPaySignInButton', {
   merchantId: 'xxxxx',
   ledgerCurrency: 'GBP',          
   sandbox: true, 
   checkoutLanguage: 'en_GB', 
   productType: 'SignIn', 
   placement: 'Cart',
   buttonColor: 'Gold'
});

amazonPayButton.onClick(function(){
  // define your custom actions here
  
  amazon.Pay.initCheckout({
        // set environment
        merchantId: 'xxxxx',
        ledgerCurrency: 'GBP',
        sandbox: true,               
        // customize the buyer experience
        checkoutLanguage: 'en_GB',
        productType: 'SignIn',
        placement: 'Cart',
        buttonColor: 'Gold',            
        // configure Sign In flow
        signInConfig: {                     
            payloadJSON: 'payload', 
            signature: 'xxxx', 
            algorithm: 'AMZN-PAY-RSASSA-PSS-V2',
            publicKeyId: 'xxxxxxxxxx' 
        }   
    });
});
```
</div>
  </div>  

  <div role="tabpanel" class="tab-pane" id="jpButtonDecoupledSignInTabNESK">
<div markdown="block">
```javascript
var amazonPayButton = amazon.Pay.renderButton('#AmazonPaySignInButton', {
   merchantId: 'xxxxx',
   ledgerCurrency: 'JPY',          
   sandbox: true, 
   checkoutLanguage: 'ja_JP', 
   productType: 'SignIn', 
   placement: 'Cart',
   buttonColor: 'Gold'
});

amazonPayButton.onClick(function(){
  // define your custom actions here
  
  amazon.Pay.initCheckout({
        // set environment
        merchantId: 'xxxxx',
        ledgerCurrency: 'JPY',
        sandbox: true,               
        // customize the buyer experience
        checkoutLanguage: 'ja_JP',
        productType: 'SignIn',
        placement: 'Cart',
        buttonColor: 'Gold',            
        // configure Sign In flow
        signInConfig: {                     
            payloadJSON: 'payload', 
            signature: 'xxxx', 
            algorithm: 'AMZN-PAY-RSASSA-PSS-V2',
            publicKeyId: 'xxxxxxxxxx' 
        }   
    });
});
```
</div>
  </div>
</div>
</div>

***

### Render button using a Checkout Session object

Note: New integrations should not use this intergration and instead follow <a href="#render-the-amazon-pay-button">render the Amazon Pay button</a> instructions above. Amazon Pay will continue to support rendering the button using a Checkout Session object you generated on your back end, but new features such as rendering <a href="../amazon-pay-checkout/end-of-checkout.md" target="_blank" rel="noopener noreferrer">additional payment button</a> will not be available.

Instead of generating a payload that Amazon Pay will use to create a Checkout Session object, you can also set up an endpoint on your server that calls <a href="../amazon-pay-api-v2/checkout-session.md#create-checkout-session" target="_blank" rel="noopener noreferrer">Create Checkout Session</a>. Set that endpoint in the button render code and the Amazon Pay script will POST a request to that URL each time the button is clicked.

The response of your endpoint should be in JSON format. You can either return the entire <a href="../amazon-pay-api-v2/checkout-session.md#create-checkout-session" target="_blank" rel="noopener noreferrer">Create Checkout Session</a> response or return a response that includes a `checkoutSessionId` key. Example: {"checkoutSessionId": "116e5701-a0bf-49f2-a63d-000000000000"}.

#### Code sample

```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>
```

***

### Responsive button logic

The Amazon Pay button is responsive and inherits 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.


Provide a specific size for the container element or the Amazon Pay button may stretch or shrink if the buyer adjusts the zoom level on their browser. 

***

### Enable checkout info updates

#### Recommended Approach

Use amazon.Pay.changeShippingAddress() to enable updates in case the buyer wants to select a different shipping address and amazon.Pay.changePaymentMethod() to enable updates in case the buyer wants to select a different payment method. <br />
This will take you straight to the change shipping address or change payment method page.

#### Code sample

```html
<script type="text/javascript" charset="utf-8">
    amazon.Pay.changeShippingAddress({
      amazonCheckoutSessionId: 'xxxx'
    });

    amazon.Pay.changePaymentMethod({
      amazonCheckoutSessionId: 'xxxx'
    });
</script>
```

#### Parameters

<table width="100%" border="1">
    <tbody>
        <tr>
            <td style='vertical-align: top; font-weight: bold; width: 30%;' class='bold'>Parameter
                <br /></td>
            <td style='vertical-align: top; font-weight: bold; width: 70%;' class='bold'>Description
                <br /></td>
        </tr>
        <tr>
            <td style='vertical-align: top;'>amazonCheckoutSessionId<br>(<b>required</b>)<br><br>Type: string
                <br /></td>
            <td style='vertical-align: top;'>Amazon Pay Checkout Session identifier
                <br /></td>
        </tr>
    </tbody>
</table>


#### Legacy Approach

Use amazon.Pay.bindChangeAction() to enable updates in case the buyer wants to select a different shipping address or payment method.

#### Code sample

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

#### Parameters

<table width="100%" border="1">
    <tbody>
        <tr id='IXV9CA1supv'>
            <td id='s:IXV9CA1supv;IXV9CA5ow66' style='vertical-align: top; font-weight: bold; width: 30%;' class='bold'>Parameter
                <br /></td>
            <td id='s:IXV9CA1supv;IXV9CAnhWct' style='vertical-align: top; font-weight: bold; width: 70%;' class='bold'>Description
                <br /></td>
        </tr>
        <tr id='IXV9CAvxdY3'>
            <td id='s:IXV9CAvxdY3;IXV9CA5ow66' style='vertical-align: top;'>amazonCheckoutSessionId<br>(<b>required</b>)<br><br>Type: string
                <br /></td>
            <td id='s:IXV9CAvxdY3;IXV9CAnhWct' style='vertical-align: top;'>Amazon Pay Checkout Session identifier
                <br /></td>
        </tr>
        <tr id='IXV9CA5FJrL'>
            <td id='s:IXV9CA5FJrL;IXV9CA5ow66' style='text-align: left;vertical-align: middle;'>changeAction<br>(<b>required</b>)<br><br>Type: string
                <br /></td>
            <td id='s:IXV9CA5FJrL;IXV9CAnhWct' style='vertical-align: top;'>Update requested by the buyer<br><br>Supported values: 'changeAddress', 'changePayment'
                <br /></td>
        </tr>
    </tbody>
</table>

***

### Sign out from Amazon

Use amazon.Pay.signout() to give buyers the option of signing out from their Amazon account. 

**Best practice:** Give buyers the option of signing out after they complete checkout. Bind the function to a “Sign out from Amazon” link on your order confirmation page. 

#### Code sample

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

