ログイン
ログイン

Amazon Payボタンを追加する

[ステップ2/7] 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サイトでの購入者のアクティブなセッションを管理します。

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

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

  • Amazon Payでホストされているページで支払い方法を選択し保存した後、購入者がリダイレクトされるURLとしてcheckoutResultReturnUrlを設定します。CheckoutSession IDはクエリパラメータとして追加されます。
  • PaymentMethodOnFileとしてChargePermissionを利用する為に、 chargePermissionTypeにPaymentMethodOnFileを設定します。
  • お支払い方法設定のSetup Intentフローとするために、paymentMethodOnFileMetadata項目としてsetupOnly = trueを設定します。
  • お支払い方法設定のSetup Intentフローでは、決済トランザクションは処理しないので、paymentDetailsには必ずpaymentIntent = Confirmを設定します。
  • scopesパラメータを使用して、決済を完了するために必要な購入者情報を指定します。この値を設定した場合、請求先住所など追加で取得できます。

ペイロードの例

{
    "webCheckoutDetails": {
        "checkoutResultReturnUrl": "https://a.com/merchant-review-page"
    },
    "storeId": "amzn1.application-oa2-client.8b5e45312b5248b69eeaStoreId",
    "scopes": ["name", "email", "phoneNumber", "billingAddress"],
    "chargePermissionType": "PaymentMethodOnFile",   
    "paymentMethodOnFileMetadata": {
        "setupOnly": true
    }, 
    "paymentDetails": {
        "paymentIntent": "Confirm",
        "canHandlePendingAuthorization": false        
    }
}
名前
 ロケーション
 説明
webCheckoutDetails
（必須）

Type: webCheckoutDetails
 Body
 Checkout Sessionに関連付けられたURLは、お支払い方法の設定を完了するために使用されます。 URLはHTTPSプロトコルを使用する必要があります
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は定期的な注文に使用できます
  • 'PaymentMethodOnFile' - Charge Permissionは、お支払い方法設定での(不定期な課金を伴う)注文に使用できます


デフォルト値： 'OneTime'
paymentDetails

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

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

Type: paymentMethodOnFileMetadata
 Body
 ChargePermissionをPaymentMethodOnFileの中でどのように利用するかを示す詳細情報。Amazon PayはPaymentMethodOnFileとして処理を行うのに必要な情報を判別する為にこの情報を利用します。

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":"PaymentMethodOnFile","paymentMethodOnFileMetadata":{"setupOnly": true}, "paymentDetails": {"paymentIntent": "Confirm", "canHandlePendingAuthorization": false}}';
    $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
(
    checkoutResultReturnUrl: "https://example.com/review.html",
    storeId: "amzn1.application-oa2-client.xxxxx"
);

request.ChargePermissionType = ChargePermissionType.PaymentMethodOnFile;
request.PaymentMethodOnFileMetadata.SetupOnly = true;
request.PaymentDetails.PaymentIntent = PaymentIntent.Confirm;
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();

ソースコード

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\":{\"checkoutResultReturnUrl\":\"https://example.com/review.html\"},\"chargePermissionType\":\"PaymentMethodOnFile\",\"paymentMethodOnFileMetadata\":{\"setupOnly\": true}, \"paymentDetails\": {\"paymentIntent\": \"Confirm\", \"canHandlePendingAuthorization\": false}}";
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": {
        "checkoutResultReturnUrl": "https://example.com/review.html"
    },
    "storeId": "amzn1.application-oa2-client.xxxxx",
    "chargePermissionType": "PaymentMethodOnFile",   
    "paymentMethodOnFileMetadata": {
        "setupOnly": true
    },
    "paymentDetails": {
        "paymentIntent": "Confirm",
        "canHandlePendingAuthorization": false
    }
};
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を構成します。 PayAndShipまたはPayOnly productType を使用する場合、これは必須フィールドです。
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

サポートされている値：
  • 'PayOnly' - 購入者が選択したお支払い方法設定を提供します。`SetupOnly=true`は'PayOnly'しかサポートしていないため、必ずこの値を設定します
  • 'SignIn' - サインイン機能を提供します。購入者がAmazon Payの決済を開始する前に購入者の詳細情報が必要な場合は、このproduct typeを選択してください。詳細については、 Amazonサインインを参照してください。
デフォルト値： 'PayAndShip'(SetupOnly=trueではサポートしていません。必ず'PayOnly’をご設定下さい)
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