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

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

このステップでは、Amazon Pay CheckoutSessionオブジェクトを設定してから、Amazon Payボタンをレンダリングします。このステップの最後に、購入者をAmazon Payでホストされているページにリダイレクトして、お支払い方法を選択できるようになります。

<div markdown="span" class="alert alert-info" role="alert"><i class="fa fa-info-circle"></i> <b>Note:</b> Amazon Payボタンが表示されるドメインをセラーセントラルに追加する必要があります。詳細については、<a href='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. Checkout Sessionペイロードを生成します

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

<!-- <a href="../amazon-pay-paymentmethodonfile/checkout-session.md#create-checkout-session" target="_blank" rel="noopener noreferrer">Create Checkout Session</a> APIのリクエストボディを使用して、ペイロードを作成します。 -->
ペイロードに購入者が決済を完了させるのに必要な全ての情報を設定します。


**ボタンペイロード生成手順：**
* `webCheckoutDetails.checkoutMode`をProcessOrderに設定します。
* Amazon Payでホストされているページで決済を完了した後、購入者がリダイレクトされるURLとして`checkoutResultReturnUrl`を設定します。CheckoutSession IDはクエリパラメータとして追加されます。
* <a href="../amazon-pay-paymentmethodonfile/checkout-session.md#type-paymentdetails" target="_blank" rel="noopener noreferrer">`paymentDetails`</a>を指定する必要があります：
    * `paymentIntent` - 購入者がAmazonの「今すぐ支払う」ボタンをクリックしたときの支払いアクション
    * `chargeAmount` - 決済金額(recurringMetadataを設定しない場合には必須)
* PaymentMethodOnFileとしてChargePermissionを利用する為に、`chargePermissionType`に"PaymentMethodOnFile" を設定します。
* 決済時に合わせてお支払い方法の設定を行うフローとするために、`paymentMethodOnFileMetadata`項目として`setupOnly = false`を設定します。
* 配送先住所が必要な物販でのトランザクションの場合は、`productType`をPayAndShipに設定します。デジタル商材の場合、`productType`をPayOnlyに設定します。
* `productType`がPayAndShipの場合は、購入者から提供された配送先住所を`addressDetails`に設定する必要があります。アドレスデータを渡す方法の詳細については、<a href="../amazon-pay-checkout/address-formatting-and-validation.md" target="_blank" rel="noopener noreferrer">アドレスのフォーマットと検証</a>を参照してください。
* `scopes`パラメータを使用して、決済を完了するために必要な購入者情報を指定します。この値を設定した場合、請求先住所など追加で取得できます。
* もし定期商材が含まれている場合は、`recurringMetadata.frequency`を設定することで、購入者の信頼性を高めることができます。もしこのステップで値を設定しない場合は、購入者が決済を完了する前までに値を設定する必要があります。Amazon Payは、提供された値を使用して、購入者とのコミュニケーションに用います。定期商材への請求を行うためには、事業者がCreate Chargeを呼び出して、請求サイクルごとに購入者に請求する必要があります。

**オプションのインテグレーション手順:**
* `merchantMetadata`パラメータを使用して、このトランザクションに追加の注文詳細を設定できます。
* (EU/UKのみ)`presentmentCurrency`パラメータを使用して、 他の<a href="../amazon-pay-checkout/multi-currency-integration.md#supported-currencies" target="_blank" rel="noopener noreferrer">サポートされている通貨</a>を使用して購入者に請求できます。詳細については、<a href="../amazon-pay-checkout/multi-currency-integration.md" target="_blank" rel="noopener noreferrer">こちら</a>を参照してください。

#### ペイロードの例(任意のタイミングで請求する商材が存在する場合)

