Decoupling
Decoupling is another integration option that can separate button rendering and button click event.
Usually, when the buyer clicks Amazon Pay button, the buyer is immediately redirected to Amazon Pay Hosted page. With decoupling button, merchant can add their own function as Amazon Pay button click event, and initiates checkout session only after merchant's function is complete.
Button rendering script
Big difference in decoupling from general Amazon Pay button is button rendering script.
Below is a sample codes. There are two ways to integrate decoupling button; amazonPayButton.initCheckout and amazon.Pay.initCheckout.
Example1:
<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>
Example2:
<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>
You see "// define your custom actions here" in the script. This is where merchant add their own function before initiating checkout.
Amazon Pay button rendering script is a bit different from general Amazon Pay button rendering, but other integration steps are same with below;
Flow diagram
Below diagram shows website screen transitioning togehter with merchant and Amazon Pay processes involved. The diagram is horizontal, and flows from left to right. Please scroll the diagram to the right to see all flow.
| Merchant site | Amazon Pay Hosted page in general | |||||
Assumption Merchant decided to add Amazon Pay button on product page. If merchant uses Amazon Pay general integration, merchant cannot add product to their cart before initiating checkout. Thus, merchant decided to use Decoupling button and implement following sequence. Process sequence 1. Render Amazon Pay button (amazon.Pay.renderButton) 2. Add product to cart before initiating checkout session (amazonPayButton.OnClick > custom action = "add_to_cart()") 3. Once "add_to_cart()" is complete, initate checkout sesssion. (amazonPayButton.initCheckout) Merchant adds Amazon Pay button rendering script to show Amazon Pay button on merchant site. The buyer clicks Amazon Pay button. ● ● ● Product page  | ▶︎ | Add product to merchant's cart system when Amazon Pay button is clicked by the buyer. Process sequence 1. Render Amazon Pay button (amazon.Pay.renderButton) 2. Add product to cart before initiating checkout session (amazonPayButton.OnClick > custom action = "add_to_cart()") 3. Once "add_to_cart()" is complete, initate checkout sesssion. (amazonPayButton.initCheckout) | ▶︎ | Adding product to cart is complete -> start checkout session Process sequence 1. Render Amazon Pay button (amazon.Pay.renderButton) 2. Add product to cart before initiating checkout session (amazonPayButton.OnClick > custom action = "add_to_cart()") 3. Once "add_to_cart()" is complete, initate checkout sesssion. (amazonPayButton.initCheckout) | ▶︎ | Flow continues as General flow - Amazon Pay Hosted page in general. |