Pay with Amazon Application by Kibo eCommerce

Configuration Guide

Current Version: 1.0.0 (May 2015)
Install: Kibo eCommerce App Marketplace
More Info: Version History
Technical Specs & Tests

Amazon Payments is a fast, easy and trusted way for customers to make purchases on your website using information stored in their Amazon account. With the Pay with Amazon Application by Kibo eCommerce and accompanying theme upgrade, you can add Pay with Amazon buttons directly to your cart and checkout pages. This app enables your customers to take advantage of a one-click checkout experience while you benefit from Amazon's secure payment processing.

Application Features:

Setup Overview

The following steps are required before you can use Pay with Amazon on your site(s):

  1. Install the Pay with Amazon Application on your tenant.Note: If you create a new site in a tenant after installing the Pay with Amazon Application, you must reinstall the app to apply the payment configuration settings to the new site.
  2. Update your Kibo eCommerce theme.
  3. Configure Pay with Amazon on your Payment & Settings page.
  4. Enable the app.

Install the App

Kibo eCommerce offers two options for adding PayPal Express Checkout functionality to your tenant:

  1. (Recommended) Contact your Kibo eCommerce sales or professional services representative to install the Pay with Amazon Application by Kibo eCommerce on your tenant.
  2. Build the application from the Kibo eCommerce-provided code on GitHub and install it to Dev Center. This option requires that you have Arc.js enabled on your tenant, and is only recommended if you are working with Kibo eCommerce Professional Services or a Kibo eCommerce Partner and need a highly customized integration. Contact your sales or professional services representative for more information.
Note: If you create a new site in a tenant after installing the Pay with Amazon Application, you must reinstall the app to apply the payment configuration settings to the new site.

Update Your Kibo eCommerce Theme

Installing and configuring the Pay with Amazon app enables you to accept payments via Amazon Payments. However, you still must enable Pay with Amazon functionality on your storefront so that customers can use it. Kibo eCommerce provides a couple sample themes on GitHub that you can use to integrate Pay with Amazon functionality:

  1. Select your sample theme:
    • PayWithAmazon-Theme—Contains the full source files for the Kibo eCommerce Core 9 theme, with the required changes to enable Pay with Amazon. A branches of this theme is also available for Core 8.
    • ThirdpartyPayments-Theme—Contains the full source files for the Kibo eCommerce Core 9 theme, with the required changes to enable both Pay with Amazon and PayPal Express. Use this theme if you are enabling both payment options at the same time. A branch of this theme is also available for Core 8. Note that PayPal Express requires the installation of a separate app.
  2. Review and apply the changes made in our sample implementation to your own theme. You can run the git diff command in any command-line shell to see the differences between the sample implementation and your own theme.
  3. Use the Kibo eCommerce Theme Generator or run Grunt to build the theme.
  4. Upload the resulting ZIP file to Dev Center.
  5. Install the updated theme to the sandbox you're working in.
  6. In Admin, go to Main > Site Builder > Themes.
  7. Click the dots next to the new theme and select Apply.

For more information on working with themes, including modifying, uploading, installing, and applying a theme to your site, refer to the Theme Development Quickstart.

Configure the App

Configuration Requirements

Configure Your Payment Settings

After the Pay with Amazon application is installed, you must configure your payment settings in Admin to connect Kibo eCommerce with your Amazon Seller account:

Note: If you create a new site in a tenant that already has the Pay with Amazon Application installed, you must reinstall the app to apply the payment configuration settings to the new site.
  1. In Admin, go to System > Settings > Payments.
  2. Check the PayWithAmazon checkbox to display the configuration fields:
  3. Select the Amazon environment to use:
    • Sandbox—Use Amazon’s sandbox environment for testing your Pay with Amazon integration.
    • Production—Use a working Amazon environment that processes payments.
  4. Enter the following values, which you can obtain from Amazon Seller Central (https://sellercentral.amazon.com/):
    • Seller ID
    • Client ID
    • MWS Auth Token
  5. Select whether you want to Include the Billing Address from Amazon on Order.
  6. Select an AWS Region.
  7. Select an Order Processing method:
    • Authorize and Capture on Order Placement—Authorize AND capture payment when an order is placed.
    • Authorize on Order Placement and Capture on Order Shipment—Authorize a payment when an order is placed, but do not capture the payment until the order has shipped.
  8. Click Save to save your Pay with Amazon settings.

Whitelist Your Kibo eCommerce Site(s) in Amazon Seller Central

To enable users to log-in to Amazon from your Kibo eCommerce site(s), you must add each of your Kibo eCommerce site URLs as Allowed JavaScript Origins in Amazon:

  1. Log in to your Amazon Seller Central account.
  2. In the drop-down menu to the left of the Search field, select Login with Amazon.
  3. In the Applications list on the left of the page, select your Pay with Amazon application. Note: If the app does not appear in your Applications list, click the Register new application button and fill out the required fields.
  4. Scroll down to Web Settings and click Edit.
  5. Enter the secure (HTTPS) URL for your Kibo eCommerce site.
  6. (Optional) Click Add Another to add additional site URLs.
  7. Click Save.

Enable the App

After configuration, enable the Pay with Amazon Application in Kibo eCommerce to apply its functionality to your tenant:

  1. In Admin, go to System > Customization > Applications.
  2. Select the Pay with Amazon Application.
  3. Click Enable App on the app page.

Use the App

After you have installed the app and merged the theme changes, Pay with Amazon buttons appear on the cart and checkout pages of your Kibo eCommerce site.

Pay with Amazon from the Cart Page

With Pay with Amazon enabled, your customers see a Pay with Amazon button from the Cart page of your site. Complete the following steps to test the user experience:

Pay with Amazon button on the Cart page
Sample Cart page as it appears to a customer.

Note: The Pay with Amazon button in this example has a label indicating you are interacting with a Sandbox environment in Amazon Seller Central. You can switch between Amazon Production and Sandbox environments on the System > Settings > Payments page.

  1. Click the Pay with Amazon button to launch a modal browser window for Pay with Amazon.
  2. Create or log in to your Amazon account. Because you are testing the customer's experience, this should be a different account than your merchant account. You can also choose to remember your account info so you can skip the log-in process for future purchases.
  3. On the Shipping & Billing Summary page, select your preferred shipping address and payment method and from the options saved in your Amazon account. You also can add a new address from this page.
  4. Click Continue to go to the Kibo eCommerce Checkout page. The shipping information from Amazon appears in Kibo eCommerce, and an Amazon logo appears in the Payment Information section.
  5. (Optional) Apply coupons or make changes. You can change any of the information on the Checkout page up until the time you click Place Order. Kibo eCommerce automatically updates Amazon with any changes made through the Checkout page before the order is placed.
  6. Click Place Order. Kibo eCommerce adds any shipping, fees, and taxes to the total charged to your Amazon account, and removes any amount covered by discounts or gift cards.

Pay with Amazon from the Checkout Page

A customer who chooses Checkout from the Cart page can still check out with Amazon. Complete the following steps to test the user experience:

  1. On the Checkout page, select your Shipping Method. Note: Kibo eCommerce cannot change the addresses associated with an Amazon account. Any changes to the shipping or billing addresses on the Checkout page will be ignored.
  2. (Optional) Apply any coupons, gift cards, or store credits.
  3. Under Payment Information click the Pay with Amazon button:
    Pay with Amazon button on the Checkout page
    Sample Checkout page as it appears to a customer.
    If you are not already logged in to your Amazon account, a browser window appears and prompts you to log in.
  4. On the Shipping & Billing Summary page, select your preferred shipping address and payment method and from the options saved in your Amazon account.
  5. Select your preferred payment method.
  6. Click Continue to return to the Kibo eCommerce Checkout page.
  7. Click Place Order to complete the order.

Payment Authorization and Capture

Depending on the Order Processing method you chose when you configured the app, when a customer clicks Place Order on a Kibo eCommerce Checkout page, Kibo eCommerce either just authorizes the order or authorizes the order AND captures payment.

The order appears in the Orders module in Admin. The following images show how information on the order Payments tab maps to the Amazon Payment Details:

Figure 1: Sample Pay with Amazon order as it appears in Kibo eCommerce
Figure 1: A sample Pay with Amazon order in Kibo eCommerce.
Caption Description
1 The Order Number in Kibo eCommerce matches the Seller Order ID in Amazon.
2 The Billing Address appears as NA in Kibo eCommerce, because Kibo eCommerce does not get that information from Amazon. However, the Shipping Address, including the buyer name and email address, match in both systems.
3 The payment Method indicates this is a Pay with Amazon transaction.
4 The Reference ID in Kibo eCommerce matches the Amazon Reference ID. You can copy and paste this ID into the Search box on the Amazon Manage Transactions page to find the order in Amazon.
5 The Authorization ID in Kibo eCommerce matches the Seller Reference ID in Amazon.
6 The Transaction History entry for the payment authorization.
  • 6a - The Transaction ID for the payment authorization matches in both systems.
7 The Transaction History entry for the payment capture.
  • 7a - The Transaction ID for the payment capture matches in both systems.
Note: Amazon inverts the order in which the transactions appear.
Figure 2: Same order as it appears in Amazon
Figure 2: The Payment Details page for the same order in Amazon.

Returns

If you return or credit a payment in Kibo eCommerce, the return appears as a credit in the customer's Pay with Amazon account, and the value of the purchase is returned to the customer's credit card.

Declines

The Pay with Amazon Application does not process declines. If you decline a payment in Kibo eCommerce, you must also manually decline the payment in Amazon.