```
{
    "webCheckoutDetails": {
        "checkoutResultReturnUrl": "https://a.com/merchant-review-page",
        "checkoutMode": "ProcessOrder"
    },
    "storeId": "amzn1.application-oa2-client.8b5e45312b5248b69eeaStoreId",
    "scopes": ["name", "email", "phoneNumber", "billingAddress"],
    "chargePermissionType": "PaymentMethodOnFile",
    "paymentMethodOnFileMetadata": {
        "setupOnly": false,
    },  
    "paymentDetails": {
        "paymentIntent": "AuthorizeWithCapture",
        "chargeAmount": {
            "amount": "10",
            "currencyCode": "USD"
        },
        "presentmentCurrency":"USD"
    },
    "merchantMetadata": {
        "merchantReferenceId":"Merchant-order-123",
        "merchantStoreName":"Merchant Store Name",
        "noteToBuyer":"Thank you for your order"
    },
    "addressDetails": {
        "name": "Paul Smith",
        "addressLine1": "9999 First Avenue",
        "city": "New York",
        "stateOrRegion": "NY",
        "postalCode": "10016",
        "countryCode": "US",
        "phoneNumber": "212555555"
    }
}
```

#### ペイロードの例(定期商材が存在する場合)

```
{
    "webCheckoutDetails": {
        "checkoutResultReturnUrl": "https://a.com/merchant-review-page",
        "checkoutMode": "ProcessOrder"
    },
    "storeId": "amzn1.application-oa2-client.8b5e45312b5248b69eeaStoreId",
    "scopes": ["name", "email", "phoneNumber", "billingAddress"],
    "chargePermissionType": "PaymentMethodOnFile",
    "paymentMethodOnFileMetadata": {
        "setupOnly": false,
    },
    "recurringMetadata": {
        "frequency": { 
            "unit": "Month", 
            "value": "1" 
        },
        "amount": { 
            "amount": "30",
            "currencyCode": "USD"
        }
    },     
    "paymentDetails": {
        "paymentIntent": "AuthorizeWithCapture",
        "presentmentCurrency":"USD"
    },
    "merchantMetadata": {
        "merchantReferenceId":"Merchant-order-123",
        "merchantStoreName":"Merchant Store Name",
        "noteToBuyer":"Thank you for your order"
    },
    "addressDetails": {
        "name": "Paul Smith",
        "addressLine1": "9999 First Avenue",
        "city": "New York",
        "stateOrRegion": "NY",
        "postalCode": "10016",
        "countryCode": "US",
        "phoneNumber": "212555555"
    }
}
```

#### ペイロードの例(任意のタイミングで請求する商材と定期商材が存在する場合)
* 任意のタイミングで請求する商材の金額は、`chargeAmount`項目に設定してください。
* 初回の定期商材の請求金額も含めて、`chargeAmount`に設定した場合は、事業者は初回請求時の為の<a href="../amazon-pay-paymentmethodonfile/charge.md#create-charge" target="_blank" rel="noopener noreferrer">Create Charge</a>をスキップすることができます。
* 定期商材への請求を行うためには、事業者は<a href="../amazon-pay-paymentmethodonfile/charge.md#create-charge" target="_blank" rel="noopener noreferrer">Create Charge</a>を呼び出して、請求サイクルごとに購入者に請求する必要があります。

```
{
    "webCheckoutDetails": {
        "checkoutResultReturnUrl": "https://a.com/merchant-review-page",
        "checkoutMode": "ProcessOrder"
    },
    "storeId": "amzn1.application-oa2-client.8b5e45312b5248b69eeaStoreId",
    "scopes": ["name", "email", "phoneNumber", "billingAddress"],
    "chargePermissionType": "PaymentMethodOnFile",
    "paymentMethodOnFileMetadata": {
        "setupOnly": false,
    },
    "recurringMetadata": {
        "frequency": { 
            "unit": "Month", 
            "value": "1" 
        },
        "amount": { 
            "amount": "30",
            "currencyCode": "USD"
        }
    },     
    "paymentDetails": {
        "paymentIntent": "AuthorizeWithCapture",
        "chargeAmount": {
            "amount": "10",
            "currencyCode": "USD"
        },
        "presentmentCurrency":"USD"
    },
    "merchantMetadata": {
        "merchantReferenceId":"Merchant-order-123",
        "merchantStoreName":"Merchant Store Name",
        "noteToBuyer":"Thank you for your order"
    },
    "addressDetails": {
        "name": "Paul Smith",
        "addressLine1": "9999 First Avenue",
        "city": "New York",
        "stateOrRegion": "NY",
        "postalCode": "10016",
        "countryCode": "US",
        "phoneNumber": "212555555"
    }
}
```

