---
title: Amazon Payボタンを追加する
url: ja/amazon-pay-recurring-checkout/ja-add-the-amazon-pay-button.html
---

**[ステップ2/9]** Amazon Payの決済エクスペリエンスは、購入者がAmazon Payボタンをクリックすると開始されます。ミニカート、ショッピングカートページ、チェックアウトページなど、購入者が決済を開始する場所にボタンを追加します。

このステップでは、Amazon Pay Checkout Sessionオブジェクトを設定してから、Amazon Payボタンをレンダリングします。このステップの最後に、購入者をAmazon Hosted Pageにリダイレクトして、希望の配送先住所と支払い方法を選択できるようになります。

<div markdown="span" class="alert alert-info" role="alert"><i class="fa fa-info-circle"></i> <b>Note:</b> Amazon Payボタンが表示されるドメインをセラーセントラルに追加する必要があります。詳細については、<a href='../amazon-pay-apb-checkout/get-set-up-for-integration.html#2-add-domains-to-seller-central' target='_blank' rel='noopener noreferrer'>セラーセントラルへのドメインの追加</a> を参照してください。</div>

<!-- <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> publicKeyIdの先頭に環境名が<b>付与されていない</b>場合 (SANDBOX'や'LIVE'で始まっていない場合)、<a href='#' onclick='window.location.href=window.location.href.split("?")[0]+"?environmentSpecificKeys=false"' rel='noopener noreferrer'>こちらの手順</a>を確認してください。</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> publicKeyIdの先頭に環境名が付与されている場合 (例: SANDBOX-AFVX7ULWSGBZ5535PCUQOY7B)、<a href='#' onclick='window.location.href=window.location.href.split("?")[0]+"?environmentSpecificKeys=true"' rel='noopener noreferrer'>こちらの手順</a>を確認してください。</div>
</div> -->

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

***

### 1. Amazon Payスクリプトを追加します

Amazon PayスクリプトをHTMLファイルに追加します。必ず正しいリージョンを選択してください。

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

***

### 2. CheckoutSession ペイロードを生成します

Amazon Payボタンをレンダリングするには、 Amazon Payが<a href="../amazon-pay-api-v2/checkout-session.md" target="_blank" rel="noopener noreferrer">CheckoutSession</a>オブジェクトを作成するために使用するペイロードを提供する必要があります。CheckoutSessionオブジェクトを使用して、Webサイトでの購入者のアクティブなセッションを管理します。

<!-- <a href="../amazon-pay-api-v2/checkout-session.md#create-checkout-session" target="_blank" rel="noopener noreferrer">Create Checkout Session</a>APIのリクエストボディを使用して、ペイロードを作成します。-->

**ボタンペイロードを生成するための手順:**
* `checkoutReviewReturnUrl`パラメータに、購入者が希望の配送先住所と支払い方法を選択した後にリダイレクトされるURLを設定します。CheckoutSession IDはクエリパラメータとして追加されます。
* `recurringMetadata.frequency`を設定することで、購入者の信頼性を高めることができます。もしこのステップで値を提供しない場合は、購入者が決済を完了する前までに値を設定する必要があります。Amazon Payは、提供された値を使用して、<a href="../amazon-pay-api-v2/charge-permission.md" target="_blank" rel="noopener noreferrer">Charge Permission</a>の有効期限を計算し、購入者とのコミュニケーションに用います。事業者が<a href="../amazon-pay-api-v2/charge.md#create-charge" target="_blank" rel="noopener noreferrer">Create Charge</a>を呼び出して、請求サイクルごとに購入者に請求する必要があります。		 
* `scopes`パラメータを使用して、決済を完了するために必要な購入者情報を指定します。この値を設定した場合、請求先住所など追加で取得できます。

**オプションのインテグレーション手順:**
* `deliverySpecifications` パラメータを使用して、住所制限を指定し、購入者がAmazon Hosted Pageのお届け先からサポートされていない住所を選択できないようにします。 一般的なユースケースの処理のついては、<a href="../amazon-pay-checkout/address-restriction-samples.md" target="_blank" rel="noopener noreferrer">アドレス制限のサンプル</a>を参照してください。
* (EU/UKのみ)`presentmentCurrency` パラメータを使用して、 他の<a href="../amazon-pay-checkout/multi-currency-integration.md#サポートされている通貨" target="_blank" rel="noopener noreferrer">サポートされている通貨</a>を使用して購入者に請求できます。詳細については、<a href="../amazon-pay-checkout/multi-currency-integration.md" target="_blank" rel="noopener noreferrer">こちら</a> を参照してください。

#### ペイロード の例

```
{
    "webCheckoutDetails": {
        "checkoutReviewReturnUrl": "https://a.com/merchant-review-page"
    },
    "storeId": "amzn1.application-oa2-client.8b5e45312b5248b69eeaStoreId",
    "scopes": ["name", "email", "phoneNumber", "billingAddress"],
    "chargePermissionType": "Recurring",   
    "recurringMetadata": {
        "frequency": { 
            "unit": "Month", 
            "value": "1" 
        },
        "amount": { 
            "amount": "30",
            "currencyCode": "USD"
        }
    }, 
    "deliverySpecifications": {
        "specialRestrictions": ["RestrictPOBoxes"],
        "addressRestrictions": {
            "type": "Allowed",
            "restrictions": {
                "US": {
                    "statesOrRegions": ["WA"],
                    "zipCodes": ["95050", "93405"]
                },
                "GB": {
                    "zipCodes": ["72046", "72047"]
                },
                "IN": {
                    "statesOrRegions": ["AP"]
                },
                "JP": {}
            }
        }
    }
}  
```

<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'>名前
                <br /></td>
            <td id='s:SPI9CAupGTX;SPI9CAm9zzw' style='vertical-align: top; font-weight: bold; width: 20%' class='bold'>ロケーション
                <br /></td>
            <td id='s:SPI9CAupGTX;SPI9CAMemY9' style='vertical-align: top; font-weight:bold;  width: 50%' class='bold'>説明
                <br /></td>
        </tr>
        <tr id='SPI9CAI5yKv'>
            <td id='s:SPI9CAI5yKv;SPI9CAPMpxx' style='vertical-align: top;'>webCheckoutDetails<br><b>(必須)</b><br /><br />Type: <a href="../amazon-pay-api-v2/checkout-session.md#type-webcheckoutdetails" target="_blank" rel="noopener noreferrer">webCheckoutDetails</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;'>決済を完了するために使用されるCheckoutSessionに関連付けられたURL。 URLはHTTPSプロトコルを使用する必要があります
                <br /></td>
        </tr>
        <tr id='SPI9CAQrHNB'>
            <td id='s:SPI9CAQrHNB;SPI9CAPMpxx' style='vertical-align: top;'>storeId<br><b>(必須)</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;'>Amazon Pay Store ID。 Amazon Pay インテグレーションセントラルからこの値を取得します: <a href="https://sellercentral.amazon.com/gp/pyop/seller/integrationcentral/" target="_blank" rel="noopener noreferrer">US</a>, <a href="https://sellercentral-europe.amazon.com/gp/pyop/seller/integrationcentral/" target="_blank" rel="noopener noreferrer">EU</a>, <a href="https://sellercentral-japan.amazon.com/gp/pyop/seller/integrationcentral/" target="_blank" rel="noopener noreferrer">JP</a>
                <br /></td>
        </tr>
        <tr id=''>
            <td id='' style='vertical-align: top;'>scopes<br /><br />Type: list &lt;scope&gt;
                <br /></td>
            <td id='' style='text-align: left;vertical-align: top;'>Body
                <br /></td>
            <td id='' style='vertical-align: top;'>リクエストする購入者の詳細情報。手順4のボタンパラメータ<code>productType</code>を使用して、配送先住所が必要かどうかを指定します。<br><br>サポートされている値:
                    <ul>
                      <li>'name' - 購入者の氏名</li>
                      <li>'email' - 購入者のメールアドレス</li>
                      <li>'phoneNumber' - 既定の請求先住所に紐づく電話番号</li>
                      <li>'billingAddress' - 既定の請求先住所</li>
                    </ul>
            デフォルト値: <code>scopes</code>パラメータが設定されていない場合、請求先住所以外のすべての購入者情報をリクエストしたことになります
                <br /></td>
        </tr>
        <tr id=''>
            <td id='' style='vertical-align: top;'>chargePermissionType<br /><br />Type: string
                <br /></td>
            <td id='' style='text-align: left;vertical-align: top;'>Body
                <br /></td>
            <td id='' style='vertical-align: top;'>リクエストされたCharge PermissionのType<br><br>サポートされている値:
                    <ul>
                      <li>'OneTime' - このCharge Permissionは単発の注文に使用できます</li>
                      <li>'Recurring' - このCharge Permissionは定期的な注文に使用できます</li>
                    </ul>
            デフォルト値: 'OneTime'
                <br /></td>
        </tr>
        <tr id=''>
            <td id='' style='vertical-align: top;'>recurringMetadata<br /><br />Type: <a href="../amazon-pay-api-v2/checkout-session.md#type-recurringmetadata" target="_blank" rel="noopener noreferrer">recurringMetadata</a>
                <br /></td>
            <td id='' style='text-align: left;vertical-align: top;'>Body
                <br /></td>
            <td id='' style='vertical-align: top;'>RecurringのChargePermissionの使用方法に関するメタデータ。 Amazon Payは、この情報をChargePermissionの有効期限を計算と、購入者とのコミュニケーションにのみ使用します<br /><br />
            各請求サイクルで購入者に請求するために<a href="../amazon-pay-api-v2/charge.md#create-charge" target="_blank" rel="noopener noreferrer">Create Charge</a> を呼び出すのは、依然として事業者の責任であることに注意してください。
                <br /></td>
        </tr>
        <tr id=''>
            <td id='' style='vertical-align: top;'>deliverySpecifications<br /><br />Type: <a href="../amazon-pay-api-v2/checkout-session.md#type-deliveryspecifications" target="_blank" rel="noopener noreferrer">deliverySpecifications</a>
                <br /></td>
            <td id='' style='text-align: left;vertical-align: top;'>Body
                <br /></td>
            <td id='' style='vertical-align: top;'>配送先の制限を指定して、購入者がAmazonアドレス帳からサポートされていないアドレスを選択できないようにします
                <br /></td>
        </tr>
    </tbody>
</table>

***

### 3. ペイロードに署名します

署名を使用してペイロードを保護する必要があります。ペイロードにはタイムスタンプが含まれていないため、ペイロードが変更されない限り、署名を再利用できます。ペイロードを変更する必要があり、ボタンの署名が動的である場合は、ボタンの再レンダリングを回避するために、<a href="../amazon-pay-checkout/amazon-pay-script.md#デカップリングボタンのレンダリングと決済またはサインインの開始" target="_blank" rel="noopener noreferrer">決済の初期化からボタンのレンダリングを切り離す</a> 必要があります。

**オプション1（推奨）:** Amazon Pay SDKで提供されるヘルパー関数を使用して署名を生成します。このヘルパー関数によって生成された署名は、ボタンに対してのみ有効であり、API リクエストに対しては有効ではありません。

<ul id="profileTabs" class="nav nav-tabs">
  <li class="nav-item"><a class="active nav-link noExtIcon" href="#phptab" data-toggle="tab">PHP</a></li>
  <li class="nav-item"><a class="nav-link noExtIcon" href="#dotnettab" data-toggle="tab">.NET</a></li>
  <li class="nav-item"><a class="nav-link noExtIcon" href="#javatab" data-toggle="tab">Java</a></li>
  <li class="nav-item"><a class="nav-link noExtIcon" href="#nodejstab" data-toggle="tab">Node.js</a></li>
</ul>
<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="phptab">   
<div markdown="block">
```
<?php
    include 'vendor/autoload.php';

    $amazonpay_config = array(
        'public_key_id' => 'MY_PUBLIC_KEY_ID',
        'private_key'   => 'keys/private.pem',
        'region'        => 'US',
        'sandbox'       => true
    );

    $client = new Amazon\Pay\API\Client($amazonpay_config);
    $payload = '{"storeId":"amzn1.application-oa2-client.xxxxx","webCheckoutDetails":{"checkoutReviewReturnUrl":"https://example.com/review.html"},"chargePermissionType":"Recurring","recurringMetadata":{"frequency":{ unit":"Month","value":"1"},"amount":{"amount":"30","currencyCode":"USD"}}}';
    $signature = $client->generateButtonSignature($payload);
    echo $signature . "\n";
?>
```
<a href="https://github.com/amzn/amazon-pay-api-sdk-php/blob/master/Amazon/Pay/API/Client.php#L400"  target="_blank" rel="noopener noreferrer">ソースコード</a>
</div>
  </div>
  <div role="tabpanel" class="tab-pane" id="dotnettab">
<div markdown="block">
```
var payConfiguration = new ApiConfiguration
(
    region: Region.Europe,
    environment: Environment.Sandbox,
    publicKeyId: "MY_PUBLIC_KEY_ID",
    privateKey: "PATH_OR_CONTENT_OF_MY_PRIVATE_KEY"
);

var request = new  CreateCheckoutSessionRequest
(
    checkoutReviewReturnUrl: "https://example.com/review.html",
    storeId: "amzn1.application-oa2-client.xxxxx"
);

request.ChargePermissionType = ChargePermissionType.Recurring;
request.RecurringMetadata.Frequency.Unit = FrequencyUnit.Month;
request.RecurringMetadata.Frequency.Value = 1;
request.RecurringMetadata.Amount.Unit = 99.99M;
request.RecurringMetadata.Amount.CurrencyCode = Currency.EUR;

// generate the button signature
var signature = client.GenerateButtonSignature(request);

// the payload as JSON string that you must assign to the button in the next step
var payload = request.ToJson(); 
```
<a href="https://github.com/amzn/amazon-pay-api-sdk-dotnet/#generate-button-signature" target="_blank" rel="noopener noreferrer">ソースコード</a>
</div>
  </div>
  <div role="tabpanel" class="tab-pane" id="javatab">
<div markdown="block">
```
PayConfiguration payConfiguration = null;
try {
    payConfiguration = new PayConfiguration()
                .setPublicKeyId("YOUR_PUBLIC_KEY_ID")
                .setRegion(Region.YOUR_REGION_CODE)
                .setPrivateKey("YOUR_PRIVATE_KEY_STRING")
                .setEnvironment(Environment.SANDBOX);
}catch (AmazonPayClientException e) {
    e.printStackTrace();
}

AmazonPayClient client = new AmazonPayClient(payConfiguration);

String payload = "{\"storeId\":\"amzn1.application-oa2-client.xxxxxx\",\"webCheckoutDetails\":{\"checkoutReviewReturnUrl\":\"https://example.com/review.html\"},\"chargePermissionType\":\"Recurring\",\"recurringMetadata\":{\"frequency\":{\"unit\":\"Month\",\"value\":\"1\"},\"amount\":{\"amount\":\"30\",\"currencyCode\":\"USD\"}}}";
String signature = client.generateButtonSignature(payload);

```
<a href="https://github.com/amzn/amazon-pay-api-sdk-java/blob/bbbf89c480f07f8a7217a0a50e88131832612f59/src/com/amazon/pay/api/AmazonPayClient.java#L105"  target="_blank" rel="noopener noreferrer">ソースコード</a>
</div>
  </div>
  <div role="tabpanel" class="tab-pane" id="nodejstab">
<div markdown="block">
```html
const fs = require('fs');
const Client = require('@amazonpay/amazon-pay-api-sdk-nodejs');

const config = {
    publicKeyId: 'ABC123DEF456XYZ',
    privateKey: fs.readFileSync('tst/private.pem'),
    region: 'us',
    sandbox: true
};

const testPayClient = new Client.AmazonPayClient(config);
const payload = {
    "webCheckoutDetails": {
        "checkoutReviewReturnUrl": "https://example.com/review.html"
    },
    "storeId": "amzn1.application-oa2-client.xxxxx",
    "chargePermissionType": "Recurring",   
    "recurringMetadata": {
        "frequency": { 
            "unit": "Month", 
            "value": "1" 
        },
        "amount": { 
            "amount": "30",
            "currencyCode": "USD"
        }
    }
};
const signature = testPayClient.generateButtonSignature(payload);
```
<a href="https://github.com/amzn/amazon-pay-api-sdk-nodejs/blob/23c3f03f06a4deab437a42885e1d1f548287e7f3/src/client.js#L60"  target="_blank" rel="noopener noreferrer">ソースコード</a>
</div>
  </div>
</div>

**オプション2:** <a href="../amazon-pay-api-v2/signing-requests.md" target="_blank" rel="noopener noreferrer">署名リクエスト</a>ガイドのステップ2と3に従って、手動で署名を作成します。


***

### 4. ボタンのレンダー

前の2つの手順の値を使用して、Amazon PayボタンをHTMLコンテナ要素にレンダリングします。ボタンはレスポンシブになり、コンテナ要素のサイズを継承します。詳細については、<a href="../amazon-pay-checkout/amazon-pay-script.md#レスポンシブボタンロジック" target="_blank" rel="noopener noreferrer">レスポンシブボタンのロジック</a> を参照してください。

以下のサンプルコードは、ボタンをクリックするとすぐにAmazon Payの決済を開始します。クリックイベントの制御が必要な場合は、ボタンのレンダリングと決済の開始を切り離すことができます。詳細については、 <a href="../amazon-pay-checkout/amazon-pay-script.md" target="_blank" rel="noopener noreferrer">Amazon Payスクリプト</a>を参照してください。

#### コードサンプル

<div style="display:none" class="environmentSpecificKeys">
<ul id="profileTabs" class="nav nav-tabs">
  <li class="nav-item"><a class="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="active nav-link noExtIcon" href="#jpButtonTab" data-toggle="tab">JP</a></li>
</ul>
<div class="tab-content">


  <div role="tabpanel" class="tab-pane" 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', {
            // set checkout environment
            merchantId: 'merchant_id',
            publicKeyId: 'SANDBOX-xxxxxxxxxx',
            ledgerCurrency: 'USD',            
            // customize the buyer experience
            checkoutLanguage: 'en_US',
            productType: 'PayAndShip',
            placement: 'Cart',
            buttonColor: 'Gold',
            // configure Create Checkout Session request
            createCheckoutSessionConfig: {                     
                payloadJSON: 'payload', // string generated in step 2
                signature: 'xxxx' // signature generated in step 3
            }   
        });
    </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', {
            // set checkout environment
            merchantId: 'merchant_id',
            publicKeyId: 'SANDBOX-xxxxxxxxxx',
            ledgerCurrency: 'EUR',              
            // customize the buyer experience
            checkoutLanguage: 'en_GB',
            productType: 'PayAndShip',
            placement: 'Cart',
            buttonColor: 'Gold',
            // configure Create Checkout Session request
            createCheckoutSessionConfig: {                     
                payloadJSON: 'payload', // string generated in step 2
                signature: 'xxxx' // signature generated in step 3
            }   
        });
    </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', {
            // set checkout environment
            merchantId: 'merchant_id',
            publicKeyId: 'SANDBOX-xxxxxxxxxx',
            ledgerCurrency: 'GBP',            
            // customize the buyer experience
            checkoutLanguage: 'en_GB',
            productType: 'PayAndShip',
            placement: 'Cart',
            buttonColor: 'Gold',
            // configure Create Checkout Session request
            createCheckoutSessionConfig: {                     
                payloadJSON: 'payload', // string generated in step 2
                signature: 'xxxx' // signature generated in step 3
            }   
        });
    </script>
