イベントハンドラを提供する
[Step 3 of 7] 5つのイベントハンドラを定義し、ボタンのJavaScriptコードに登録することができます。イベントハンドラは、Amazon Payからカートレベルの詳細を受け取り、Amazon Payのチェックアウトページに表示します。
1. チェックアウトの初期化
購入者は支払い方法としてAmazon Payを選択することで、チェックアウトを開始します。Amazon Payは購入者を認証後に同意を取得して、デフォルトの配送先住所と支払い方法を返却します。この後、onInitCheckoutイベントハンドラ/javascriptコールバック関数が呼び出されます。
Amazon Payは要求されたスコープに基づいて、購入者の詳細を提供します。Amazon Payはカート情報（例：金額、税金、配送オプション、アイテムレベルの詳細）を期待します。サポートされる要素のリストはCartDetails Responseを参照してください。Amazon Payと共有した情報は、Amazon Payのホストするページに表示されます。
/** Invokes when initiated checkout and authenticated **/
onInitCheckout: async function (event) {
try {
// Perform your server-side request to fetch details
const cartDetails = await fetch("/your-server/initCheckout", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
data: JSON.stringify({
shippingAddress: event.shippingAddress,
scopes: event.scopes,
checkoutLanguage: event.checkoutLanguage,
}),
});
return {
totalBaseAmount: cartDetails.totalBaseAmount,
totalTaxAmount: cartDetails.totalTaxAmount,
totalShippingAmount: cartDetails.totalShippingAmount,
totalChargeAmount: cartDetails.totalChargeAmount,
totalOrderAmount: cartDetails.totalOrderAmount,
totalDiscountAmount: cartDetails.totalDiscountAmount,
lineItems: cartDetails.lineItems,
deliveryOptions: cartDetails.deliveryOptions,
};
} catch (err) {
// something went wrong with your server call
console.err(err);
return {
status: "error",
reasonCode: "unknownError",
};
}
};
onInitCheckout event input
| パラメータ
|
説明
|
| scopes Type: Scopes |
要求された範囲に基づいて共有される、固有の識別子、名前、Eメールなどの購入者に関する詳細。
|
| checkoutLanguage Type: string |
購入者が選択した言語。
|
| shippingAddress Type: Address |
購入者が選択した配送先住所。
|
{
"buyer": { // shared based on scope requested
"buyerId": "buyerId",
"name": "name-1",
"email": "name@amazon.com",
"phoneNumber": "800-000-0000"
},
"billingAddress": { // shared based on scope requested
"name": "Work",
"addressLine1": "440 Terry Ave",
"addressLine2": "",
"addressLine3": "",
"city": "Seattle",
"county": "King",
"district": "Seattle",
"stateOrRegion": "WA",
"postalCode": "98121",
"countryCode": "US",
"phoneNumber": "800-000-0000"
},
"shippingAddress": { // Null for PayOnly product type
"name": "Susie Smith",
"addressLine1": "10 Ditka Ave",
"addressLine2": "Suite 2500",
"addressLine3": null,
"city": "Chicago",
"county": null,
"district": null,
"stateOrRegion": "IL",
"postalCode": "60602",
"countryCode": "US",
"phoneNumber": "800-000-0000"
}
}
onInitCheckout handler output
{
"totalShippingAmount":{
"amount":"5",
"currencyCode":"USD"
},
"totalBaseAmount":{
"amount":"20",
"currencyCode":"USD"
},
"totalTaxAmount":{
"amount":"0.5",
"currencyCode":"USD"
},
"totalOrderAmount":{
"amount":"20.5",
"currencyCode":"USD"
},
"totalChargeAmount":{
"amount":"20.5",
"currencyCode":"USD"
},
"totalDiscountAmount":{
"amount":"5",
"currencyCode":"USD"
},
"lineItems":[
{
"id": "id-of-the-item",
"title":"item-title-1",
"variantTitle":"variant-title",
"quantity":"2",
"listPrice": {
"amount":"10",
"currencyCode":"USD"
},
"totalListPrice":{
"amount":"20",
"currencyCode":"USD"
}
}
],
"deliveryOptions":[{
"id":"abc_shipping-02-25.11",
"price":{
"amount":"5",
"currencyCode":"USD"
},
"shippingMethod":{
"shippingMethodName":"shipping-method-name",
"shippingMethodCode":"shipping-method-code"
},
"shippingEstimate":[{
"timeUnit":"HOUR",
"value":2
}],
"isDefault":true
}]
}
詳細は CartDetails をご参照ください。
onInitCheckout handler errors
提供されたデータの注文の受注ができない場合は、Amazon Payにエラー応答を返してください。
{
"status": "error",
"reasonCode": "shippingAddressInvalid"
}
| 理由コード
|
説明
|
| shippingAddressInvalid | 提供された配送先住所を受け入れることができない場合のエラー。購入者は別の住所を選択するように要求されます。 |
| unknownError | その他の場合のエラー。購入者には一般的なエラーメッセージが表示され、あなたのショップに戻るように要求されます。
|
2. 配送先住所の更新
購入者が配送希望住所を選択または変更すると、Amazon Payはこのイベントハンドラを呼び出します。
/** Invokes when customer has selected different shipping address **/
onShippingAddressSelection: async function (event) {
try {
// Perform your server-side request to fetch details
const cartDetails = await fetch("/your-server/addressUpdate", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
data: JSON.stringify({
shippingAddress: event.shippingAddress,
}),
});
return {
totalBaseAmount: cartDetails.totalBaseAmount,
totalTaxAmount: cartDetails.totalTaxAmount,
totalShippingAmount: cartDetails.totalShippingAmount,
totalChargeAmount: cartDetails.totalChargeAmount,
totalOrderAmount: cartDetails.totalOrderAmount,
totalDiscountAmount: cartDetails.totalDiscountAmount,
lineItems: cartDetails.lineItems,
deliveryOptions: cartDetails.deliveryOptions,
};
} catch (err) {
// something went wrong with your server call
console.err(err);
return {
status: "error",
reasonCode: "unknownError",
};
}
};
onShippingAddressSelection event input
| パラメータ
|
説明
|
| shippingAddress Type: Address |
購入者が選択した配送先住所。
|
{
"shippingAddress": {
"name": "Susie Smith",
"addressLine1": "10 Ditka Ave",
"addressLine2": "Suite 2500",
"addressLine3": null,
"city": "Chicago",
"county": null,
"district": null,
"stateOrRegion": "IL",
"postalCode": "60602",
"countryCode": "US",
}
}
onShippingAddressSelection handler output
{
"totalShippingAmount":{
"amount":"5",
"currencyCode":"USD"
},
"totalBaseAmount":{
"amount":"20",
"currencyCode":"USD"
},
"totalTaxAmount":{
"amount":"0.5",
"currencyCode":"USD"
},
"totalOrderAmount":{
"amount":"20.5",
"currencyCode":"USD"
},
"totalChargeAmount":{
"amount":"20.5",
"currencyCode":"USD"
},
"totalDiscountAmount":{
"amount":"5",
"currencyCode":"USD"
},
"lineItems":[
{
"id": "id-of-the-item",
"title":"item-title-1",
"variantTitle":"variant-title",
"quantity":"2",
"listPrice": {
"amount":"10",
"currencyCode":"USD"
},
"totalListPrice":{
"amount":"20",
"currencyCode":"USD"
}
}
],
"deliveryOptions":[{
"id":"abc_shipping-02-25.11",
"price":{
"amount":"5",
"currencyCode":"USD"
},
"shippingMethod":{
"shippingMethodName":"shipping-method-name",
"shippingMethodCode":"shipping-method-code"
},
"shippingEstimate":[{
"timeUnit":"HOUR",
"value":2
}],
"isDefault":true
}]
}
詳細は CartDetails をご参照ください。
onShippingAddressSelection handler errors
提供されたデータの注文の受注できない場合は、Amazon Payにエラー応答を返してください。
{
"status": "error",
"reasonCode": "shippingAddressInvalid"
}
| 理由コード
|
説明
|
| shippingAddressInvalid | 提供された配送先住所を受け入れることができない場合のエラー。購入者は別の住所を選択するように要求されます。 |
| unknownError | その他の場合のエラー。購入者には一般的なエラーメッセージが表示され、あなたのショップに戻るように要求されます。
|
3. 配送オプションの更新
購入者が希望する配送オプションを選択または変更すると、Amazon Payはこのイベントハンドラを呼び出します。
/** Invokes when customer has selected different shipping address **/
onDeliveryOptionSelection: async function (event) {
try {
// Perform your server-side request to fetch details
const cartDetails = await fetch("/your-server/deliveryOptionUpdate", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
data: JSON.stringify({
selectedDeliveryOption: {
id: event.deliveryOptions.id,
amount: event.deliveryOptions.amount,
displayName: event.deliveryOptions.displayName,
},
}),
});
return {
totalBaseAmount: cartDetails.totalBaseAmount,
totalTaxAmount: cartDetails.totalTaxAmount,
totalShippingAmount: cartDetails.totalShippingAmount,
totalChargeAmount: cartDetails.totalChargeAmount,
totalOrderAmount: cartDetails.totalOrderAmount,
totalDiscountAmount: cartDetails.totalDiscountAmount,
lineItems: cartDetails.lineItems, // optional
deliveryOptions: cartDetails.deliveryOptions, // optional
};
} catch (err) {
// something went wrong with your server call
console.err(err);
return {
status: "error",
reasonCode: "unknownError",
};
}
};
onDeliveryOptionSelection event input
| パラメータ
|
説明
|
| deliveryOptions Type: DeliveryOption (Event input) |
購入者が選択した配送オプション。
|
{
"deliveryOptions": {
"id": "do-2",
"displayName": "Option 2",
"amount": "5"
}
}
onDeliveryOptionSelection handler output
購入者が選択した配送オプションに基づいてカートの詳細を再計算することができます。配送オプションの選択に基づいて変更されたものはすべて返却してください。最低でも必要な金額欄は返却する必要があります。
{
"totalShippingAmount":{
"amount":"5",
"currencyCode":"USD"
},
"totalBaseAmount":{
"amount":"20",
"currencyCode":"USD"
},
"totalTaxAmount":{
"amount":"0.5",
"currencyCode":"USD"
},
"totalOrderAmount":{
"amount":"20.5",
"currencyCode":"USD"
},
"totalChargeAmount":{
"amount":"20.5",
"currencyCode":"USD"
},
"totalDiscountAmount":{
"amount":"5",
"currencyCode":"USD"
}
}
詳細は CartDetails をご参照ください。
onDeliveryOptionSelection handler errors
提供されたデータの注文の受注ができない場合は、Amazon Payにエラー応答を返してください。
{
"status": "error",
"reasonCode": "deliveryOptionInvalid"
}
| 理由コード
|
説明
|
| deliveryOptionInvalid | 提供された配送オプションを受け入れることはできません。購入者は別の配送オプションを選択するよう要求されます。 |
| unknownError | その他の場合のエラー。購入者には一般的なエラーメッセージが表示され、あなたのショップに戻るように要求されます。
|
4. チェックアウトを完了する
購入者が「注文を確定」をクリックしてチェックアウトを完了すると、Amazon Payはこのイベントハンドラを呼び出します。イベントからデータを受け取り、チェックアウトを完了するためにFinalize Checkout Session APIコールを実行する必要があります。
/** Invokes when customer has selected different shipping address **/
onCompleteCheckout: async function (event) {
try {
// Perform your server-side request to fetch details
const result = await fetch("/your-server/finalizeCheckout", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
data: JSON.stringify({
checkoutSessionId: event.amazonCheckoutSessionId,
billingAddress: event.billingAddress,
paymentDescriptor: event.paymentDescriptor,
}),
});
} catch (err) {
// something went wrong with your server call
console.err(err);
return {
status: "error",
reasonCode: "unknownError",
};
}
};
onCompleteCheckout event input
| パラメータ
|
説明
|
| amazonCheckoutSessionId Type: string |
Amazon Payの checkoutSessionId
|
| billingAddress Type: Address |
購入者の請求先住所
|
| paymentDescriptor Type: string |
購入者が選択したお支払い方法
|
| buyerAdditionalInfo Type: BuyerAdditionalInfo |
Buy Nowページで取得した追加購入者情報 (EU only)
|
{
"amazonCheckoutSessionId": "d0966c90-f8f6-4835-9129-1f743cf525bc",
"billingAddress": { // shared based on scope requested
"name": "Work",
"addressLine1": "440 Terry Ave",
"addressLine2": "",
"addressLine3": "",
"city": "Seattle",
"county": "King",
"district": "Seattle",
"stateOrRegion": "WA",
"postalCode": "98121",
"countryCode": "US",
"phoneNumber": "800-000-0000"
},
"paymentDescriptor": "Amazon Pay Visa (1111)"
}
onCompleteCheckout handler output
このコールバックにはoutputは必要ありません。Finalize Checkout Session API が成功した場合、バイヤーを確認ページにリダイレクトします。