<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-paymentmethodonfile/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;">Checkout
                Sessionに関連付けられたURLは、決済を完了するために使用されます。
                URLはHTTPSプロトコルを使用する必要があります<br><br><code>checkoutMode</code>を使用して、購入者が決済を完了する前に注文を確認するためにWebサイトに戻るかどうかを指定します<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 StoreID。 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>
            <td style="vertical-align: top;">scopes<br><br>Type: list &lt;scope&gt;
                <br></td>
            <td style="text-align: left;vertical-align: top;">Body
                <br></td>
            <td style="vertical-align: top;">必要となる購入者情報詳細を指定します。<br><br>サポートされている値:
                    <ul>
                      <li>'name' - 名前</li>
                      <li>'email' - メールアドレス</li>
                      <li>'phoneNumber' - 既定の請求先住所の電話番号</li>
                      <li>'billingAddress' - 既定の請求先住所</li>
                    </ul>
            デフォルト値: <code>scopes</code>パラメータが設定されていない場合、請求先住所以外のすべての購入者情報をリクエストしたことになります
                <br></td>
        </tr>
        <tr>
            <td style="vertical-align: top;"> chargePermissionType<br><br>Type: string<br></td>
            <td style="text-align: left;vertical-align: top;">Body<br></td>
            <td style="vertical-align: top;">要求されたCharge Permissionタイプ<br><br>サポートされている値：<ul>
                    <li>'OneTime'  - Charge Permissionは1回の注文に使用できます</li>
                    <li>'Recurring' - Charge Permissionは定期的な注文に使用できます</li>
                    <li>'PaymentMethodOnFile' - Charge Permissionは、お支払い方法設定での(不定期な課金を伴う)注文に使用できます</li>               
                </ul><br><br>デフォルト値： 'OneTime'<br></td>
        </tr>
        <tr>
            <td style='vertical-align: top;'>paymentDetails<br> <br>Type: <a href="../amazon-pay-paymentmethodonfile/checkout-session.md#type-paymentdetails" target="_blank" rel="noopener noreferrer">paymentDetails</a><br></td>
            <td style='text-align: left;vertical-align: top;'>Body<br></td>
            <td style='vertical-align: top;'><code>paymentIntent</code>や購入者への請求金額など、事業者が指定する支払い内容の情報。<br></td>
        </tr>
        <tr id=''>
            <td id='' style='vertical-align: top;'>merchantMetadata<br><br>Type: <a href="../amazon-pay-paymentmethodonfile/checkout-session.md#type-merchantmetadata" target="_blank" rel="noopener noreferrer">merchantMetadata</a>
                <br /></td>
            <td id='' style='vertical-align: top;'>Body
                <br /></td>
            <td id='' style='vertical-align: top;'>事業者が提供する注文の詳細情報
                <br /></td>
        </tr>
        <tr>
            <td style="vertical-align: top;">addressDetails<br> <br>Type:  <a
                    href="../amazon-pay-paymentmethodonfile/checkout-session.md#type-addressdetails" target="_blank"
                    rel="noopener noreferrer">addressDetail</a><br></td>
            <td style="vertical-align: top;">Body<br></td>
            <td style="vertical-align: top;">購入者が入力した配送先住所。このパラメータは、 <code>checkoutMode</code>がProcessOrderで
                <code>productType</code>がPayAndShipの場合にのみ使用してください。<br></td>
        </tr>
        <tr id=''>
            <td id='' style='vertical-align: top;'>paymentMethodOnFileMetadata<br /><br />Type: <a href="../amazon-pay-paymentmethodonfile/checkout-session.md#type-paymentmethodonfilemetadata" target="_blank" rel="noopener noreferrer">paymentMethodOnFileMetadata</a>
                <br /></td>
            <td id='' style='text-align: left;vertical-align: top;'>Body
                <br /></td>
            <td id='' style='vertical-align: top;'>ChargePermissionをPaymentMethodOnFileの中でどのように利用するかを示す詳細情報。Amazon Payは、PaymentMethodOnFileとして処理を行うのに必要な情報を判別する為にこの情報を利用します。
                <br /></td>
        </tr>
        <tr id=''>
            <td id='' style='vertical-align: top;'>recurringMetadata<br /><br />Type: <a href="../amazon-pay-paymentmethodonfile/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は、この情報を購入者とのコミュニケーションにのみ使用します。
                <br /></td>
        </tr>
    </tbody>
