Inline Checkout Implementation Guide

Transcription

1 Inline Checkout Implementation Guide

2 TOC 2 Contents Overview of This Document... 3 Standard Checkout Amazon Overview of Checkout by Checkout Overview of Inline Amazon Checkout by Overview of Who Should Read This Document...3 Prerequisites... 3 Other Documentation... 3 What's New in This Document...4 Notice About Amazon Payments Services Functionality... 5 Introducing Inline Checkout... 6 Integration Touch Points... 6 Widgets Overview...7 Initiating Checkout...7 Accessing Account Information...7 Accessing Order Details...7 Widget Setup... 7 API Overview Sample Integration Initiating Inline Checkout...11 Selecting the Buyer Address Obtaining the Selected Shipping Address...13 Selecting the Payment Method...14 Reviewing the Order Completing the Transaction Showing the Order Details on Your Website...19 Checkout by Amazon on Mobile-Optimized Websites...20 Integrating with Mobile-Optimized Websites...20 ExpressCheckoutWidget...21 Description Examples Multiple Addresses Address Selection Page Integration Description Example...24 Testing the Integration Exit Criteria Ten Types of Test Transactions Order Options Used When Testing Transactions...26 Handling Settlements...27 Customizing the Pop-Up Window...28

3 Overview of This Document 3 Overview of This Document Overview of Checkout by Amazon Inline Checkout Overview of Checkout by Amazon Standard Checkout Overview of Checkout by Amazon Widget Reference Guide Overview of Checkout by Amazon Inline Checkout API Reference Guide Welcome to the Checkout by Amazon Inline Checkout API Reference Guide Checkout by Amazon Inline Checkout Guide Checkout by Amazon Standard Checkout Widgets Reference Guide Checkout by Amazon Inline Checkout Widgets Reference Guide Checkout by Amazon Widgets Reference Guide. This section describes who should read this guide, how the guide is organized, and other resources related to Checkout by Amazon. Who Should Read This Document This document gives you the information and steps you need to implement Inline Checkout using Checkout by Amazon on your website the information and steps you need to implement Inline Checkout Widgets on your website the reference information for Inline Checkout APIs the information and steps you need to implement Standard Checkout using Checkout by Amazon on your website the reference information for Inline Checkout APIs. Prerequisites This guide assumes you--or your development staff--are familiar with using HTML and XML in an application development environment. Before you can use Checkout by Amazon Inline Checkout, your systems must meet the following prerequisites: Before you can use Checkout by Amazon Standard Checkout, your systems must meet the following prerequisites: You must be familiar with using web service APIs. You must be familiar with using JavaScript. (There are several required JavaScript code snippets that you must use in your carts to enable Inline Checkout and Express Checkout.) For more information about using the Inline Checkout Widgets, please see the following references: Inline Checkout API Reference Guide Inline Checkout Implementation Guide Inline Checkout Widget Reference Guide Inline Checkout API Reference Guide for Subsidiaries Inline Checkout Implementation Guide for Subsidiaries Inline Checkout Widget Reference Guide for Subsidiaries Other Documentation You can read our downloadable PDFs to understand more about Checkout by Amazon. More Resources for Checkout by Amazon Resource Getting Started Guide Audience, Purpose, and Goals For merchants who want to use a simple, step-by-step approach in setting up Checkout by Amazon on their websites. The Getting Started Guide walks merchants through the process,

4 Overview of This Document 4 from gathering the required information for signing up for an account to setting up a button on their websites. Standard Checkout - Button Creation Wizard Implementation Guide For merchants and developers who want a detailed list of ways to integrate their website with Checkout by Amazon. The Implementation Guide provides the information needed for programming and code development. Note that there are three versions of this document: one for those who just want to paste the button code built using the Create Checkout Button feature in Seller Central, one for HTML-based code, and one for XML-based code. Standard Checkout - HTML Implementation Guide Standard Checkout - XML Implementation Guide Using Seller Central Standard Checkout - Callback API Guide Standard Checkout - Callback API Developers Cheat Sheet Instant Order Processing Notifications Guide Using Custom Data Fields Guide Best Practices Guide Managing Orders For merchants who want an overview of Seller Central. For developers who want to build their own applications to calculate shipping and tax rates as well as promotional discounts and then send these results to Checkout by Amazon. For developers who want a quick, 1-page summary of how to enable callbacks. For developers who want to automate order notifications with Amazon Payments. For merchants and developers who want to include custom data fields in their carts. Tips for setting up your website to use Amazon Payments, with advice for planning, setting up, and day-to-day operations. A guide to assist you in the day-to-day operations for managing orders generated by Checkout by Amazon. What's New in This Document Release Date Global Changes New section Notice About Amazon Payments Services Functionality on page 5 Release Date Global Changes Revise links to other documentation Release Date API Reference Guide Updated Request Parameters to remove "Condition" as a parameter.

