--- title: Amazon Payスクリプト url: ja/amazon-pay-checkout/ja-amazon-pay-script.html --- * TOC {:toc} {::options toc_levels="3" /} *** ### Amazon Payスクリプト Amazon PayスクリプトをHTMLファイルに追加して、ウェブサイトでフロントエンド機能を有効にします。

```html ```

*** ### Amazon Payボタンをレンダリングする amazon.Pay.renderButton()を使用して、 Amazon Payの決済ボタンとサインインボタンをHTMLコンテナ要素にレンダリングします。 #### Amazon Pay決済のコードサンプル #### Amazonサインインのコードサンプル #### パラメータ

パラメータ	説明
merchantId (必須) Type: string	Amazon Pay事業者アカウントID
createCheckoutSessionConfig (必須) Type: buttonConfig	Create Checkout Session構成を作成します。`productType`にPayAndShipかPayOnlyを使用する場合は、必須です。
signInConfig (必須) Type: buttonConfig	Amazon Sign-in構成を作成します。`productType`にSignInを使用する場合は、必須です。
placement (必須) Type: string	ウェブサイトへのAmazon Payボタンの配置場所サポートされている値: ‘Home’, ‘Product’, ‘Cart’, ‘Checkout’, and 'Other'
publicKeyId (必須) Type: string	Amazon Payより提供されたクレデンシャル。詳細はGet you publicKeyIdを参照してください。 `publicKeyId`にの先頭に環境名が付与されていない場合 (付与されている例: SANDBOX-AFVX7ULWSGBZ5535PCUQOY7B)場合は、`sandbox`パラメーターを設定する必要があります。
ledgerCurrency (必須) Type: string	特定の事業者IDの登録時に提供される通貨サポートされている値: US事業者 - 'USD' EU事業者 - 'EUR' UK事業者 - 'GBP' JP事業者 - 'JPY'
productType Type: string	決済用に選択された製品の種類サポートされている値: 'PayAndShip' - 購入者のAmazon支払い方法と配送先を使用して決済を提供します。購入者の配送の詳細が必要な場合は、このproduct typeを選択してください。 'PayOnly' - 購入者のAmazon支払い方法のみを使用して決済を提供します。購入者の配送の詳細が必要ない場合は、このproduct typeを選択してください。 'SignIn' - Amazon Sign-inを提供します。購入者がAmazonPayの決済を開始する前に購入購入者の詳細が必要な場合は、このproduct typeを選択してください。詳細については、Amazon Sign-inを参照してください。デフォルト値: 'PayAndShip'
buttonColor Type: string	Amazon Payボタンの色サポートされている値: 'Gold', 'LightGray', 'DarkGray' デフォルト値: 'Gold'
checkoutLanguage Type: string	Amazon Payがホストするページでボタンとテキストをレンダリングするために使用される言語。サポートされている言語は、AmazonPayアカウントが登録されているリージョンによって異なることに注意してくださいサポートされている値: US事業者 - 'en_US' EU/UK事業者 - 'en_GB', 'de_DE', 'fr_FR', 'it_IT', 'es_ES' JP事業者 - 'ja_JP'
sandbox Type: boolean	ボタンをSANDBOX環境に設定します。デフォルト値: false

#### Type: buttonConfig

パラメータ	説明
payloadJSON (必須) Type: string	`createCheckoutSessionConfig`の場合、この値を使用してCheckoutSessionオブジェクトを作成します。これは、Create Checkout Sessionのリクエストbodyと同じです。 `signInConfig`の場合、Amazon Payはこの値を使用して、共有する購入者の詳細と、サインイン後に購入者をリダイレクトする場所を決定します。
signature (必須) Type: string	要求者のIDを確認し、転送中にデータを保護するために使用される文字列
publicKeyId (必須) Type: string	Amazon Payによって提供されるクレデンシャル。詳細については、Public Key IDを取得するを参照してください。

*** ### デカップリングボタンのレンダリングと、決済またはサインインの開始 Amazon Payのボタンクリックイベントを制御する必要がある場合は、ボタンのレンダリングアクションと決済またはサインインの開始を切り離すことができます。amazon.Pay.renderButton()をボタンのレンダリングに、amazonPayButton.initCheckout()をAmazon Pay決済の開始に使用してください。 #### AmazonPay決済のコードサンプル

```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({ createCheckoutSessionConfig: { payloadJSON: 'payload', signature: 'xxxx', publicKeyId: 'xxxxxxxxxx' } }); }); ```

```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({ createCheckoutSessionConfig: { payloadJSON: 'payload', signature: 'xxxx', publicKeyId: 'xxxxxxxxxx' } }); }); ```

