お客様に「お届け先住所&支払い方法」または「お支払い方法」のどちらをAmazonから連携するかを選択していただく
フロー図
以下は事業者処理とAmazon側の処理を横長のフローにまとめたものです。
フローは横長となっており、フロー内を右にスクロールしていただくことで全てをご覧いただけます。
案1. Amazon Payボタンクリック時に、ダイアログを表示して会員に選択してもらう
| 事業者サイト | Amazon Pay Hosted page | 事業者処理 | 事業者サイト | ||||||||||||||
事業者は、 ・ 事業者サイト カートページや商品ページにAmazon Payボタンを表示 や、 ・ 事業者サイト 支払い方法をAmazon Payに変更 のようにAmazon Payボタンを事業者サイトに表示します。今回の例では、カートページでご説明します。 カートページには以下を表示します。 ・「Amazon Pay」ボタンを表示 ・ Amazon Payボタンは、productType=PayAndShipとし、デカップリングボタンで実装します。 デカップリングボタンについてはこちら デカップリングボタンの仕様 1. ボタンのレンダリング (amazon.Pay.renderButton) 2. ボタンクリック時にダイアログを表示 (amazonPayButton.OnClick > custom action実行) 3. 購入者がダイアログで回答をしたら、回答内容に合わせてprodutTypeを変更し、initCheckoutを実行する (amazonPayButton.initCheckout または amazon.Pay.initCheckout実行) ● ● ● カートページ 商品名 単価 数量 小計  コーヒー豆 ¥2,000 1 ¥2,000  コーヒーカップ ¥500 1 ¥500 合計 ¥2,500  | ▶︎ | 購入者は、Amazon Payボタンをクリックします。 ● ● ● カートページ 商品名 単価 数量 小計 コーヒー豆 ¥2,000 1 ¥2,000 コーヒーカップ ¥500 1 ¥500 合計 ¥2,500 デカップリングボタンの仕様 1. ボタンのレンダリング (amazon.Pay.renderButton)-> 実行 2. ボタンクリック時にダイアログを表示 (amazonPayButton.OnClick > custom action実行) 3. 購入者がダイアログで回答をしたら、回答内容に合わせてprodutTypeを変更し、initCheckoutを実行する (amazonPayButton.initCheckout または amazon.Pay.initCheckout実行) | ▶︎ | 事業者は、購入者が選択できるようにダイアログを表示します。 購入者は、いずれかのボタンをクリックします。 （今回の例では、「お届け先と支払い方法を連携」をクリックしたこととします） お届け先情報もAmazonアカウントから連携しますか？ お届け先と支払い方法を連携 お支払いのみ連携 デカップリングボタンの仕様 1. ボタンのレンダリング (amazon.Pay.renderButton)-> 完了 2. ボタンクリック時にダイアログを表示 (amazonPayButton.OnClick > custom action実行)-> 実行 3. 購入者がダイアログで回答をしたら、回答内容に合わせてprodutTypeを変更し、initCheckoutを実行する (amazonPayButton.initCheckout または amazon.Pay.initCheckout実行) | ▶︎ | 事業者は、購入者が選択した内容に応じて、productTypeをPayAndShipまたはPayOnlyに書き換え、amazon.Pay.initCheckoutを実行します。 デカップリングボタンの仕様 1. ボタンのレンダリング (amazon.Pay.renderButton)-> 完了 2. ボタンクリック時にダイアログを表示 (amazonPayButton.OnClick > custom action実行)-> 完了 3. 購入者がダイアログで回答をしたら、回答内容に合わせてprodutTypeを変更し、initCheckoutを実行する (amazonPayButton.initCheckout または amazon.Pay.initCheckout実行)-> 実行 | ▶︎ | 流れは 一般的な決済フローのAmazon Pay Hosted page Amazonログイン後 と同じです。 | ▶︎ | 事業者はamazonCheckoutSessionIdを使い、Get Checkout Session APIを呼び出します。 APIのレスポンスでお届け先住所やお支払い方法等が返ってきます。Get Checkout Sessionのレスポンスサンプル | ▶︎ | 事業者は、APIレスポンスで取得した情報（お届け先、支払い方法等）を事業者の注文確認画面に上書き表示します。 ● ● ● 注文確認ページ お届け先住所 変更 〒153-0064 東京都目黒区下目黒1-8-1 アマゾン太郎 支払い方法 変更 VISA 1111xxxx (Amazon Pay) ご注文内容 商品名 単価 数量 小計 コーヒー豆 ¥2,000 1 ¥2,000 コーヒーカップ ¥500 1 ¥500 合計 ¥2,500 | お届け先住所および氏名について 一般的な決済フロー - お届け先住所および氏名についてと同じです。支払い方法について 一般的な決済フロー - 支払い方法についてと同じです。お届け先と支払い方法の変更ボタン お届け先住所やお支払い方法をAmazonサイトに複数登録しているお客様がこの画面から別の住所/ 支払い方法へ変更できるよう、事業者は「変更」 ボタンの設置をお願いいたします。 「変更」ボタンには、bindChangeAction実装します。 詳細は 一般的な決済フロー - bindChangeActionと同じです。 | ▶︎ | 購入者は、「注文を確定する」ボタンをクリックします。 ● ● ● 注文確認ページ お届け先住所 変更 〒153-0064 東京都目黒区下目黒1-8-1 アマゾン太郎 支払い方法 変更 VISA 1111xxxx (Amazon Pay) ご注文内容 商品名 単価 数量 小計 コーヒー豆 ¥2,000 1 ¥2,000 コーヒーカップ ¥500 1 ¥500 合計 ¥2,500 | ▶︎ | 以降の処理は、事業者処理 注文確定後と同じです |
例) 上記フローの場合のボタンレンダリングスクリプトイメージ
<body>
<div id="AmazonPayButton"></div>
<script src="https://static-fe.payments-amazon.com/checkout.js"></script>
<script type="text/javascript" charset="utf-8">
var amazonPayButton = amazon.Pay.renderButton('#AmazonPayButton', {
// set checkout environment
merchantId: 'xxxxxxx',
ledgerCurrency: 'JPY',
sandbox: true,
checkoutLanguage: 'ja_JP',
productType: 'PayAndShip',
placement: 'Cart',
buttonColor: 'Gold',
});
//Amazon Payボタンがクリックされた際のイベントを設定する
amazonPayButton.onClick(function(){
//1. ダイアログを表示する
//2. ダイアログの結果に基づき処理を分岐
//もし お届け先と支払い方法両方を選択した場合は、amazonPayButton.initCheckoutに createCheckoutSessionConfigを渡してセッションを開始する
amazonPayButton.initCheckout({
createCheckoutSessionConfig: {
payloadJSON: '{
"webCheckoutDetails": {
"checkoutReviewReturnUrl": "https://a.com/merchant-review-page"
},
"storeId": "amzn1.application-oa2-client.xxxxxxxxx",
"scopes": ["name", "email", "phoneNumber", "billingAddress"],
"deliverySpecifications": {
"addressRestrictions": {
"type": "Allowed",
"restrictions": {
"JP": {
"statesOrRegions" : ["東京都"],
"zipCodes": ["1530064"]
}
}
}
}
}',
signature: 'xxxx',
publicKeyId: 'xxxxxxxxxx',
"algorithm": "AMZN-PAY-RSASSA-PSS-V2"
}
});
//もしお支払い方法のみを選択した場合は、amazon.Pay.initCheckoutを使用して、ボタンのパラメータから指定し直し、createCheckoutSessionConfigを渡してセッションを開始する
amazon.Pay.initCheckout({
merchantId: 'xxxxxxx',
ledgerCurrency: 'JPY',
sandbox: true,
checkoutLanguage: 'ja_JP',
productType: 'PayOnly', //PayOnlyへ変更！
placement: 'Cart',
buttonColor: 'Gold',
createCheckoutSessionConfig: {
payloadJSON: '{
"webCheckoutDetails": {
"checkoutReviewReturnUrl": "https://a.com/merchant-review-page"
},
"storeId": "amzn1.application-oa2-client.xxxxxxxxx",
"scopes": ["name", "email", "phoneNumber", "billingAddress"],
}',
signature: 'xxxx',
publicKeyId: 'xxxxxxxxxx',
"algorithm": "AMZN-PAY-RSASSA-PSS-V2"
}
});
});
</script>
</body>
caution
Amazon Payボタンレンダリング時に設定するproductTypeとセッションをinitiateする時のproductTypeが異なることは例外対応となります。
こちらの実装をご検討の場合は、事前にAmazon Pay担当までご連絡ください。
案2. 一旦PayAndShipで決済を開始し、注文内容確認画面に戻ってきた時に 事業者側で表示している情報とAmazonから取得した情報両方をタブ表示
まず、事業者サイト カートページや商品ページにAmazon Payボタンを表示 や、事業者サイト 支払い方法をAmazon Payに変更 と同じようにAmazon Payボタンをサイトに表示します。この際、productTypeはPayAndShipをセットします。
Amazon Payボタンクリック後の遷移を経て、購入者が注文確認ページに戻ってきた際に、購入者は２つの住所（Amazonから連携された住所と、事業者サイトに入力/保存した住所の両方）を参照します。
以下のフロー図は、上記#2からの流れを記載しています。
| 事業者処理 | 事業者サイト | ||||
事業者は、APIレスポンスで取得したお届け先住所と事業者サイトに登録のお届け先両方を事業者の注文確認画面にタブ切り替えで表示します。 また、APIレスポンスで取得した支払い方法も表示します。 ● ● ● 注文確認ページ お届け先住所 Amazonお届け先 事業者サイトに登録のお届け先 変更 〒153-0064 東京都目黒区下目黒1-8-1 アマゾン太郎 支払い方法 変更 VISA 1111xxxx (Amazon Pay) ご注文内容 商品名 単価 数量 小計 コーヒー豆 ¥2,000 1 ¥2,000 コーヒーカップ ¥500 1 ¥500 合計 ¥2,500 | お届け先住所および氏名について 一般的な決済フロー - お届け先住所および氏名についてと同じです。支払い方法について 一般的な決済フロー - 支払い方法についてと同じです。お届け先と支払い方法の変更ボタン お届け先住所やお支払い方法をAmazonサイトに複数登録しているお客様がこの画面から別の住所/ 支払い方法へ変更できるよう、事業者は「変更」 ボタンの設置をお願いいたします。 「変更」ボタンには、bindChangeAction実装します。 詳細は 一般的な決済フロー - bindChangeActionと同じです。 | ▶︎ | 購入者は、タブ切り替えを使ってお届け先を選択し、「注文を確定する」ボタンをクリックします。 ● ● ● 注文確認ページ お届け先住所 Amazonお届け先 事業者サイトに登録のお届け先 変更 〒153-0064 東京都目黒区下目黒1-8-1 アマゾン太郎 支払い方法 変更 VISA 1111xxxx (Amazon Pay) ご注文内容 商品名 単価 数量 小計 コーヒー豆 ¥2,000 1 ¥2,000 コーヒーカップ ¥500 1 ¥500 合計 ¥2,500 | ▶︎ | 以降の処理は、事業者処理 注文確定後と同じです |
メリット・デメリット
どの実装方法にもメリット、デメリットがありますので、その中から事業者の課題を課題できる最適な選択肢を選択する必要があります。
| # | 実装方法 | メリット | デメリット |
|---|---|---|---|
| 案1 | Amazon Payボタンクリック時に、ダイアログを表示して会員に選択してもらう | ・ 既存会員で事業者サイトにお届け先住所を登録していたとしても、会員自身がAmazonに登録している住所を利用するかどうかを選択できるようになります。 ・ Amazonページ上の表示情報 （お届け先、お支払い方法）は、お客様の意図された情報のみが表示されるようになります。 | Amazon Payボタンクリック時の条件分岐、および、ダイアログの追加が必要になるので、開発工数が増加します。 ・ボタンレンダリング時のproductTypeと実際に実行するproductTypeが異なることになりますので、例外実装としてAmazon Payの事前承認を得る必要があります。ご注意ください。 |
| 案2 | 一旦PayAndShipで決済を開始し、注文内容確認画面に戻ってきた時に 事業者側で表示している情報とAmazonから取得した情報両方をタブ表示 | 事業者側でPayAndShipさえ実装すれば、「Amazonの住所を利用する会員登録」でも「既存会員の支払い方法のみAmazon Payを利用する」でも処理ができるようになるので、実装スコープを減らすことができます。 | ・ 注文確認画面に 事業者サイトに登録している住所と、Amazonから連携された住所を両方表示し、タブ等で会員が切り替えできるようにする実装が必要になるため、開発工数が増加します。 ・ Checkout SessionオブジェクトにはAmazonから連携された住所が格納されますので、購入者が「事業者サイトに登録のお届け先住所」を選択した場合は、実際の配送先をAmazonで把握しない状態となります。 ・マーケットプレイス保証があった際の事業者反証が不利になることがありますのでご留意ください。 |