デカップリング
デカップリングとは、Amazon Payボタンの表示とボタンクリック時のイベントを切り離して実行する場合に使用します。
通常の実装の場合、Amazon PayボタンをクリックするとすぐにAmazon Pay Hosted pageへリダイレクトされますが、デカップリングで実装した場合はクリック時に事業者独自の処理などを追加実行し、それが完了してからCheckout Sessionを開始（Amazon Pay Hosted pageへリダイレクト）することができるようになります。
ボタンレンダリングスクリプト
デカップリングの特徴は、Amazon Payボタンレンダリングスクリプトの記述方法が異なる点です。
以下は、サンプルコードです。amazonPayButton.initCheckout と amazon.Pay.initCheckoutの二つがあり、使い方が異なりますので注意してください。
例1:
<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',{
"merchantId": "xxxxxx",
"ledgerCurrency": "JPY",
"sandbox": true,
"checkoutLanguage": "ja_JP",
"productType": "PayAndShip",
"placement": "Cart",
"buttonColor": "Gold"
});
amazonPayButton.onClick(function(){
// define your custom actions here
amazonPayButton.initCheckout({
"createCheckoutSessionConfig": {
"payloadJSON": '{
"webCheckoutDetails": {
"checkoutReviewReturnUrl": "http://localhost:3000/review/",
"checkoutCancelUrl": "http://localhost:3000/cancel/"
},
"storeId": "amzn1.application-oa2-client.ccxxxxxx",
"chargePermissionType": "OneTime",
"deliverySpecifications": {
"addressRestrictions": {
"type": "Allowed",
"restrictions": {
"JP": {
"statesOrRegions": ["東京都"],
"zipCodes": ["1530064"]
}
}
}
},
"paymentDetails": {
"allowOvercharge": false,
"extendExpiration": false
},
"scopes": ["name","email","phoneNumber","billingAddress"]
}',
"signature": "xxxxxxx",
"publicKeyId": "SANDBOX-xxxxxx"
}
});
});
</script>
</body>
例2:
<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',{
"merchantId": "xxxxxx",
"ledgerCurrency": "JPY",
"sandbox": true,
"checkoutLanguage": "ja_JP",
"productType": "PayAndShip",
"placement": "Cart",
"buttonColor": "Gold"
});
amazonPayButton.onClick(function(){
// define your custom actions here
amazon.Pay.initCheckout({
"merchantId": "xxxxxx",
"ledgerCurrency": "JPY",
"sandbox": true,
"checkoutLanguage": "ja_JP",
"productType": "PayAndShip",
"placement": "Cart",
"buttonColor": "Gold",
"createCheckoutSessionConfig": {
"payloadJSON": '{
"webCheckoutDetails": {
"checkoutReviewReturnUrl": "http://localhost:3000/review/",
"checkoutCancelUrl": "http://localhost:3000/cancel/"
},
"storeId": "amzn1.application-oa2-client.ccxxxxxx",
"chargePermissionType": "OneTime",
"deliverySpecifications": {
"addressRestrictions": {
"type": "Allowed",
"restrictions": {
"JP": {
"statesOrRegions": ["東京都"],
"zipCodes": ["1530064"]
}
}
}
},
"paymentDetails": {
"allowOvercharge": false,
"extendExpiration": false
},
"scopes": ["name","email","phoneNumber","billingAddress"]
}',
"signature": "xxxxxxx",
"publicKeyId": "SANDBOX-xxxxxx"
}
});
});
</script>
</body>
Amazon Payボタンレンダリングスクリプトの書き方が少し異なるだけで、それ以外は
と同じ実装手順となります。
スクリプト内の各種パラメータに関する説明は、実装手順 - 一般的な決済フローの実装 - 手順2 等でご紹介しています。
フロー図
以下は、デカップリングボタンで実装した場合のフロー（事業者処理とAmazon側の処理）を横長にまとめたものです。
フローは横長となっており、フロー内を右にスクロールしていただくことで全てをご覧いただけます。
| 事業者サイト | Amazon Pay Hosted page Amazonログイン後 | |||||
想定シチュエーション 商品ページにAmazon Payボタンを表示することになったため、Amazon Payボタンクリック時には、先に商品をカートシステムに追加してからAmazon Pay Hosted pageへ遷移させたい。 このため、以下の仕様に従って実行できるようデカップリングを使用する。 デカップリング仕様 1. ボタンのレンダリング (amazon.Pay.renderButton) 2. ボタンクリック時にカートシステムに商品を追加 (amazonPayButton.OnClick > custom action実行) 3. カートシステムに商品追加が完了したら、Amazon Pay Hosted pageを開く (amazonPayButton.initCheckout実行) 事業者は、Amazon Payボタンのレンダリングスクリプトを記述してサイトにAmazon Payボタンを表示します。 購入者は、Amazon Payボタンをクリックします。 ● ● ● 商品ページ  | ▶︎ | Amazon Payボタンクリックをトリガーにして、商品をカートに追加する処理が実行されます。 デカップリングの仕様 1. ボタンのレンダリング (amazon.Pay.renderButton)-> 完了 2. ボタンクリック時にカートシステムに商品を追加 (amazonPayButton.OnClick > custom action実行)-> 実行 3. カートシステムに商品追加が完了したら、Amazon Pay Hosted pageを開く (amazonPayButton.initCheckout実行) | ▶︎ | カートシステムへの商品追加完了 -> 前処理が完了したことをトリガーにしてinitCheckoutが実行されます デカップリングボタンの仕様 1. ボタンのレンダリング (amazon.Pay.renderButton)-> 完了 2. ボタンクリック時にカートシステムに商品を追加 (amazonPayButton.OnClick > custom action実行)-> 完了 3. カートシステムに商品追加が完了したら、Amazon Pay Hosted pageを開く (amazonPayButton.initCheckout実行)-> 実行 | ▶︎ | 以降の処理は、 一般的な決済フロー - Amazon Pay Hosted page Amazonログイン後 と同じです |
インテグレーションガイド
デカップリングボタンについては、インテグレーションガイド > 付録 > Amazon Payスクリプト > デカップリングボタンのレンダリングと決済またはサインインの開始 の中でご紹介しています。