</table>

***

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

署名を使用してペイロードを保護する必要があります。ペイロードにはタイムスタンプが含まれていないため、ペイロードが変更されない限り、署名を再利用できます。ペイロードを変更する必要があり、ボタンの署名が動的である場合は、ボタンの再レンダリングを回避するために、決済の初期化から<a href="../amazon-pay-checkout/amazon-pay-script.md#decoupling-button-render-and-checkout-initiation" 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":{"checkoutResultReturnUrl":"https://example.com/review.html"},"chargePermissionType":"PaymentMethodOnFile","paymentMethodOnFileMetadata":{"setupOnly": false}, "paymentDetails": {"paymentIntent": "AuthorizeWithCapture", "canHandlePendingAuthorization": false}}';
    $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
(
    checkoutResultReturnUrl: "https://example.com/review.html",
    storeId: "amzn1.application-oa2-client.xxxxx"
);

rvequest.ChargePermissionType = ChargePermissionType.PaymentMethodOnFile;
request.PaymentMethodOnFileMetadata.SetupOnly = false;
request.PaymentDetails.PaymentIntent = PaymentIntent.AuthorizeWithCapture;
request.PaymentDetails.CanHandlePendingAuthorization = false;

// 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\":{\"checkoutResultReturnUrl\":\"https://example.com/review.html\"},\"chargePermissionType\":\"PaymentMethodOnFile\",\"paymentMethodOnFileMetadata\":{\"setupOnly\": false}, \"paymentDetails\": {\"paymentIntent\": \"AuthorizeWithCapture\", \"canHandlePendingAuthorization\": false}}";
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": {
        "checkoutResultReturnUrl": "https://example.com/review.html"
    },
    "storeId": "amzn1.application-oa2-client.xxxxx",
    "chargePermissionType": "PaymentMethodOnFile",   
    "paymentMethodOnFileMetadata": {
        "setupOnly": false
    },
    "paymentDetails": {
        "paymentIntent": "AuthorizeWithCapture",
        "canHandlePendingAuthorization": false
    }
};
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#responsive-button-logic" 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: 'Checkout',
            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: 'Checkout',
            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: 'Checkout',
            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: 'Checkout',
            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: 'Checkout',
            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: 'Checkout',
            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: 'Checkout',
            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: 'Checkout',
            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="get-set-up-for-integration.html#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を構成します。 PayAndShipまたはPayOnly<code>productType</code> を使用する場合、これは必須フィールドです。</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;">
                決済用に選択されたproductType<br><br>サポートされている値：<br>
                <ul>
                    <li>'PayAndShip' - 物販の場合は、'PayAndShip'を選択します。ボタンのペイロードで購入者の配送先住所を渡す必要があります</li>
                    <li>'PayOnly' - デジタル商品を販売している場合は'PayOnly'を選択します</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>
            <td style="vertical-align: top;"> buttonColor<br><br>Type: string<br></td>
            <td 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がホストするページでボタンとテキストをレンダリングするために使用される言語。サポートされている言語は、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>