5 Overview of This Document 5 Release Date Global changes Modified the document to show the changes to the button use. Release Date API Reference Guide Updated Request Parameters to document that only MERCHANT is acceptable as a FulfillmentNetwork value. Release Date API Reference Guide Updated section on Request Parameters to include updates to the use of MerchantURL and IntegratorURL Release Date Global changes Added information to support Amazon Subsidiaries. Release Date Changes to this document Implementation Guide Added section on Checkout by Amazon on Mobile-Optimized Websites on page 20 Release Date Changes to this document Implementation Guide Initial Release Widget Reference Guide Initial Release API Reference Guide Added section on SetContractCharges Notice About Amazon Payments Services Functionality The Amazon Payments service has been designed and developed for use within a web browser only. Our service cannot be used within a native application (including, without limitation, ios, Android, RIM, or Windows operating systems). Amazon Payments reserves the right to suspend the Payment Account of any user of our services that has implemented our Services within a native application.

6 Introducing Inline Checkout 6 Introducing Inline Checkout Inline Checkout allows you to integrate the Amazon address book and payment methods into your existing checkout experience. You can use the combination of Inline Checkout Widgets and APIs to create a checkout experience custom-fit for your website. Integration Touch Points

7 Widgets Overview 7 Widgets Overview Inline Checkout uses a set of widgets to create the checkout experience. The following is the list of widgets that can be used with Inline Checkout. Initiating Checkout InlineCheckoutWidget ExpressCheckoutWidget (Please read the ExpressCheckoutWidget section below for more details) Accessing Account Information AddressWidget WalletWidget Accessing Order Details OrderDetailsWidget Widget Setup To render a widget, copy and paste the code snippet we provide (sample below) on every page where a widget needs to be rendered. Place the div block in the location where you want the widget to show up. src=' <div id="amazonwidget"> <img src=" style="cursor: pointer;"/> </div> new CBA.Widgets.XXXWidget ({ // Widget-specific parameters }).render("amazonwidget"); The widget setup involves 4 steps: 1. Include the PaymentWidgets.js file on your page. If you want to include multiple Checkout by Amazon widgets on the same page, load the external JavaScript file (for example, PaymentsWidget.js) just once. 2. Place a div HTML element where you want the widget to be rendered on your page. Give the div element a unique name. 3. Place the Checkout by Amazon button img source URL in the div defined as part of Step Inside a script block, create an instance of the widget you want to display. Note: Creating an instance of the widget does not automatically make it visible. You must call the render() method of the widget instance when your page is ready to display the widget.

8 Widgets Overview 8 URL Domains Used in This Guide The URL domain is specific for country to support internalization (i18n). That is, the JavaScript URL for US is: Production Widget Please see this table for a list of URLs used for specific locales: Locale US URL PaymentWidgets.js Sandbox Widget To test your integration in the Sandbox environment, replace the JavaScript URL with one of these, depending on your locale: Locale US URL us/sandbox/paymentwidgets.js Payment Buttons Use these links for the payment button images on your site. Stage Production Sandbox URL button?cartownerid=<merchant- ID>&color=<COLOR>&size=<SIZE> &background=<background>&type=<type> cba/button?cartownerid=<merchant- ID>&color=<COLOR>&size=<SIZE> &background=<background>&type=<type> Color, size, background, and type are optional parameters and can hold the values as defined the table below: Table 1: Parameter Name Required Description cartownerid Required The merchant ID is to be used to show the button color Optional Defines the color of the button. Options: orange tan. Default is orange. size Optional Defines the size of the button. Options: medium large x-large Default is large background Optional Defines the background color where the button will be used on your website. Options: white light dark Default is white. type Optional The value of this parameter determines what type of button to display.

