ログイン
ログイン

Amazon Payボタンを追加する

[ステップ2/7] Amazon Payの決済エクスペリエンスは、購入者がAmazon Payボタンをクリックすると開始されます。標準の継続支払いの決済フローとは異なり、Amazon Payボタンをクリックした後、Amazon Payがホストするページ上で決済が完了します。

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

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. Checkout Sessionペイロードを生成します

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

ペイロードに購入者が決済を完了させるのに必要な全ての情報を設定します。

ボタンペイロード生成手順：

  • webCheckoutDetails.checkoutModeをProcessOrderに設定します。
  • Amazon Payでホストされているページで決済を完了した後、購入者がリダイレクトされるURLとしてcheckoutResultReturnUrlを設定します。CheckoutSession IDはクエリパラメータとして追加されます。
  • paymentDetailsを指定する必要があります：
    • paymentIntent - 購入者がAmazonの「今すぐ支払う」ボタンをクリックしたときの支払いアクション
    • chargeAmount - 決済金額
  • 配送先住所が必要な物販でのトランザクションの場合は、productTypeをPayAndShipに設定します。デジタル商材の場合、productTypeをPayOnlyに設定します。
  • productTypeがPayAndShipの場合は、購入者から提供された配送先住所をaddressDetailsに設定する必要があります。アドレスデータを渡す方法の詳細については、アドレスのフォーマットと検証を参照してください。
  • recurringMetadata.frequencyを設定することで、購入者の信頼性を高めることができます。Amazon Payは、提供された値を使用して、Charge Permissionの有効期限を計算し、購入者とのコミュニケーションに用います。事業者はCreate Chargeを呼び出して、請求サイクルごとに購入者に請求する必要があります。
  • scopesパラメータを使用して、決済を完了するために必要な購入者情報を指定します。この値を設定した場合、請求先住所など追加で取得できます。

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

  • merchantMetadataパラメータを使用して、このトランザクションに追加の注文詳細を設定できます。
  • (EU/UKのみ)presentmentCurrencyパラメータを使用して、 他のサポートされている通貨を使用して購入者に請求できます。詳細については、こちらを参照してください。

ペイロードの例

{
    "webCheckoutDetails": {
        "checkoutResultReturnUrl": "https://a.com/merchant-review-page",
        "checkoutMode": "ProcessOrder"
    },
    "storeId": "amzn1.application-oa2-client.8b5e45312b5248b69eeaStoreId",
    "scopes": ["name", "email", "phoneNumber", "billingAddress"],
    "paymentDetails": {
        "paymentIntent": "AuthorizeWithCapture",
        "chargeAmount": {
            "amount": "10",
            "currencyCode": "USD"
        },
        "presentmentCurrency":"USD"
    },
    "recurringMetadata": {
        "frequency": { 
            "unit": "Month", 
            "value": "1" 
        },
        "amount": { 
            "amount": "10",
            "currencyCode": "USD"
        }
    },
    "merchantMetadata": {
        "merchantReferenceId":"Merchant-order-123",
        "merchantStoreName":"Merchant Store Name",
        "noteToBuyer":"Thank you for your order"
    }
}
名前
ロケーション
説明
webCheckoutDetails
(必須)

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

checkoutModeを使用して、購入者が決済を完了する前に注文を確認するためにWebサイトに戻るかどうかを指定します
storeId
(必須)

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

Type: list <scope>
Body
必要となる購入者情報詳細を指定します。

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

Type: string
Body
要求されたCharge Permissionタイプ

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

Type: recurringMetadata
Body
RecurringのChargePermissionの使用方法に関するメタデータ。 Amazon Payは、この情報をChargePermissionの有効期限を計算と、購入者とのコミュニケーションにのみ使用します

各請求サイクルで購入者に請求するためにCreate Chargeを呼び出すのは、依然として事業者の責任であることに注意してください。
paymentDetails

Type: paymentDetails
Body
paymentIntentや購入者への請求金額など、事業者が指定する支払い内容の情報。
merchantMetadata

Type: merchantMetadata
Body
事業者が提供する注文の詳細情報
addressDetails

Type: addressDetails
Body
購入者が入力した配送先住所。このパラメータは、checkoutModeがProcessOrderでproductTypeがPayAndShipの場合にのみ使用してください。

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":{"checkoutResultReturnUrl":"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";
?>

Source code

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"
);

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

Source code

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\":\"Recurring\",\"recurringMetadata\":{\"frequency\":{\"unit\":\"Month\",\"value\":\"1\"},\"amount\":{\"amount\":\"30\",\"currencyCode\":\"USD\"}}}";
String signature = client.generateButtonSignature(payload);

Source code

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": "Recurring",   
    "recurringMetadata": {
        "frequency": { 
            "unit": "Month", 
            "value": "1" 
        },
        "amount": { 
            "amount": "30",
            "currencyCode": "USD"
        }
    }
};
const signature = testPayClient.generateButtonSignature(payload);

Source code

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

4. ボタンをレンダーします

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

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

コードサンプル

関数パラメータ

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

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

Type: buttonConfig
Checkout Sessionを構成します。 PayAndShipまたはPayOnlyproductTypeを使用する場合、これは必須フィールドです。
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
決済用に選択されたproductType

サポートされている値:
  • 'PayAndShip' - 物販の場合は、'PayAndShip'を選択します。ボタンのペイロードで購入者の配送先住所を渡す必要があります
  • 'PayOnly' - デジタル商品を販売している場合は'PayOnly'を選択します
  • 'SignIn' - サインイン機能を提供します。購入者がAmazon Payの決済を開始する前に購入者の詳細情報が必要な場合は、このproduct typeを選択してください。詳細については、Amazonサインインを参照してください。
デフォルト値: 'PayAndShip'
buttonColor

Type: string
Amazon Payボタンの色

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

Type: string
Amazon Payがホストするページでボタンとテキストをレンダリングするために使用される言語。サポートされている言語は、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