Amazon Prime on Your Site
— Implementation Guide
| TOC | 2
Contents
Overview of Checkout by Amazon.................................................................................................3
Who Should Read This Document........................................................................................................................3
Prerequisites.......................................................................................................................................................... 3
Your Tasks When Integrating Checkout by Amazon Prime on Your Website.....................................................3
Other Documentation............................................................................................................................................ 4
What's New in This Document..............................................................................................................................4
Notice About Amazon Payments Services Functionality..................................................................................... 5
Copyrights............................................................................................................................................................. 5
Enabling Amazon Prime on Checkout by Amazon...................................................................... 6
Adding the Code to Your Detail Page to Enable Prime........................................................................................ 6
PrimeWidget Parameters.......................................................................................................................................6
Adding the Code to Your Cart Page to Enable Prime...........................................................................................7
Selecting Your Widget Layout....................................................................................................... 8
Horizontal Widget................................................................................................................................................. 8
Vertical Widget..................................................................................................................................................... 8
For Existing Checkout by Amazon Merchants..................................................................................................... 8
| Overview of Checkout by Amazon | 3
Overview of Checkout by Amazon
Welcome to the Amazon Prime on Your Site — Implementation 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 is for merchants who have registered with Checkout by Amazon and want to offer Prime benefits on
their website. It describes the integration steps required to place the Amazon Prime widget on their webpage for the
purpose offering free Two-Day shipping to Amazon Prime customers shopping on their website.
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, your systems must meet the following prerequisites:
•
•
•
•
You must have a shopping cart on your site and make it available for processing using XML. (That is, no matter
what tool you use to build your shopping cart, you must be able to send it as XML for processing.)
You must be familiar with using JavaScript. (There are several required JavaScript code snippets that you must
use in your carts to enable Standard Checkout and Express Checkout.)
Your cart XML, when submitted for processing, must use the XMLNS named http://payments.amazon.com/
checkout/2009-05-15
You must be using the order.xsd with the file date of 2009-05-15 or later. (Download this version here.)
Your Tasks When Integrating Checkout by Amazon Prime on Your Website
You have four basic tasks to accomplish when integrating Checkout by Amazon Prime on your site:
1.
2.
3.
4.
5.
6.
7.
8.
Create a production cart using XML
Sign your cart
Base64-encode your cart
Add the signature to the cart
Place the Checkout by Amazon Prime Widget code on your test detail page
Test your Checkout by Amazon Prime Widget by placing a test Production order
Cancel your test Production order
Place the Checkout by Amazon Prime Widget on your live (Production) detail pages
For Steps 1 - 4, please see the Standard Checkout - XML Implementation Guide to learn how to create, sign and
base64-encode the cart XML.
For Step 5, please see Enabling Amazon Prime on Checkout by Amazon on page 6
For Steps 6 - 8, please see the Standard Checkout - XML Implementation Guide to learn how to test your Checkout
by Amazon Prime Widget by placing and canceling a test Production order, and then place the Checkout by Amazon
Prime Widget on your live (Production) detail page.
The rest of this document discusses how to accomplish these tasks.
| Overview of Checkout by Amazon | 4
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-by-step 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.
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
For merchants who want an overview of Seller Central.
Standard Checkout Callback API Guide
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.
Standard Checkout
- Callback API
Developers Cheat
Sheet
For developers who want a quick, 1-page summary of how to enable callbacks.
Instant Order
Processing
Notifications Guide
For developers who want to automate order notifications with Amazon Payments.
Using Custom Data
Fields Guide
For merchants and developers who want to include custom data fields in their carts.
Best Practices Guide
Tips for setting up your website to use Amazon Payments, with advice for planning, setting
up, and day-to-day operations.
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
Table of Changes
Ver
Date
Changes
1.3
21-Nov-2013 Added new section Notice About Amazon Payments Services Functionality on page 5
| Overview of Checkout by Amazon | 5
Ver
Date
Changes
1.2
13-Apr-2013
Update related documents
1.1
25-Oct-2010
Updated widget method name from PrimeCheckoutWidget to PrimeWidget.
Example: new CBA.Widgets.PrimeWidget
1.0
10-Apr-2010
Initial release
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.
Copyrights
Copyright © 2010-13 by Amazon.com, Inc, or its affiliates.
Checkout by Amazon is a service of Amazon Payments, LLC.
| Enabling Amazon Prime on Checkout by Amazon | 6
Enabling Amazon Prime on Checkout by Amazon
Adding the Code to Your Detail Page to Enable Prime
After you have the signed and base64-encoded the XML string, you can add the following code to your
detail pages to get the Checkout by Amazon Prime Widget on your detail page. Please note that the div with
"id=cbaButton1" identifies the location where the Checkout by Amazon Prime Widget will be rendered. You
can put that div anywhere on your page and assign any unique ID to it. You then provide that unique ID to the
widget object which will then use it to locate the div.
<script type="text/javascript"
src="https://static-na.payments-amazon.com/cba/js/us/PaymentWidgets.js">
</script>
<!-Place this div where you want the prime widget to be rendered
-->
<div id="cbaButton1"></div>
<!-You can add the script block anywhere on your page after the above div
block
-->
<script>
new CBA.Widgets.PrimeWidget({
merchantId:'AEIOU1234AEIOU',
orderInput: {format: "XML",
value:"type:merchant-signed-order/
aws-access-key/1;order:PD94bWwgdmVyc2lvbj0nMS4wJyBlbmNvZGluZz0nVVRGLTgnPz
48T3JkZXIgeG1sbnM9J2h0dHA6Ly9wYXltZW50cy5hbWF6b24uY29tL2NoZWNrb3V0LzIwMDgt
MTEtMzAvJz48Q2FydD48SXRlbXM+PEl0ZW0+PFNLVT5BQkMxMjM8L1NLVT48TWVyY2hhbnRJZD
5BMUVKTjJKSUcxMEs2NzwvTWVyY2hhbnRJZD48VGl0bGU+UmVkIEZpc2g8L1RpdGxlPjxQcmlj
ZT48QW1vdW50PjE5Ljk5PC9BbW91bnQ+PEN1cnJlbmN5Q29kZT5VU0Q8L0N1cnJlbmN5Q29kZT
48L1ByaWNlPjxRdWFudGl0eT4xPC9RdWFudGl0eT48RnVsZmlsbG1lbnROZXR3b3JrPk1FUkNI
QU5UPC9GdWxmaWxsbWVudE5ldHdvcms+PC9JdGVtPjwvSXRlbXM+PC9DYXJ0PjwvT3JkZXI+
;signature:0nppbXTktfoV80Kh41GK7ruUhq8= ;aws-access-keyid:
19G7E7X2QE2V45LETX2E"},
primeSettings: {orientation:'horizontal'}
}).render("cbaButton1");
</script>
PrimeWidget Parameters
The PrimeWidget object is initialized with input parameters that are passed as JSON structure. Each input parameter
is explained in more detail below.
Table 1: Prime Checkout Widget Parameters
Widget Parameter
Required
Description
merchantId
Yes
This is your Merchant ID. You can find your Merchant ID in Seller
Central (Account Settings > Checkout Pipeline Settings).
orderInput
Yes
This is where you pass the base64-encoded and signed string from
Step 4 to the widget. The orderInput is a hash map with 2 keys.
| Enabling Amazon Prime on Checkout by Amazon | 7
Widget Parameter
Required
Description
• Format: The value associated with this key is "XML" ,
• Value: The value associated with this is the base64-encoded
cart XML with signature appended. Please refer to the XML
Integration Guide on how to construct this string
primeSettings
No
The primeSettings is a hash map with a single key named
"orientation." The orientation identifies whether the widget is
rendered horizontally or vertically. Please see the section below for
code samples.
We currently support 2 orientation values, "horizontal" and
"vertical."
If no value is provided, the widget uses the default value
"horizontal."
The PrimeWidget object has a method named "render" which must be called after the object is created. The input to
that method is the ID of the div where the widget will be rendered. When the method is called, the widget contents is
rendered and made visible inside that div.
Adding the Code to Your Cart Page to Enable Prime
The steps you take to enable Prime on your cart page are no different than the current integration steps described in
Standard Checkout - XML Implementation Guide.
If the shopping cart contains any Prime-eligible item, then the Checkout by Amazon cart page that appears on your
website will guide the buyer appropriately.
Note: You must specify the Fulfillment Network as "AMAZON_NA" when you want to enable Prime on
your side.
Example: <FulfillmentNetwork>AMAZON_NA</FulfillmentNetwork>
| Selecting Your Widget Layout | 8
Selecting Your Widget Layout
Horizontal Widget
Vertical Widget
For Existing Checkout by Amazon Merchants
If you are already launched with Checkout with Amazon, then after creating, signing and base64-encoding the Cart
XML, you have already added the following HTML code to your cart page. Please note that your cart page integration
should remain as-is.
<script type="text/javascript"
src="https://images-na.ssl-images-amazon.com/images/G/01/cba/js/
jquery.js">
</script>
<script type="text/javascript"
src="https://images-na.ssl-images-amazon.com/images/G/01/cba/js/widget/
widget.js">
</script>
<form method="POST" action="https://payments.amazon.com/checkout/
AEIOU1234AEIOU">
<input type="hidden" name="order-input" value="type:merchant-signed-order/
aws-access-key/1;order:PD94bWwgdmVyc2lvbj0nMS4wJyBlbmNvZGluZz0nVVRGLTgnPz
48T3JkZXIgeG1sbnM9J2h0dHA6Ly9wYXltZW50cy5hbWF6b24uY29tL2NoZWNrb3V0LzIwMDgt
MTEtMzAvJz48Q2FydD48SXRlbXM+PEl0ZW0+PFNLVT5BQkMxMjM8L1NLVT48TWVyY2hhbnRJZD
5BMUVKTjJKSUcxMEs2NzwvTWVyY2hhbnRJZD48VGl0bGU+UmVkIEZpc2g8L1RpdGxlPjxQcmlj
ZT48QW1vdW50PjE5Ljk5PC9BbW91bnQ+PEN1cnJlbmN5Q29kZT5VU0Q8L0N1cnJlbmN5Q29kZT
48L1ByaWNlPjxRdWFudGl0eT4xPC9RdWFudGl0eT48RnVsZmlsbG1lbnROZXR3b3JrPk1FUkNI
QU5UPC9GdWxmaWxsbWVudE5ldHdvcms+PC9JdGVtPjwvSXRlbXM+PC9DYXJ0PjwvT3JkZXI+
;signature:0nppbXTktfoV80Kh41GK7ruUhq8=
;aws-access-keyid:19G7E7X2QE2V45LETX2E">
<input alt="Checkout with Amazon Payments"
src="https://payments.amazon.com/gp/cba/button?ie=UTF8&color=orange
&background=white&cartOwnerId=AEIOU1234AEIOU&size=medium"
type="image">
</form>
For Prime merchants, the final code to initiate the widget on the detail page will appear as follows. Please note that
this code must be added only to the detail page.
<script type="text/javascript"
src="https://static-na.payments-amazon.com/cba/js/us/PaymentWidgets.js">
</script>
<!-Place this div where you want the prime widget to be rendered
-->
<div id="cbaButton1"></div>
<!--
| Selecting Your Widget Layout | 9
You can add the script block anywhere on your page
after the above div block
-->
<script>
new CBA.Widgets.PrimeWidget({
merchantId:'AEIOU1234AEIOU',
orderInput: {format: "XML",
value:"type:merchant-signed-order/
aws-access-key/1;order:PD94bWwgdmVyc2lvbj0nMS4wJyBlbmNvZGluZz0nVVRGLTgnPz
48T3JkZXIgeG1sbnM9J2h0dHA6Ly9wYXltZW50cy5hbWF6b24uY29tL2NoZWNrb3V0LzIwMDgt
MTEtMzAvJz48Q2FydD48SXRlbXM+PEl0ZW0+PFNLVT5BQkMxMjM8L1NLVT48TWVyY2hhbnRJZD
5BMUVKTjJKSUcxMEs2NzwvTWVyY2hhbnRJZD48VGl0bGU+UmVkIEZpc2g8L1RpdGxlPjxQcmlj
ZT48QW1vdW50PjE5Ljk5PC9BbW91bnQ+PEN1cnJlbmN5Q29kZT5VU0Q8L0N1cnJlbmN5Q29kZT
48L1ByaWNlPjxRdWFudGl0eT4xPC9RdWFudGl0eT48RnVsZmlsbG1lbnROZXR3b3JrPk1FUkNI
QU5UPC9GdWxmaWxsbWVudE5ldHdvcms+PC9JdGVtPjwvSXRlbXM+PC9DYXJ0PjwvT3JkZXI+
;signature:0nppbXTktfoV80Kh41GK7ruUhq8= ;aws-access-keyid:
19G7E7X2QE2V45LETX2E"},
primeSettings: {orientation:'horizontal'}
}).render("cbaButton1");
</script>
1. Include the new the external JavaScript file.
2. You decide where the Checkout by Amazon with Prime button is to appear by placing a div element at the
location you want and then naming it with a unique ID. Then you pass that ID to our widget which renders the
button image inside the div element where you placed it.
3. To render the Checkout by Amazon with Prime button, you initiate a JavaScript object named
"AmazonCheckout.PrimeWidget." You pass three input parameters to this object. Please note that the input to the
object is a JSON structure.
a. merchantId
b. The orderInput hash map with the format set to "XML" and the value set to the base64-encoded XML string
(the same string that you used in V1 of the cart code)
c. The orientation value inside the primeSettings hash map
4. Finally, you call the render method of the created object and pass the location of the div element where the
button is to be positioned.
Note: You must specify the Fulfillment Network as "AMAZON_NA" when you want to enable Prime on
your side.
Example: <FulfillmentNetwork>AMAZON_NA</FulfillmentNetwork>