9 Widgets Overview 9 Parameter Name Required Description Possible values are "inlinecheckout", "addressbook", or "expresscheckout". The default value is "inlinecheckout". If the value is set to "inlinecheckout", the button label displays the text "Checkout with Amazon". If the value is set to "addressbook", the button label displays the text "Use Amazon Address Book". if the value is set to "expresscheckout", the button label displays the text "Checkout with Amazon".

10 API Overview 10 API Overview The following is the list of APIs that can be used with Inline Checkout: GetPurchaseContract SetPurchaseItems CompletePurchaseContract You can read the Inline Checkout API Reference Guide document for details on how to use these APIs and for the list of API parameters.

11 Sample Integration 11 Sample Integration Initiating Inline Checkout The Checkout with Amazon button allows your buyers to indicate that they'd like to access their Amazon account information and pay with Amazon Payments during the checkout process. When the buyers click the Checkout with Amazon button, we will notify you so that you can customize your checkout pipeline using the widgets that allow the customers access their Amazon account information. The Checkout with Amazon button needs to behave differently for merchants that have integrated with Amazon Identity & Payments. For buyers already signed in with their Amazon credentials, clicking the Checkout with Amazon button should not prompt them to sign in again. To prevent the sign-in page from popping up, you will need to pass two required arguments to the widget: 1. The authorization token you received when the user signed in using Amazon Identity. 2. The purchase contract ID you obtained from the CreatePurchaseContract API. Place the following code on your page wherever you want to display the Checkout with Amazon button which allows your customers to initiate the checkout with Amazon: src=' <div id="amazoninlinewidget"> <img src=" cartownerid=aeiou1234aeiou &color=orange&size=large&background=white&type=inlinecheckout"/> </div> new CBA.Widgets.InlineCheckoutWidget({ onauthorize: function(widget) { window.location = ' + widget.getpurchasecontractid();} }).render("amazoninlinewidget"); src=' PaymentWidgets.js'> <div id="amazoninlinewidget"> <img src=" cartownerid=aeiou1234aeiou&color=orange&size=large &background=white&type=addressbook"/> </div> new CBA.Widgets.InlineCheckoutWidget({

12 Sample Integration 12. // Replace "PURCHASE_CONTRACT_ID" with the value obtained from the // call to the CreatePurchaseContract API. // Replace "AUTHORIZATION_TOKEN" with the value obtained from // Amazon Identity purchasecontractid: "PURCHASE_CONTRACT_ID", authorizationtoken: "AUTHORIZATION_TOKEN", onauthorize: function(widget) { window.location = ' + widget.getpurchasecontractid();} }).render("amazoninlinewidget"); Once you complete this step, the Checkout with Amazon button will appear on your page. When the buyers click the Checkout with Amazon button and authenticate themselves with their Amazon credentials, we trigger the JavaScript function you associated with the onauthorize parameter. In the example above, the JavaScript function redirects the browser to the next page, shown as " Similarly, you can either redirect to the next page as shown in the example or perform additional processing as necessary. Note that we pass a reference to the widget object itself to the JavaScript callback function. You can call the getpurchasecontractid() method on this object instance to get the unique session identifier named Purchase Contract ID. You can use that identifier to interact with our APIs on the backend. The identifier helps tie API activity to the buyer session on your website. You can send the Purchase Contract ID to your server side application using an AJAX call or as query string parameter as you redirect the browser to the next page. The next step helps your buyer to view and select a shipping address from their Amazon Address book after you receive the signal from the widget that the buyer has authorized; that is, confirmed checkout with Amazon. Note: The checkout session is valid only for three hours; after that time, the Purchase Contract ID will become invalid if the checkout session is not completed. Selecting the Buyer Address The Address Book Widget allows your buyers to access their Amazon address book from within your checkout pipeline and then select a shipping address. To display the Address Book Widget, place the following code where you want the widget to appear: src=' <div id="amazonaddresswidget"></div> new CBA.Widgets.AddressWidget({ onaddressselect: function(widget) { // the buyer has selected a shipping address // enable the Continue button on your page // so the buyer can go to the next step }

13 Sample Integration 13 }).render("amazonaddresswidget"); src=' PaymentWidgets.js'> <div id="amazonaddresswidget"></div> new CBA.Widgets.AddressWidget({. // Replace "PURCHASE_CONTRACT_ID" with the value obtained from the // call to the CreatePurchaseContract API. purchasecontractid: "PURCHASE_CONTRACT_ID", onaddressselect: function(widget) { // the buyer has selected a shipping address; // enable the "Continue" button on your page // so the buyer can go to the next step } }).render("amazonaddresswidget "); You do not have to specify the purchase contract id explicitly when you integrate with the Address Book or Wallet widget. When buyer initiates a checkout using Inline (or Express) Checkout widgets, we also store the purchase contract id in the buyer s browser cookies. The Address Book and Wallet Widgets will read the purchase contract id from the cookie if none is provided as parameter. Note: We can store only one cookie per buyer per browser session. If the buyer has 2 active checkout sessions on the same browser and if you have not explicitly specified the purchase contract ID in the Address Book and Wallet widgets, those widgets will use the latest purchase contract ID regardless of the session. As result, the address selected by the buyer in one session will also appear in the other session. To avoid this conflict, be sure to explicitly specify the purchase contract ID when creating the widgets. Once you complete this step, the Amazon Shipping Address Widget will appear in your shipping address page: We recommend that you provide a Continue button on your address selection page so the buyer can go to the next page after selecting an address. The step below describes how you can obtain the address selected by the buyer after the buyer makes the address selection (in this case, after clicking the Continue button.) Obtaining the Selected Shipping Address To obtain the shipping address selected by the buyer, you must invoke the GetPurchaseContract API as part of your server-side handling of the Continue button on your Address Selection page. This is an optional step that will provide you the address information to help you calculate the order total. The API will take the purchase contract ID as input which was returned to you during the inline checkout initiation.the purchase contract ID that you pass to the GetPurchaseContract API is the one you received from the call to CreatePurchaseContract. Sample Request &SignatureMethod=HmacSHA256 &PurchaseContractId=amzn1.contract bc485cc4c6b0dc63cd7f8c0d3d8900

14 Sample Integration 14 &AWSAccessKeyId=AKIAJKYFSJU7PEXAMPLE &SignatureVersion=2 &Timestamp= T05%3A20%3A %3A00 &Signature=CLZOdtJGjAo81IxaLoE7af6HqK0EXAMPLE &Version= Sample Response HTTP Status 200 OK <GetPurchaseContractResponse xmlns=" <GetPurchaseContractResult> <PurchaseContract> <Id>amzn1.contract.1.1.f86d99c2943f98dc28d586c </Id> <ExpirationTimeStamp> T01:01:01.000Z</ExpirationTimeStamp> <MerchantId>AEIOU1234AEIOU</MerchantId> <MarketplaceId>AZ4B0753LGLX</MarketplaceId> <State>OPEN</State> <Destinations> <Destination> <DestinationName>#default</DestinationName> <DestinationType>PHYSICAL</DestinationType> <PhysicalDestinationAttributes> <ShippingAddress> <City>NY</City> <StateOrProvinceCode>NY</StateOrProvinceCode> <PostalCode> </PostalCode> <CountryCode>US</CountryCode> </ShippingAddress> </PhysicalDestinationAttributes> </Destination> </Destinations> </PurchaseContract> </GetPurchaseContractResult> <ResponseMetadata> <RequestId>5f20169b-7ab2-11df-bcef-d35615e2b044</RequestId> </ResponseMetadata> </GetPurchaseContractResponse> Note: We share only the subset of address information that is sufficient for you to perform calculations. However, once the order is placed by the buyer, you will receive the full address so you can fulfill the order correctly. For further details on how to make the API call and the format of the API response, please read the API Reference document. Selecting the Payment Method The Wallet Widget (also called the "Payment Method Widget") allows your buyers to access the payment methods in their Amazon account from within your checkout pipeline and select a payment method for the order. As with the Address Book Widget, the purchase contract ID must also be passed to the Wallet Widget. To render the Wallet Widget, place the following code where you want the widget to appear. src=' <div id="amazonwalletwidget"></div>

15 Sample Integration 15 new CBA.Widgets.WalletWidget({ onpaymentselect: function(widget) { // the buyer has selected a payment method // enable the Continue button on your page // so the buyer can go to the next step } }).render("amazonwalletwidget"); src=' PaymentWidgets.js'> <div id="amazonwalletwidget"></div> new CBA.Widgets.WalletWidget({. // Replace "PURCHASE_CONTRACT_ID" with the value obtained from the // call to the CreatePurchaseContract API. purchasecontractid: "PURCHASE_CONTRACT_ID", onpaymentselect: function(widget) { // the buyer has selected a payment method; // enable the "Continue" button on your page // so the buyer can go to the next step } }).render("amazonwalletwidget "); Once you complete this step, the Amazon Payment Method Widget will appear on your page: Checkout by Amazon will validate and authorize the payment method selected by the buyer without notifying you of the payment method used. Checkout by Amazon will then use this information to collect payments from the buyer after buyer places the order. Reviewing the Order At the end of your checkout pipeline you display the order summary before the buyer confirms the order. When you display the order summary, you can use the "read-only" version of the Address Widget and Wallet Widget so the buyer can confirm the current selection. The read-only widgets allow the buyer to review the address and payment information previously selected but do not allow the buyer to change the selection. Below are samples of Address Book and Wallet widget in read-only mode. Address Book Widget src='

16 Sample Integration 16 <div id="amazonaddresswidget"></div> new CBA.Widgets.AddressWidget({ displaymode: "Read" }).render("amazonaddresswidget"); src=' PaymentWidgets.js'> <div id="amazonaddresswidget"></div> new CBA.Widgets.AddressWidget({. // Replace "PURCHASE_CONTRACT_ID" with the value obtained from the // call to the CreatePurchaseContract API. purchasecontractid: "PURCHASE_CONTRACT_ID", displaymode: "Read" }).render("amazonaddresswidget "); Wallet Widget src=' <div id="amazonwalletwidget"></div> new CBA.Widgets.WalletWidget({ displaymode: "Read" }).render("amazonwalletwidget"); src=' PaymentWidgets.js'> <div id="amazonwalletwidget"></div> new CBA.Widgets.WalletWidget({.

17 Sample Integration 17 // Replace "PURCHASE_CONTRACT_ID" with the value obtained from the // call to the CreatePurchaseContract API. purchasecontractid: "PURCHASE_CONTRACT_ID", displaymode: "Read" }).render("amazonwalletwidget "); Completing the Transaction When the buyer confirms the order on your order review page, you must invoke the SetPurchaseItems API followed by CompletePurchaseContract API operation so Checkout by Amazon can authorize the payment of the order. The SetPurchaseItems API will take the list of order items as input. You can specify the order total (that is, the amount the buyer will be charged for the entire order) broken down to each item as part of this API call. Please read the API Reference document for details of how to pass item details and charges for each item. Once you set the items to the purchase contract, you can call the CompletePurchaseContract API which accepts the purchase contract ID as input. This API transforms the purchase contract into Checkout by Amazon orders and returns you a list of Checkout by Amazon Order IDs. You then use these Order IDs to manage the orders. Note: Internationally, various characters are used to represent a decimal separator. For example, in the US, USD represents 10 dollars and 49 cents. The US uses a period (.) as the default separator. Other locations might use a comma (,) instead, and represent the amount as 10,49 USD. Checkout by Amazon accepts only a period (.) as the decimal separator. If you perform calculations for international transactions, you might need to modify your code to convert the decimal separator from the comma to a period. The following code represents a method you might use: parameters["charges.shipping.amount"] = charges.shipping.amount.tostring(); to parameters["charges.shipping.amount"] = Replace(charges.Shipping.Amount.ToString(), ",", "."); Sample Request for SetPurchaseItems &AWSAccessKeyId=AKIAJKYFSJU7PEXAMPLE &PurchaseContractId=amzn1.contract d70090d7caaafb24a12f1a2e071fa &PurchaseItems.PurchaseItem.1.Description=Desc%20of%20the%20item &PurchaseItems.PurchaseItem.1.FulfillmentNetwork=MERCHANT &PurchaseItems.PurchaseItem.1.ItemCustomData=%3Cdata%3EItem%20Custom%20Data %3C%2Fdata%3E &PurchaseItems.PurchaseItem.1.MerchantId=AEIOU1234AEIOU &PurchaseItems.PurchaseItem.1.MerchantItemId=MerchantItemId1 &PurchaseItems.PurchaseItem.1.ProductType=PHYSICAL &PurchaseItems.PurchaseItem.1.Quantity=5 &PurchaseItems.PurchaseItem.1.SKU=SKU%20123 &PurchaseItems.PurchaseItem.1.Title=Title%20of%20the%20item &PurchaseItems.PurchaseItem.1.UnitPrice.Amount=33.33 &PurchaseItems.PurchaseItem.1.UnitPrice.CurrencyCode=USD &PurchaseItems.PurchaseItem.1.PhysicalProductAttributes.Condition=New &PurchaseItems.PurchaseItem.1.PhysicalProductAttributes.DeliveryMethod. DestinationName=%23default

18 Sample Integration 18 &PurchaseItems.PurchaseItem.1.PhysicalProductAttributes.DeliveryMethod. DisplayableShippingLabel=test%20123 &PurchaseItems.PurchaseItem.1.PhysicalProductAttributes.DeliveryMethod. ServiceLevel=Standard &PurchaseItems.PurchaseItem.1.PhysicalProductAttributes.DeliveryMethod. ShippingCustomData=Custom%20Data &PurchaseItems.PurchaseItem.1.PhysicalProductAttributes.ItemCharges. Promotions.Promotion.1.Description=Promo%20Desc%20456 &PurchaseItems.PurchaseItem.1.PhysicalProductAttributes.ItemCharges. Promotions.Promotion.1.Discount.Amount=11.11 &PurchaseItems.PurchaseItem.1.PhysicalProductAttributes.ItemCharges. Promotions.Promotion.1.Discount.CurrencyCode=USD &PurchaseItems.PurchaseItem.1.PhysicalProductAttributes.ItemCharges. Promotions.Promotion.1.PromotionId=Promo123 &PurchaseItems.PurchaseItem.1.PhysicalProductAttributes.ItemCharges. Shipping.Amount=11.11 &PurchaseItems.PurchaseItem.1.PhysicalProductAttributes.ItemCharges. Shipping.CurrencyCode=USD &PurchaseItems.PurchaseItem.1.PhysicalProductAttributes.ItemCharges. Tax.Amount=5.55 &PurchaseItems.PurchaseItem.1.PhysicalProductAttributes.ItemCharges. Tax.CurrencyCode=USD &PurchaseItems.PurchaseItem.1.PhysicalProductAttributes.Weight.Unit=LB &PurchaseItems.PurchaseItem.1.PhysicalProductAttributes.Weight.Value=3.14 &Signature=Signature=lBP67vCvGlDMBQ1dofZxg8E8SUEXAMPLE &SignatureMethod=HmacSHA256 &SignatureVersion=2 &Timestamp= T05%3A11%3A %3A00 &Version= Sample Response for SetPurchaseItems HTTP Status 200 OK <SetPurchaseItemsResponse xmlns=" <ResponseMetadata> <RequestId>400bcf29-7ab1-11df-bcef-d35615e2b044</RequestId> </ResponseMetadata> </SetPurchaseItemsResponse> Sample Request for CompletePurchaseContract &Action=CompletePurchaseContract?PurchaseContractId= amzn1.contract.1.1.f86d99c2943f98dc28d586c &IntegratorId=MNOPQ1234MNOPQ &IntegratorName=Integrator%20Inc &InstantOrderProcessingNotificationURLs. IntegratorURL=http%3A%2F%2Fintegrator.com%2Fiopn &InstantOrderProcessingNotificationURLs. MerchantURL=http%3A%2F%2Fmydomain.com%2Fiopn &SignatureMethod=HmacSHA256&Expires= T12:00:00-07:00 &AWSAccessKeyId=0GS7553JW74RRM612K02EXAMPLE &SignatureVersion=2 &Signature=Dqlp3Sd61jTUA9Uf6SGtEExwUQEXAMPLE &Version= Sample Response for CompletePurchaseContract HTTP Status 200 OK

19 Sample Integration 19 <CompletePurchaseContractResponse xmlns=" <CompletePurchaseContractResult> <OrderIds> <OrderId> </OrderId> <OrderId> </OrderId> </OrderIds> </CompletePurchaseContractResult> <ResponseMetadata> <RequestId>02055a df-8d5c-bf56a38ef3b4</RequestId> </ResponseMetadata> </CompletePurchaseContractResponse> For further details on how to make the API call and the format of the API response, please read the API Reference document. Showing the Order Details on Your Website Once you have the Checkout by Amazon Order ID, you can show the details of the order to your customers within your website. Place the following code where you want the order details to appear. src=' <p>your Amazon Payments Order ID is <a href="#" onclick="orderdetailswidget.open('230px', '554px');"> </ a>.</p> var orderdetailswidget = new CBA.Widgets.OrderDetailsWidget({ orderid: ' ' });

20 Checkout by Amazon on Mobile-Optimized Websites 20 Checkout by Amazon on Mobile-Optimized Websites Integrating with Mobile-Optimized Websites To integrate your mobile-optimized website with Checkout by Amazon, you must use Standard Checkout, not Inline Checkout. With Standard Checkout, when the buyer clicks the Checkout with Amazon button on your mobile-optimized website, Checkout by Amazon detects that the request is coming from a mobile device and will redirect the customer to the mobile-optimized checkout pipeline hosted by Amazon Payments. This checkout pipeline is optimized for the latest browser-enabled smartphones which support JavaScript, including iphone, Android, and Webkit-based smartphones. This image shows the customer experience on a smartphone: Please refer to the "Set Up for Your Mobile-Optimized Website" section in our Standard Checkout integration guide. You can access the guides by clicking the following links: If you are using XML APIs: Standard Checkout: XML Implementation Guide If you are using HTML APIs: Standard Checkout: HTML Implementation Guide

21 ExpressCheckoutWidget 21 ExpressCheckoutWidget The Express Checkout Widget is not currently supported for merchants who have integrated with Amazon Identity & Payments. Description The Express Checkout Widget provides an alternate way for your buyers to initiate their checkout with Amazon. With the Express Checkout Widget, the buyer can select an address and payment within a pop-up window hosted by Amazon Payments before entering your checkout pipeline. By contrast, with Inline Checkout Widget the buyer gets a chance to select an address only inside your checkout pipeline using the Address Book Widget. Both the Inline Checkout Widget and the Express Checkout Widget allow your buyers to complete checkout on your website. Both leverage the Address Book Widget and Wallet widget integrated within your checkout pipeline. The key difference is the buyer experience. Examples src=' <div id="amazonexpresswidget"> <img src=" cartownerid=aeiou1234aeiou&color=orange&size=large&background=white"/> </div> new CBA.Widgets.ExpressCheckoutWidget({ onauthorize: function(widget) { window.location = ' + widget.getpurchasecontractid();} }).render("amazonexpresswidget"); After the buyer selects an address and a payment method within a pop-up window, we perform the JavaScript function associated with the onauthorize parameter. With this widget, you can get the newly created purchase contract ID and then redirect the buyer to the next step. Because the buyer pre-selected the address and payment method, you can use the read-only mode of the Address Book and Wallet widgets. We recommend you to use the read-only mode only if you do not want your buyer to modify the address or payment method that was already selected. Below are samples of Address Book and Wallet widget in read-only mode. Address Book Widget src='

22 ExpressCheckoutWidget 22 <div id="amazonaddresswidget"></div> new CBA.Widgets.AddressWidget({ displaymode: "Read" }).render("amazonaddresswidget"); Wallet Widget src=' <div id="amazonwalletwidget"></div> new CBA.Widgets.WalletWidget({ displaymode: "Read" }).render("amazonwalletwidget");

23 Multiple Addresses 23 Multiple Addresses The Inline Checkout Widget allows buyers to select multiple shipping addresses for a single order. You can simply display the Address Book Widget multiple times, each time assigning a different destination name to the widget, allowing the buyers to select a different address with each widget instance. Each address is then mapped to the corresponding destination name and sent back to you. Buyers can select only one address using the Express Checkout widget. However, you can still allow them to select multiple addresses after they are redirected to your website. After the redirect, simply use the same technique you would use with Inline Checkout to enable the multiple shipping address selection.

24 Address Selection Page Integration 24 Address Selection Page Integration Description In addition to placing the Inline Checkout button or Express Checkout button on your shopping cart page, we strongly recommend that you place the Inline Checkout Widget on your Address Selection page as well so that buyers can benefit from the convenience of accessing their Amazon Address Book from inside your checkout pipeline. When placing the Inline Checkout Widget on your Address Selection page, be sure to include the purchase contract ID and the authorization token so that your buyer is not prompted to sign in a second time. Example src=' <div id="amazoninlinewidget"> <img src=" cartownerid=aeiou1234aeiou &color=orange&size=large&background=white&type=inlinecheckout"/> </div> new CBA.Widgets.InlineCheckoutWidget({ onauthorize: function(widget) { // load a customized Address Selection page with the Address Book Widget enabled } }).render("amazoninlinewidget"); src=' PaymentWidgets.js'> <div id="amazoninlinewidget"> <img src=" cartownerid=aeiou1234aeiou &color=orange&size=large&background=white&type=inlinecheckout"/> </div> new CBA.Widgets.InlineCheckoutWidget({.

25 Address Selection Page Integration 25 // Replace "PURCHASE_CONTRACT_ID" with the value obtained from the // call to the CreatePurchaseContract API. // Replace "AUTHORIZATION_TOKEN" with the value obtained from // Amazon Identity purchasecontractid: "PURCHASE_CONTRACT_ID", authorizationtoken: "AUTHORIZATION_TOKEN", onauthorize: function(widget) { // load a customized Address Selection page with the // Address Book Widget enabled } }).render("amazoninlinewidget"); Note: The widget you place on your address selection page is the same Inline widget with buttontype parameter set to "addressbook". This parameter will customize the text on the button to display "Use the Amazon Address Book". In the example above, we suggest loading a customized version of the address selection page when the onauthorize event is triggered. in the customized Address Selection page, you can display the Amazon Addres Book widget.

26 Testing the Integration 26 Testing the Integration Exit Criteria Here are the exit criteria for successfully building Checkout buttons for your website. Use this checklist to be sure that your checkout buttons work correctly before you release your website to the public. 1. The button works in the Sandbox and in Production (that is, the order pipeline completes successfully). 2. The Production order appears in Amazon Payments site using buyer account login. 3. The Production order appears in Seller Central using merchant account login (on the Manage Orders page). 4. You cancel all test orders with your Buyer (Test) Account on the Amazon Payments site. Ten Types of Test Transactions Use these additional transaction types to fully test your Checkout by Amazon implementation: 1. Simple 1-item 2. Item with variations 3. Item for less than $ Item for greater than $50 5. Item with multiple quantities 6. Item shipping to a domestic address using standard shipping 7. Item shipping to a domestic address using expedited shipping 8. Item shipping to an international address using standard shipping 9. Item shipping to an international address using expedited shipping 10. Fulfill an order in Production Order Options Used When Testing Transactions When you build and test your full implementation of Checkout by Amazon on your site, you should consider building transactions with the following types of conditions: 1. Item with a promotion 2. Item with multiple promotions 3. Item sent to an in-state address (calculation of taxes) 4. Item sent to an out-of-state address (calculation of taxes) 5. Item with per-item and per-shipment charges 6. Item with banded shipping 7. Item with One-day shipping 8. Item with Two-day shipping

27 Handling Settlements 27 Handling Settlements An order is created when you perform the CompletePurchaseContract operation. The order will get to the Ready- To-Ship state when the payment amount is reserved successfully on buyer s payment method. You must wait for the order to get to the Ready-To-Ship state before you fulfill the order. You can listen to the order notifications to know immediately when the order state changes. Please see the Instant Order Processing Notifications Guide for details about using instant order processing notifications. Once the order is ready to ship, you must take action on them: You must fulfill them (ship them and mark them as shipped), or You must cancel them (for test orders, it's easier to cancel them with your buyer (test) account) The customer is charged only when you fulfill the order. You must take action on all orders within 30 days; otherwise, Checkout by Amazon will cancel the order. Please see the Managing Orders Guide to learn more about fulfilling, cancelling, refunding, and other order management functions.

28 Customizing the Pop-Up Window 28 Customizing the Pop-Up Window Buyers interact with a pop-up window when they want to sign in or add a new address or a new credit card. You can customize the pop-up window by displaying your own banner image at the top of the pop-up window. Below is a screenshot of how the sign-in page looks like with a custom banner: To upload the banner image, first log in to your Seller Central account. Then, click Settings > Checkout Pipeline Settings. There is a form to upload the banner image at the end of this page. Note: The banner image must be exactly 520 pixels wide and 50 pixels tall. If you don t upload a banner, your seller logo will appear in the banner area.