ログイン
ログイン

Amazon Payボタンを追加する

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

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

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

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

<script src="https://static-na.payments-amazon.com/checkout.js"></script>

<script src="https://static-eu.payments-amazon.com/checkout.js"></script>

<script src="https://static-fe.payments-amazon.com/checkout.js"></script>

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

Amazon Payボタンをレンダリングするには、 Amazon PayがCheckoutSessionオブジェクトを作成するために使用するペイロードを提供する必要があります。CheckoutSessionオブジェクトを使用して、Webサイトでの購入者のアクティブなセッションを管理します。

ボタンペイロードを生成するための手順:

  • checkoutReviewReturnUrlパラメータに、購入者が希望の配送先住所と支払い方法を選択した後にリダイレクトされるURLを設定します。CheckoutSession IDはクエリパラメータとして追加されます。
  • scopesパラメータを使用して、決済を完了するために必要な購入者情報を指定します。この値を設定した場合、請求先住所など追加で取得できます。

オプションのインテグレーション手順:

  • deliverySpecifications パラメータを使用して、住所制限を指定し、購入者がAmazon Hosted Pageのお届け先からサポートされていない住所を選択できないようにします。 一般的なユースケースの処理のついては、アドレス制限のサンプルを参照してください。
  • (EU/UKのみ)presentmentCurrency パラメータを使用して、 他のサポートされている通貨を使用して購入者に請求できます。詳細については、こちら を参照してください。

ペイロード の例

{
    "webCheckoutDetails": {
        "checkoutReviewReturnUrl": "https://a.com/merchant-review-page"
    },
    "storeId": "amzn1.application-oa2-client.8b5e45312b5248b69eeaStoreId",
    "scopes": ["name", "email", "phoneNumber", "billingAddress"],
    "deliverySpecifications": {
        "specialRestrictions": ["RestrictPOBoxes"],
        "addressRestrictions": {
            "type": "Allowed",
            "restrictions": {
                "US": {
                    "statesOrRegions": ["WA"],
                    "zipCodes": ["95050", "93405"]
                },
                "GB": {
                    "zipCodes": ["72046", "72047"]
                },
                "IN": {
                    "statesOrRegions": ["AP"]
                },
                "JP": {}
            }
        }
    }
}
名前
ロケーション
説明
webCheckoutDetails
(必須)

Type: webCheckoutDetails
Body
決済を完了するために使用されるCheckoutSessionに関連付けられたURL。 URLはHTTPSプロトコルを使用する必要があります
storeId
(必須)

Type: string
Body
Amazon Pay Store ID。 Amazon Pay インテグレーションセントラルからこの値を取得します: US, EU, JP
scopes

Type: list <scope>
Body
リクエストする購入者の詳細情報。手順4のボタンパラメータproductTypeを使用して、配送先住所が必要かどうかを指定します。

サポートされている値:
  • 'name' - 購入者の氏名
  • 'email' - 購入者のメールアドレス
  • 'phoneNumber' - 既定の請求先住所に紐づく電話番号
  • 'billingAddress' - 既定の請求先住所
デフォルト値: scopesパラメータが設定されていない場合、請求先住所以外のすべての購入者情報をリクエストしたことになります
chargePermissionType

Type: string
Body
リクエストされたCharge PermissionのType

サポートされている値:
  • 'OneTime' - このCharge Permissionは単発の注文に使用できます
  • 'Recurring' - このCharge Permissionは定期的な注文に使用できます
デフォルト値: 'OneTime'
deliverySpecifications

Type: deliverySpecifications
Body
配送先の制限を指定して、購入者がAmazonアドレス帳からサポートされていないアドレスを選択できないようにします

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

署名を使用してペイロードを保護する必要があります。ペイロードにはタイムスタンプが含まれていないため、ペイロードが変更されない限り、署名を再利用できます。ペイロードを変更する必要があり、ボタンの署名が動的である場合は、ボタンの再レンダリングを回避するために、決済の初期化からボタンのレンダリングを切り離す 必要があります。

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

<?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"}}';
    $signature = $client->generateButtonSignature($payload);
    echo $signature . "\n";
?>

ソースコード

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.Onetime;

// 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();

ソースコード

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.xxxxx\",\"webCheckoutDetails\":{\"checkoutReviewReturnUrl\":\"https://example.com/review.html\"}}";
String signature = client.generateButtonSignature(payload);

ソースコード

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'
};
const signature = testPayClient.generateButtonSignature(payload);

ソースコード

オプション2: 署名リクエストガイドのステップ2と3に従って、手動で署名を作成します。

4. ボタンのレンダー

前の2つの手順の値を使用して、Amazon PayボタンをHTMLコンテナ要素にレンダリングします。ボタンはレスポンシブになり、コンテナ要素のサイズを継承します。詳細については、レスポンシブボタンのロジック を参照してください。

以下のサンプルコードは、ボタンをクリックするとすぐにAmazon Payの決済を開始します。クリックイベントの制御が必要な場合は、ボタンのレンダリングと決済の開始を切り離すことができます。詳細については、 Amazon Payスクリプトを参照してください。

コードサンプル

関数パラメータ

パラメータ
説明
merchantId
(必須)

Type: string
Amazon Pay 事業者アカウント識別子
createCheckoutSessionConfig
(必須)

Type: buttonConfig
Checkout Session構成を作成します。productTypeをPayAndShipかPayOnlyで利用する場合、これは必須フィールドです
placement
(必須)

Type: string
ウェブサイトへのAmazon Payボタンの配置場所

サポートされている値:
  • 'Home' - 初期ページまたはメインページ
  • 'Product' - 商品詳細ページ
  • 'Cart' - 購入者が決済を開始する前のカート確認ページ
  • 'Checkout' - 購入者が決済を開始した後の任意のページ
  • 'Other' - 上記説明に当てはまらないページ
ledgerCurrency
(必須)

Type: string
指定された出品者IDの登録時に提供された通貨

サポートされている値:
  • US事業者 - 'USD'
  • EU事業者 - 'EUR'
  • UK事業者 - 'GBP'
  • JP事業者 - 'JPY'
productType

Type: string
決済用に選択されたProduct type

サポートされている値:
  • 'PayAndShip' - 購入者のお届け先と支払い方法を使用した決済を提供します。購入者のお届け先情報が必要な場合は、このproduct typeを選択してください
  • 'PayOnly' - 購入者の支払い方法のみを使用した決済を提供します。購入者のお届け先情報が必要ない場合は、このproduct typeを選択してください
  • 'SignIn' - サインイン機能を提供します。購入者がAmazon Payの決済を開始する前に購入者の詳細情報が必要な場合は、このproduct typeを選択してください。詳細については、Amazon サインインを参照してください。
デフォルト値: 'PayAndShip'
buttonColor

Type: string
Amazon Payボタンの色

サポートされている値: 'Gold', 'LightGray', 'DarkGray'
デフォルト値: 'Gold'
checkoutLanguage

Type: string
Amazon Pay Hosted pageでボタンとテキストをレンダリングするために使用される言語。サポートされている言語は、Amazon Payアカウントの申し込みを行った地域によって異なることに注意してください。

サポートされている値: 
  • US事業者 - 'en_US'
  • EU/UK事業者 - 'en_GB', 'de_DE', 'fr_FR', 'it_IT', 'es_ES'
  • JP事業者 - 'ja_JP'
sandbox

Type: boolean
ボタンをSANDBOXに設定します

デフォルト値: false