</body>
```
</div>
  </div>  

  <div role="tabpanel" class="tab-pane active" 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', // string generated in step 2
                signature: 'xxxx' // signature generated in step 3
            }   
        });
    </script>
</body>
```
</div>
  </div>
</div>
</div>
<div style="display:none" class="notEnvironmentSpecificKeys">
<ul id="profileTabs" class="nav nav-tabs">
  <li class="nav-item"><a class="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="active nav-link noExtIcon" href="#jpButtonTabNESK" data-toggle="tab">JP</a></li>
</ul>
<div class="tab-content">


  <div role="tabpanel" class="tab-pane" 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">
        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',
            // configure Create Checkout Session request
            createCheckoutSessionConfig: {                     
                payloadJSON: 'payload', // string generated in step 2
                signature: 'xxxx', // signature generated in step 3
                publicKeyId: 'xxxxxxxxxx' 
            }   
        });
    </script>
</body>
```
</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">
        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',
            // configure Create Checkout Session request
            createCheckoutSessionConfig: {                     
                payloadJSON: 'payload', // string generated in step 2
                signature: 'xxxx', // signature generated in step 3
                publicKeyId: 'xxxxxxxxxx' 
            }   
        });
    </script>
</body>
```
</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">
        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',
            // configure Create Checkout Session request
            createCheckoutSessionConfig: {                     
                payloadJSON: 'payload', // string generated in step 2
                signature: 'xxxx', // signature generated in step 3
                publicKeyId: 'xxxxxxxxxx' 
            }   
        });
    </script>
