--- title: イベントハンドラを提供する url: ja/amazon-pay-buy-now-checkout/ja-provide-event-handlers.html --- **[Step 3 of 7]** 5つのイベントハンドラを定義し、ボタンのJavaScriptコードに登録することができます。イベントハンドラは、Amazon Payからカートレベルの詳細を受け取り、Amazon Payのチェックアウトページに表示します。 * onInitCheckout - チェックアウトを初期化するためのイベントハンドラ (必須) * onShippingAddressSelection - 配送先住所を更新するためのイベントハンドラ (任意) * onDeliveryOptionSelection - 購入者配送オプションを更新するためのイベントハンドラ (任意) * onCompleteCheckout - 完了すためのイベントハンドラ (必須) * onCancel - 決済をキャンセルするためのイベントハンドラ (必須) * TOC {:toc} {::options toc_levels="3" /} --- ### 1. チェックアウトの初期化購入者は支払い方法としてAmazon Payを選択することで、チェックアウトを開始します。Amazon Payは購入者を認証後に同意を取得して、デフォルトの配送先住所と支払い方法を返却します。この後、`onInitCheckout`イベントハンドラ/javascriptコールバック関数が呼び出されます。 Amazon Payは要求されたスコープに基づいて、購入者の詳細を提供します。Amazon Payはカート情報（例：金額、税金、配送オプション、アイテムレベルの詳細）を期待します。サポートされる要素のリストは[CartDetails Response](../amazon-pay-api-v2/buy-now-checkout.html#type-cartdetails)を参照してください。Amazon Payと共有した情報は、Amazon Payのホストするページに表示されます。 ```JavaScript /** 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	購入者が選択した配送先住所。

```JSON { "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 ```JSON { "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](../amazon-pay-api-v2/buy-now-checkout.html#type-cartdetails) をご参照ください。 #### onInitCheckout handler errors 提供されたデータの注文の受注ができない場合は、Amazon Payにエラー応答を返してください。 ```JSON { "status": "error", "reasonCode": "shippingAddressInvalid" } ```

理由コード	説明
shippingAddressInvalid	提供された配送先住所を受け入れることができない場合のエラー。購入者は別の住所を選択するように要求されます。
unknownError	その他の場合のエラー。購入者には一般的なエラーメッセージが表示され、あなたのショップに戻るように要求されます。

--- ### 2. 配送先住所の更新購入者が配送希望住所を選択または変更すると、Amazon Payはこのイベントハンドラを呼び出します。 ```JavaScript /** 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	購入者が選択した配送先住所。

```JSON { "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 ```JSON { "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](../amazon-pay-api-v2/buy-now-checkout.html#type-cartdetails) をご参照ください。 #### onShippingAddressSelection handler errors 提供されたデータの注文の受注できない場合は、Amazon Payにエラー応答を返してください。 ```JSON { "status": "error", "reasonCode": "shippingAddressInvalid" } ```

理由コード	説明
shippingAddressInvalid	提供された配送先住所を受け入れることができない場合のエラー。購入者は別の住所を選択するように要求されます。
unknownError	その他の場合のエラー。購入者には一般的なエラーメッセージが表示され、あなたのショップに戻るように要求されます。

--- ### 3. 配送オプションの更新購入者が希望する配送オプションを選択または変更すると、Amazon Payはこのイベントハンドラを呼び出します。 ```JavaScript /** 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)	購入者が選択した配送オプション。

```JSON { "deliveryOptions": { "id": "do-2", "displayName": "Option 2", "amount": "5" } } ``` #### onDeliveryOptionSelection handler output 購入者が選択した配送オプションに基づいてカートの詳細を再計算することができます。配送オプションの選択に基づいて変更されたものはすべて返却してください。最低でも必要な金額欄は返却する必要があります。 ```JSON { "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](../amazon-pay-api-v2/buy-now-checkout.html#type-cartdetails) をご参照ください。 #### onDeliveryOptionSelection handler errors 提供されたデータの注文の受注ができない場合は、Amazon Payにエラー応答を返してください。 ```JSON { "status": "error", "reasonCode": "deliveryOptionInvalid" } ```

理由コード	説明
deliveryOptionInvalid	提供された配送オプションを受け入れることはできません。購入者は別の配送オプションを選択するよう要求されます。
unknownError	その他の場合のエラー。購入者には一般的なエラーメッセージが表示され、あなたのショップに戻るように要求されます。

--- ### 4. チェックアウトを完了する購入者が「注文を確定」をクリックしてチェックアウトを完了すると、Amazon Payはこのイベントハンドラを呼び出します。イベントからデータを受け取り、チェックアウトを完了するために[Finalize Checkout Session](./verify-and-complete-checkout.html#finalize-checkout-session---api-) APIコールを実行する必要があります。 ```JavaScript /** 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)

```JSON { "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 が成功した場合、バイヤーを確認ページにリダイレクトします。 ### 5. チェックアウトのキャンセル購入者が「キャンセルして事業者に戻る」リンクをクリックすると、Amazon Payはこのイベントハンドラを呼び出します。 `onCancel`コールバックはAmazon Payのチェックアウトポップアップウィンドウを閉じるために使用され、購入者は事業者のページに戻ります。 ```JavaScript onCancel: function (event) { // 購入者をカートページまたは商品詳細ページに自動的に戻します } ``` #### onCancel event input このコールバックにはinputは必要ありません。 #### onCancel event output このコールバックにはoutputは必要ありません。 ### 6. エラーハンドリング `onError`コールバックは、エラーが発生した場合に事業者に通知するために使用されます。この場合、Amazon Payのウィンドウは閉じません。 ```js onError: function (event) { console.err(event); } ``` #### onError event input

属性	タイプ	説明
message	String	エラーメッセージ \|

#### onError event output このコールバックにはoutputは必要ありません。