```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({ createCheckoutSessionConfig: { payloadJSON: 'payload', signature: 'xxxx', publicKeyId: 'xxxxxxxxxx' } }); }); ```

```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', publicKeyId: 'xxxxxxxxxx' } }); }); ```

```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({ createCheckoutSessionConfig: { payloadJSON: 'payload', signature: 'xxxx', publicKeyId: 'xxxxxxxxxx' } }); }); ```

```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({ createCheckoutSessionConfig: { payloadJSON: 'payload', signature: 'xxxx', publicKeyId: 'xxxxxxxxxx' } }); }); ```

```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({ createCheckoutSessionConfig: { payloadJSON: 'payload', signature: 'xxxx', publicKeyId: 'xxxxxxxxxx' } }); }); ```

```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', publicKeyId: 'xxxxxxxxxx' } }); }); ```

#### Amazonサインインのコードサンプル

```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', publicKeyId: 'xxxxxxxxxx' } }); }); ```

```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', publicKeyId: 'xxxxxxxxxx' } }); }); ```

```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', publicKeyId: 'xxxxxxxxxx' } }); }); ```

```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', publicKeyId: 'xxxxxxxxxx' } }); }); ```

```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', publicKeyId: 'xxxxxxxxxx' } }); }); ```

```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', publicKeyId: 'xxxxxxxxxx' } }); }); ```

```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', publicKeyId: 'xxxxxxxxxx' } }); }); ```

```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', publicKeyId: 'xxxxxxxxxx' } }); }); ```

*** ### CheckoutSessionオブジェクトを使用したレンダリングボタン Note: Amazon Payボタンをレンダリングするの指示に従う必要があります。 Amazon Payは、バックエンドで生成したCheckoutSessionオブジェクトを使用したボタンのレンダリングを引き続きサポートしますが、AdditionalPaymentButton(今すぐ支払う)などの新機能は利用できません。 Amazon PayがCheckoutSessionオブジェクトの作成に使用するpayloadを生成する代わりに、Create Checkout Sessionを呼び出すエンドポイントをサーバーに設定することもできます。ボタンのレンダリングコードでそのエンドポイントを設定すると、Amazon Payスクリプトは、ボタンがクリックされるたびにそのURLにリクエストをPOSTします。エンドポイントのレスポンスはJSON形式である必要があります。 Create Checkout Sessionレスポンス全体を返すか、 `checkoutSessionId`キーを含むレスポンスを返すことができます。例：{"checkoutSessionId"： "116e5701-a0bf-49f2-a63d-000000000000"}。 #### コードサンプル ```html

``` *** ### レスポンシブボタンロジック Amazon Payボタンはレスポンシブで、次のロジックに従ってコンテナ要素のサイズを継承します。 * heightまたはwidthが指定されていない場合、ボタンコンテナはデフォルトで200px x45pxになります。 * widthのみを指定した場合、ボタンコンテナのheightは45pxに設定されます。指定されたwidthは150pxから500pxの間である必要があります。そうでない場合、コンテナのwidthはサポートされている最も近い値に変更されます。 * heightのみを指定した場合、ボタンコンテナのwidthは500pxに設定されます。指定されたheightは45pxから192pxの間である必要があります。そうでない場合、コンテナのheightはサポートされている最も近い値に変更されます。 * heightとwidthの両方が指定されている場合、ボタンコンテナは次の条件を満たすようにサイズ変更されます。 * コンテナのwidthは150pxから500pxの間でなければなりません。指定されたwidthがこれらの制限を超えている場合、コンテナのwidthはサポートされている最も近い値に変更されます。 * コンテナのheightは45pxから192pxの間でなければなりません。指定されたheightがこれらの制限を超えている場合、コンテナのheightはサポートされている最も近い値に変更されます。 * コンテナのheight：widthの比率は1:10から1：2.6の間でなければなりません。比率がこれらの制限を超えている場合、コンテナーのwidthは指定されたvalueに設定され、コンテナーのheightはサポートされている比率の値に調整されます。 *** ### 決済情報の更新を有効にする購入者が別の配送先住所または支払い方法を選択したい場合に備えて、 amazon.Pay.bindChangeAction()を使用して更新を有効にします。 #### コードサンプル ```html ``` #### パラメータ

パラメータ	説明
amazonCheckoutSessionId (必須) Type: string	Amazon Pay Checkout Session識別子
changeAction (必須) Type: string	購入者の更新要求サポートされている値: 'changeAddress', 'changePayment'

*** ### サインアウト amazon.Pay.signout()を使用して、Amazonアカウントからサインアウトするオプションを購入者に提供します。 **ベストプラクティス:** 購入者が決済を完了した後にサインアウトするオプションを提供します。注文確認ページの「Amazonからサインアウト」リンクに関数をバインドします。 #### コードサンプル ``` ```