Inline Checkout Implementation Guide

Transcrição

Inline Checkout Implementation Guide
Inline Checkout Implementation Guide
2 | Checkout by Amazon | TOC
Contents
Overview of This Document................................................................................................................................ 3
Overview of Checkout by Amazon Inline Standard Checkout................................................................ 3
Who Should Read This Document...............................................................................................3
Prerequisites................................................................................................................................. 3
Other Documentation................................................................................................................... 3
What's New in This Document.....................................................................................................4
Introducing Inline Checkout.................................................................................................................................5
Integration Touch Points.......................................................................................................................... 5
Widgets Overview................................................................................................................................................6
Initiating Checkout................................................................................................................................... 6
Accessing Account Information...............................................................................................................6
Accessing Order Details...........................................................................................................................6
Widget Setup............................................................................................................................................ 6
API Overview.......................................................................................................................................................8
Sample Integration............................................................................................................................................... 9
Initiating Inline Checkout.........................................................................................................................9
Selecting the Buyer Address.................................................................................................................. 10
Obtaining the Selected Shipping Address.............................................................................................. 11
Selecting the Payment Method...............................................................................................................12
Reviewing the Order.............................................................................................................................. 13
Completing the Transaction................................................................................................................... 14
Showing the Order Details on Your Website.........................................................................................16
ExpressCheckoutWidget.................................................................................................................................... 17
Description............................................................................................................................................. 17
Examples................................................................................................................................................ 17
Multiple Addresses.............................................................................................................................................19
Address Selection Page Integration....................................................................................................................20
Description............................................................................................................................................. 20
Example..................................................................................................................................................20
Testing the Integration....................................................................................................................................... 22
Exit Criteria............................................................................................................................................ 22
Ten Types of Test Transactions............................................................................................................. 22
Order Options Used When Testing Transactions...................................................................................22
Handling Settlements......................................................................................................................................... 23
Customizing the Pop-Up Window..................................................................................................................... 24
Checkout by Amazon | Overview of This Document | 3
Overview of This Document
Overview of Checkout by Amazon Inline Standard Checkout
Welcome to the Checkout by Amazon Inline Checkout Guide.
This section describes who should read this guide, how the guide is organised, 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 Standard Checkout using Checkout
by Amazon on your website.
Prerequisites
This guide assumes you--or your development staff--are familiar with using HTML and JavaScript in an application
development environment.
Before you can use Checkout by Amazon Inline Standard Checkout, your systems must meet the following
prerequisites:
•
•
•
You must be familiar with using web service APIs.
You must be familiar with using dynamic website programming.
You must be familiar with using JavaScript. (There are several required JavaScript code snippets that you must
use in your carts to enable Inline and Express Checkout.) Standard Checkout.)
For more information about using the Inline Standard Checkout Widgets, please see the following references:
•
•
•
Inline Checkout API Reference Guide
Inline Checkout Implementation Guide
Inline Checkout Widget Reference Guide
•
•
HTML Implementation Guide (PDF)
XML Implementation Guide (PDF)
Other Documentation
You can read our downloadable PDFs to understand more about Checkout by Amazon.
More Resources for Checkout by Amazon
Resource
Audience, Purpose, and Goals
Getting Started Guide
For merchants who want to use a simple, step-bystep approach in setting up Checkout by Amazon
on their websites. The Getting Started Guide walks
merchants through the process, from gathering the
required information for signing up for an account
to setting up a button on their websites.
Inline Checkout - Implementation Guide
For merchants and developers who want to
integrate Checkout by Amazon seamlessly into
their website. Inline Integration allows you to
integrate Checkout by Amazon completely into
your website using your layout. Your buyers can
4 | Checkout by Amazon | Overview of This Document
checkout using Checkout by Amazon without popups.
Standard Checkout - Callback API Guide
For developers who want to build their own
applications to calculate shipping rates as well as
promotional discounts and then send these results
to Checkout by Amazon.
Instant Order Processing Notifications Guide
For developers who want to automate order
notifications with Amazon Payments.
Managing Orders
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 2013-04-13
Revise links to other documentation
Release Date 2011-12-13
Release Date 2010-09-15
Changes to this document
Implementation Guide
•
Initial Release
Checkout by Amazon | Introducing Inline Checkout | 5
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
6 | Checkout by Amazon | Widgets Overview
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
We recommend you to use our Inline Integration Code Generator to generate the widgets that can be found in Seller
Central.
To render a widget, derive your code from 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.
script type='text/javascript'
src='https://static-eu.payments-amazon.com/cba/js/de/PaymentWidgets.js'>
</script>
<div id="AmazonWidget">
// Replace "AEIOU1234AEIOU" with your own merchantId value
<img src="https://payments.amazon.com/gp/cba/button?
cartOwnerId=AEIOU1234AEIOU"/>
</div>
<script>
new CBA.Widgets.XXXWidget ({
// Widget-specific parameters
}).render("AmazonWidget");
</script>
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 2.
4. Inside a script block, create an instance of the widget you want to display.
Checkout by Amazon | Widgets Overview | 7
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.
URL Domains Used in This Guide
The URL domain is specific for country to support internalization (i18n). That is, the JavaScript URL for DE is:
https://static-eu.payments-amazon.com/cba/js/de/PaymentWidgets.js
Production Widget
Please see this table for a list of URLs used for specific locales:
Locale
URL
DE
https://static-eu.payments-amazon.com/cba/js/de/
PaymentWidgets.js
Sandbox Widget
To test your integration in the Sandbox environment, use this URL.
Locale
URL
DE
https://static-eu.payments-amazon.com/cba/js/
de/sandbox/PaymentWidgets.js
8 | Checkout by Amazon | API Overview
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.
Checkout by Amazon | Sample Integration | 9
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.
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:
<script type='text/javascript'
src='https://static-eu.payments-amazon.com/cba/js/de/PaymentWidgets.js'>
</script>
<div id="AmazonInlineWidget">
// Replace "AEIOU1234AEIOU" with your own merchantId value
<img src="https://payments.amazon.de/gp/cba/button?
cartOwnerId=AEIOU1234AEIOU
&color=orange&size=large&background=white&type=inlineCheckout"/>
</div>
<script>
new CBA.Widgets.InlineCheckoutWidget({
// Replace "AEIOU1234AEIOU" with your own merchantId value
merchantId: "AEIOU1234AEIOU",
onAuthorize: function(widget) {
window.location = 'https://www.mydomain.com/?session=' +
widget.getPurchaseContractId();}
}).render("AmazonInlineWidget");
</script>
Once you complete this step, the Checkout with Amazon button will appear on your page.
10 | Checkout by Amazon | Sample Integration
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 "https://mydomain.com/". 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:
<script type='text/javascript'
src='https://static-eu.payments-amazon.com/cba/js/de/PaymentWidgets.js'>
</script>
<div id="AmazonAddressWidget"></div>
<script>
new CBA.Widgets.AddressWidget({
// Replace "AEIOU1234AEIOU" with your own merchantId value
merchantId: "AEIOU1234AEIOU",
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");
</script>
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:
Checkout by Amazon | Sample Integration | 11
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.
Sample Request
https://payments.amazon.de/cba/api/purchasecontract/
?Action=GetPurchaseContract
&SignatureMethod=HmacSHA256
&PurchaseContractId=amzn1.contract.1.1.2.23bc485cc4c6b0dc63cd7f8c0d3d8900
&AWSAccessKeyId=AKIAJKYFSJU7PEXAMPLE
&SignatureVersion=2
&Timestamp=2010-08-16T05%3A20%3A14.780-07%3A00
&Signature=CLZOdtJGjAo81IxaLoE7af6HqK0EXAMPLE
&Version=2010-08-31
Sample Response
HTTP Status 200 OK
<GetPurchaseContractResponse
xmlns="http://payments.amazon.com/checkout/v2/2010-08-31/">
<GetPurchaseContractResult>
<PurchaseContract>
<Id>amzn1.contract.1.1.f86d99c2943f98dc28d586c628413080</Id>
<ExpirationTimeStamp>2010-10-01T01: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>10101-9876</PostalCode>
<CountryCode>US</CountryCode>
</ShippingAddress>
</PhysicalDestinationAttributes>
</Destination>
12 | Checkout by Amazon | Sample Integration
</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. To render the
Wallet Widget, place the following code where you want the widget to appear.
<script type='text/javascript'
src='https://static-eu.payments-amazon.com/cba/js/de/PaymentWidgets.js'>
</script>
<div id="AmazonWalletWidget"></div>
<script>
new CBA.Widgets.WalletWidget({
// Replace "AEIOU1234AEIOU" with your own merchantId value
merchantId: "AEIOU1234AEIOU",
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");
</script>
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 Payment Method Widget will appear on your page:
Checkout by Amazon | Sample Integration | 13
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
<script type='text/javascript'
src='https://static-eu.payments-amazon.com/cba/js/de/PaymentWidgets.js'>
</script>
<div id="AmazonAddressWidget"></div>
<script>
new CBA.Widgets.AddressWidget({
// Replace "AEIOU1234AEIOU" with your own merchantId value
merchantId: "AEIOU1234AEIOU",
displayMode: "Read"
}).render("AmazonAddressWidget");
</script>
Wallet Widget
<script type='text/javascript'
src='https://static-eu.payments-amazon.com/cba/js/de/PaymentWidgets.js'>
</script>
<div id="AmazonWalletWidget"></div>
<script>
new CBA.Widgets.WalletWidget({
// Replace "AEIOU1234AEIOU" with your own merchantId value
merchantId: "AEIOU1234AEIOU",
displayMode: "Read"
}).render("AmazonWalletWidget");
</script>
14 | Checkout by Amazon | Sample Integration
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, 10.49 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
https://payments.amazon.de/cba/api/purchasecontract/
https://payments.amazon.de/cba/api/purchasecontract/
?Action=SetPurchaseItems
&AWSAccessKeyId=AKIAJKYFSJU7PEXAMPLE
&PurchaseContractId=amzn1.contract.1.1.1.975d70090d7caaafb24a12f1a2e071fa
&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=EUR
&PurchaseItems.PurchaseItem.1.PhysicalProductAttributes.Condition=New
&PurchaseItems.PurchaseItem.1.PhysicalProductAttributes.DeliveryMethod.
DestinationName=%23default
&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
Checkout by Amazon | Sample Integration | 15
&PurchaseItems.PurchaseItem.1.PhysicalProductAttributes.ItemCharges.
Promotions.Promotion.1.Discount.CurrencyCode=EUR
&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=EUR
&PurchaseItems.PurchaseItem.1.PhysicalProductAttributes.Weight.Unit=KG
&PurchaseItems.PurchaseItem.1.PhysicalProductAttributes.Weight.Value=3.14
&Signature=Signature=lBP67vCvGlDMBQ1dofZxg8E8SUEXAMPLE
&SignatureMethod=HmacSHA256
&SignatureVersion=2
&Timestamp=2010-08-16T05%3A11%3A07.616-07%3A00
&Version=2010-08-31
Sample Response for SetPurchaseItems
HTTP Status 200 OK
<SetPurchaseItemsResponse
xmlns="http://payments.amazon.com/checkout/v2/2010-08-31/">
<ResponseMetadata>
<RequestId>400bcf29-7ab1-11df-bcef-d35615e2b044</RequestId>
</ResponseMetadata>
</SetPurchaseItemsResponse>
Sample Request for CompletePurchaseContract
https://payments.amazon.de/cba/api/purchasecontract/
&Action=CompletePurchaseContract
?PurchaseContractId=
amzn1.contract.1.1.f86d99c2943f98dc28d586c628413080
&IntegratorId=MNOPQ1234MNOPQ
&IntegratorName=Integrator%20Inc
&InstantOrderProcessingNotificationURLs.
IntegratorURL=http%3A%2F%2Fintegrator.com%2Fiopn
&InstantOrderProcessingNotificationURLs.
MerchantURL=http%3A%2F%2Fmydomain.com%2Fiopn
&SignatureMethod=HmacSHA256&Expires=2010-10-18T12:00:00-07:00
&AWSAccessKeyId=0GS7553JW74RRM612K02EXAMPLE
&SignatureVersion=2
&Signature=Dqlp3Sd61jTUA9Uf6SGtEExwUQEXAMPLE
&Version=2010-08-31
Sample Response for CompletePurchaseContract
HTTP Status 200 OK
<CompletePurchaseContractResponse
xmlns="http://payments.amazon.com/checkout/v2/2010-08-31/">
<CompletePurchaseContractResult>
<OrderIds>
<OrderId>102-2432725-669014</OrderId>
<OrderId>101-7821075-313967</OrderId>
</OrderIds>
</CompletePurchaseContractResult>
<ResponseMetadata>
<RequestId>02055a12-8048-11df-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.
16 | Checkout by Amazon | Sample Integration
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.
<script type='text/javascript'
src='https://static-eu.payments-amazon.com/cba/js/de/PaymentWidgets.js'>
</script>
<p>Your Amazon Payments Order ID is <a href="#"
onclick="orderDetailsWidget.open('230px', '554px');">902-3317348-8724505</
a>.</p>
<script>
var orderDetailsWidget = new CBA.Widgets.OrderDetailsWidget({
// Replace "AEIOU1234AEIOU" with your own merchantId value
merchantId: "AEIOU1234AEIOU",
orderID: '902-3317348-8724505'
});
</script>
Checkout by Amazon | ExpressCheckoutWidget | 17
ExpressCheckoutWidget
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
<script type='text/javascript'
src='https://static-eu.payments-amazon.com/cba/js/de/PaymentWidgets.js'>
</script>
<div id="AmazonExpressWidget">
// Replace "AEIOU1234AEIOU" with your own merchantId value
<img src="https://payments.amazon.com/gp/cba/button?
cartOwnerId=AEIOU1234AEIOU&color=orange&size=large&background=white"/>
</div>
<script>
new CBA.Widgets.ExpressCheckoutWidget({
// Replace "AEIOU1234AEIOU" with your own merchantId value
merchantId: "AEIOU1234AEIOU",
onAuthorize: function(widget) {
window.location = 'https://www.mydomain.com/?session=' +
widget.getPurchaseContractId();}
}).render("AmazonExpressWidget");
</script>
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
<script type='text/javascript'
src='https://static-eu.payments-amazon.com/cba/js/de/PaymentWidgets.js'>
</script>
<div id="AmazonAddressWidget"></div>
<script>
18 | Checkout by Amazon | ExpressCheckoutWidget
new CBA.Widgets.AddressWidget({
// Replace "AEIOU1234AEIOU" with your own merchantId value
merchantId: "AEIOU1234AEIOU",
displayMode: "Read"
}).render("AmazonAddressWidget");
</script>
Wallet Widget
<script type='text/javascript'
src='https://static-eu.payments-amazon.com/cba/js/de/PaymentWidgets.js'>
</script>
<div id="AmazonWalletWidget"></div>
<script>
new CBA.Widgets.WalletWidget({
// Replace "AEIOU1234AEIOU" with your own merchantId value
merchantId: "AEIOU1234AEIOU",
displayMode: "Read"
}).render("AmazonWalletWidget");
</script>
Checkout by Amazon | Multiple Addresses | 19
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.
20 | Checkout by Amazon | Address Selection Page Integration
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.
Example
<script type='text/javascript'
src='https://static-eu.payments-amazon.com/cba/js/de/PaymentWidgets.js'>
</script>
<div id="AmazonInlineWidget">
// Replace "AEIOU1234AEIOU" with your own merchantId value
<img src="https://payments.amazon.de/gp/cba/button?
cartOwnerId=AEIOU1234AEIOU
&color=orange&size=large&background=white&type=inlineCheckout"/>
</div>
<script>
new CBA.Widgets.InlineCheckoutWidget({
// Replace "AEIOU1234AEIOU" with your own merchantId value
Checkout by Amazon | Address Selection Page Integration | 21
merchantId: "AEIOU1234AEIOU",
onAuthorize: function(widget) {
// load a customized Address Selection page with the Address Book Widget
enabled
}
}).render("AmazonInlineWidget");
</script>
We also recommend you to place the Inline Checkout button on your Address Selection page so buyers can benefit
from the convenience of accessing their Amazon Address Book while using many of the advanced features of your
checkout pipeline.
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.
22 | Checkout by Amazon | Testing the Integration
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.
2.
3.
4.
The button works in the Sandbox and in Production (that is, the order pipeline completes successfully).
The Production order appears in Amazon Payments site using buyer account login.
The Production order appears in Seller Central using merchant account login (on the Manage Orders page).
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 €1.00
4. 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.
2.
3.
4.
5.
6.
Item with a promotion
Item with multiple promotions
Item with per-item and per-shipment charges
Item with banded shipping
Item with One-day shipping
Item with Two-day shipping
Checkout by Amazon | Handling Settlements | 23
Handling Settlements
An order is created when you perform the CompletePurchaseContract operation. The order will get to the ReadyTo-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 Instant Order Processing Notification API Guide to learn more about fulfilling, cancelling, refunding,
and other order management functions.
24 | Checkout by Amazon | Customizing the Pop-Up Window
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.
Checkout by Amazon | Customizing the Pop-Up Window | 25
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.

Documentos relacionados