Have buyer choose whether to use “both shipping address + payment method” or “payment method only” in the checkout flow
Flow diagram
Below diagram shows website screen transitioning togehter with merchant and Amazon Pay processes involved. Diagram is horizontal, and flows from left to right. Scroll the diagram to the right to see all flow.
Option1. Have buyer choose on dialog
| Merchant site | Amazon Pay Hosted page in general | Merchant processing | Merchant site | |||||||||||||||
Merchant shows Amazon Pay button on their website such as explained in "Merchant site to show Amazon Pay button on cart" or, "Merchant site to choose Amazon Pay as payment method".Let's assume that merchant shows Amazon Pay button on cart page for example. Initially use productType=PayAndShip and use decoupling button What's decouplig button? Process sequence 1. Render Amazon Pay button (amazon.Pay.renderButton) 2. Show dialog before initiating checkout session (amazonPayButton.OnClick > custom action = show_dialog()) 3. Once buyer chose "PayAndShip" or "PayOnly", update productType in payload and execute initCheckout (amazonPayButton.initCheckout or amazon.Pay.initCheckout) ● ● ● Cart page Item Price Quant. Total  Cofee beans ¥2,000 1 ¥2,000  Coffee cup ¥500 1 ¥500 Total ¥2,500  | ▶︎ | The buyer clicks Amazon Pay button ● ● ● Cart page Item Price Quant. Total Cofee beans ¥2,000 1 ¥2,000 Coffee cup ¥500 1 ¥500 Total ¥2,500 Process sequence 1. Render Amazon Pay button (amazon.Pay.renderButton) 2. Show dialog before initiating checkout session (amazonPayButton.OnClick > custom action = show_dialog()) 3. Once buyer chose "PayAndShip" or "PayOnly", update productType in payload and execute initCheckout (amazonPayButton.initCheckout or amazon.Pay.initCheckout) | ▶︎ | Merchant shows dialog for buyer to choose from PayAndShip or PayOnly The buyer choose and click. Let's assume the buyer chose "Shipping address and Payment" in this case. Do you want to use Amazon shipping address? Shipping address and Payment Payment only Process sequence 1. Render Amazon Pay button (amazon.Pay.renderButton) 2. Show dialog before initiating checkout session (amazonPayButton.OnClick > custom action = show_dialog()) 3. Once buyer chose "PayAndShip" or "PayOnly", update productType in payload and execute initCheckout (amazonPayButton.initCheckout or amazon.Pay.initCheckout) | ▶︎ | Merchant updates productType (in createCheckoutSessionConfig) to PayAndShip or PayOnly based on buyer choise, and execute initCheckout. Process sequence 1. Render Amazon Pay button (amazon.Pay.renderButton) 2. Show dialog before initiating checkout sessionbr (amazonPayButton.OnClick > custom action = show_dialog()) 3. Once buyer chose "PayAndShip" or "PayOnly", update productType in payload and execute initCheckout (amazonPayButton.initCheckout or amazon.Pay.initCheckout) | ▶︎ | Screen and processing are same with General flow - Amazon Pay Hosted page in general. | ▶︎ | Merchant then call Get Checkout Session API with amazonCheckoutSessionId. Merchant receives shipping address, payment instruments as API responseRef: Get Checkout Session response | ▶︎ | Merchant shows (overwrites) information received in API response (shipping address, payment instrument and etc) on merchant order review page, implement bindChangeAction to "Change" button. ● ● ● Order review page Shipping address Change 〒153-0064 Shimomeguro 1-8-1, Meguro, Tokyo Amazon Taro Payment instrument Change VISA 1111xxxx (Amazon Pay) Order detail Item Proce Quant. Total  Coffee beans ¥2,000 1 ¥2,000  Coffee cup ¥500 1 ¥500 Total ¥2,500 About shipping address and name Same with General flow - About shipping address and nameAbout payment instrument Same with General flow - About payment instrumentChange button for shipping address and payment instrument For buyer to change shipping address or payment instrument on Amazon Pay Hosted page, merchant put "change" button on the site, and implement bindChangeAction to "change" button. Same with General flow - bindChangeAction. | ▶︎ | The buyer clicks "Place Order" button. ● ● ● Order review page Shipping address Change 〒153-0064 Shimomeguro 1-8-1, Meguro, Tokyo Amazon Taro Payment instrument Change VISA 1111xxxx (Amazon Pay) Order detail Item Proce Quant. Total Coffee beans ¥2,000 1 ¥2,000 Coffee cup ¥500 1 ¥500 Total ¥2,500 | ▶︎ | Flow continues as General flow - Merchant processing after "Place Order" | ||
Button rendering script example for above scenario
<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',
});
//Set Amazon Pay Button click event
amazonPayButton.onClick(function(){
//1. Add a function to show a dialog
//2. Based on buyer choice on a dialog,
//If buyer chose to use both shipping address and payment instrument from Amazon Pay, you will initiate Checkout Session by executing amazonPayButton.initCheckout
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'
}
});
//If buyer chose to use only payment instrument from Amazon Pay, you will initiate Checkout Session by amazon.Pay.initCheckout
amazon.Pay.initCheckout({
merchantId: 'xxxxxxx',
ledgerCurrency: 'JPY',
sandbox: true,
checkoutLanguage: 'ja_JP',
productType: 'PayOnly', //Change to "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'
}
});
});
</script>
</body>
caution
If you use different productType for checkout initiation from the one in Amazon Pay rendering script, it is treated as exceptional implementation.
Please contact Amazon Pay team if you want to consider this integration in advance.
Option2. Have buyer choose shipping address on order review page with tabs
- Flow starts as same with Merchant showing Amazon Pay button on their website such as explained in;
- "Merchant site to show Amazon Pay button on cart" or,
- "Merchant site to choose Amazon Pay as payment method".
Checkout Session productType is "PayAndShip".
- Then, when the buyer comes back to order review page after Amazon Pay Hosted page, the buyer sees two types of shipping address (one is from Amazon Pay and another is the one input/saved at merchant site).
Below flow diagram starts from above mentioned #2.
| Merchant processing | Merchant site | |||
Merchant shows information received in API response (shipping address, payment instrument and etc) on merchant order review page, and implement bindChangeAction to "Change" button. Note: Merchant shows both Amazon shipping address and shipping address input/saved at merchant site in Tabs on order review pageMerchant also shows payment instrument received in API response on the page. ● ● ● Order review page Shipping address Amazon Merchant Change 〒153-0064 Shimomeguro 1-8-1, Meguro, Tokyo Amazon Taro Payment instrument Change VISA 1111xxxx (Amazon Pay) Order detail Item Price Quant. Total Coffee beans ¥2,000 1 ¥2,000 Coffee cup ¥500 1 ¥500 Total ¥2,500 About shipping address and name Same with General flow - About shipping address and nameAbout payment instrument Same with General flow - About payment instrumentChange button for shipping address and payment instrument For buyer to change shipping address or payment instrument on Amazon Pay Hosted page, merchant put "change" button on the site, and implement bindChangeAction to "change" button. Same with General flow - bindChangeAction. | ▶︎ | The buyer choose which shipping address to use, and click "Place Order" button. ● ● ● Order review page Shipping address Amazon Merchant Change 〒153-0064 Shimomeguro 1-8-1, Meguro, Tokyo Amazon Taro Payment instrument Change VISA 1111xxxx (Amazon Pay) Order detail Item Price Quant. Total Coffee beans ¥2,000 1 ¥2,000 Coffee cup ¥500 1 ¥500 Total ¥2,500 | ▶︎ | Flow continues as General flow - Merchant processing after "Place Order" |
Pros and Cons
| # | Option | Pros | Cons |
|---|---|---|---|
| Option1 | Have buyer choose on dialog | - Even if a buyer saves shipping address on merchant site, the buyer still can choose to use Amazon Pay shipping address as preferred. - Amazon can show only intended information (shipping address and/or payment method)on Amazon page based on the buyer’s choice. | - Merchant’s amount of development effort increases as they need to add conditional branches as needed. - Product type used for rendering Amazon Pay button and actual checkout session differs in some cases, and requires Amazon Pay approval for exceptional integration. |
| Option2 | Have buyer choose shipping address on order review page with tabs | Keep Amazon Pay integration scope minimum as merchant can use PayAndShip for both new and existing buyers. | - Merchant’s amount of development effort increases as they need to modify order review page to show both addresses. - Checkout Session object holds Amazon shipping address only, and if the buyer chose to use merchant site’s shipping address, Amazon will not be able to know the real shipping address. - In case of Amazon a-z guarantee is applied, your rebuttal may be disadvantageous. |