</body>
```
</div>
  </div>  

  <div role="tabpanel" class="tab-pane active" 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', // string generated in step 2
                signature: 'xxxx', // signature generated in step 3
                publicKeyId: 'xxxxxxxxxx' 
            }   
        });
    </script>
</body>
```
  </div>
    </div>
  </div>
</div>

#### 関数パラメータ

<table width="100%" border="1">
    <tbody>
        <tr id='SPI9CAvz30I'>
            <td id='s:SPI9CAvz30I;SPI9CAwqfh9' style='vertical-align: top; font-weight: bold ; width: 35%' class='bold'>パラメータ
                <br /></td>
            <td id='s:SPI9CAvz30I;SPI9CAy6rIp' style='vertical-align: top; font-weight: bold; width: 65%' class='bold'>説明
                <br /></td>
        </tr>
        <tr id='SPI9CAIyYS4'>
            <td id='s:SPI9CAIyYS4;SPI9CAwqfh9' style='vertical-align: top;'>merchantId<br><b>(必須)</b><br><br>Type: string
                <br /></td>
            <td id='s:SPI9CAIyYS4;SPI9CAy6rIp' style='text-align: left;vertical-align: top;'>Amazon Pay 事業者アカウント識別子
                <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='SPI9CAw52Yq'>
            <td id='s:SPI9CAw52Yq;SPI9CAwqfh9' style='vertical-align: top;'>createCheckoutSessionConfig<br><b>(必須)</b><br><br>Type: <a href="../amazon-pay-checkout/amazon-pay-script.md#type-buttonconfig">buttonConfig</a>
                <br /></td>
            <td id='s:SPI9CAw52Yq;SPI9CAy6rIp' style='text-align: left;vertical-align: top;'>Checkout Session構成を作成します。<code>productType</code>をPayAndShipかPayOnlyで利用する場合、これは必須フィールドです</td>
        </tr>
         <tr id='SPI9CAf8yEh'>
                    <td id='s:SPI9CAf8yEh;SPI9CAwqfh9' style='text-align: left;vertical-align: top;'>placement<br><b>(必須)</b><br><br>Type: string
                        <br /></td>
                    <td id='s:SPI9CAf8yEh;SPI9CAy6rIp' style='text-align: left;vertical-align: top;'>ウェブサイトへのAmazon Payボタンの配置場所<br><br>サポートされている値:
                    <ul>
                      <li>'Home' - 初期ページまたはメインページ</li>
                      <li>'Product' - 商品詳細ページ</li>
                      <li>'Cart' - 購入者が決済を開始する前のカート確認ページ</li>
                      <li>'Checkout' - 購入者が決済を開始した後の任意のページ</li>
                      <li>'Other' - 上記説明に当てはまらないページ</li>
                    </ul>
                  </td>
                </tr>
        <tr id='IXV9CAD2lCG'>
            <td id='s:IXV9CAD2lCG;IXV9CAYD3dl' style='text-align: left;vertical-align: top;'>ledgerCurrency<br><b>(必須)</b><br><br>Type: string
                <br /></td>
            <td id='s:IXV9CAD2lCG;IXV9CAsibgY' style='text-align: left;vertical-align: top;'>指定された出品者IDの登録時に提供された通貨<br><br>サポートされている値: 
            <ul>
                <li>US事業者 - 'USD'</li>
                <li>EU事業者 - 'EUR'</li>
                <li>UK事業者 - 'GBP'</li>
                <li>JP事業者 - '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<br><br>サポートされている値:<br>
                    <ul>
                      <li>'PayAndShip' - 購入者のお届け先と支払い方法を使用した決済を提供します。購入者のお届け先情報が必要な場合は、このproduct typeを選択してください</li>
                      <li>'PayOnly' - 購入者の支払い方法のみを使用した決済を提供します。購入者のお届け先情報が必要ない場合は、このproduct typeを選択してください</li>
                      <li>'SignIn' - サインイン機能を提供します。購入者がAmazon Payの決済を開始する前に購入者の詳細情報が必要な場合は、このproduct typeを選択してください。詳細については、<a href="../amazon-pay-checkout/amazon-sign-in.md" target="_blank" rel="noopener noreferrer">Amazon サインイン</a>を参照してください。</li>
                    </ul>
              デフォルト値: '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;'>Amazon Payボタンの色<br><br>サポートされている値: 'Gold', 'LightGray', 'DarkGray'<br>
              デフォルト値: '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;'>Amazon Pay Hosted pageでボタンとテキストをレンダリングするために使用される言語。サポートされている言語は、Amazon Payアカウントの申し込みを行った地域によって異なることに注意してください。<br><br>サポートされている値:  
              <ul>
                <li>US事業者 - 'en_US'</li>
                <li>EU/UK事業者 - 'en_GB', 'de_DE', 'fr_FR', 'it_IT', 'es_ES'</li>
                <li>JP事業者 - '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;'>ボタンをSANDBOXに設定します                        
            <!-- <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>デフォルト値: false
                <br /></td>
        </tr>
    </tbody>
</table>







