Amazon Pay Setup

This page outlines how to set up your LemonStand store to accept payments using Amazon Payments.

Adding Amazon Payments as a Payment Method

Please refer to the following docs before proceeding:

  • Payment Methods, for an overview of the general parameters available to a payment method.
  • Checkout Page, for an overview of how the Checkout page is implemented.
  • CMS Actions, for an overview of what CMS actions are and how they work.

To set up a Pay with Amazon account and connect it to your LemonStand store, please refer to Amazon's documentation for LemonStand. You'll need the following credentials from Amazon:

  • A Merchant ID/Seller ID
  • An MWS Authorization Token*
  • A Login with Amazon Application Client ID

What’s an MWS Authorization Token? 

An MWS Authorization Token is a token generated by Amazon Payments that allows us to complete transactions on your behalf with our application-level API credentials. 

How do I authorize LemonStand to make API requests on my behalf? 

1. Click on this link and complete the required steps.

2. Copy the MWS Authorization Token provided into the MWS Authorization Token configuration in your store’s Amazon Payments form.

Let's get started!

  1. Click the plus button on the Business Settings > Payment Methods page to add a new payment method
  2. Select Amazon Payments from the list of payment methods, and click the Continue button.
  3. Open the Configuration tab, and enter the credentials listed above into their respective fields.
  4. Toggle any of the additional settings to satisfy your use case.
  5. Click the Save button.

Your store is now configured to accept payments via Amazon Payments! Please follow the instructions below to implement in your theme if it does not have Amazon payments enabled by default.

Note

When an order is created in LemonStand, it is automatically assigned a LemonStand "Order ID" and a LemonStand "Order Number". These order identifiers are different from the related "Seller Order ID" that is recorded for the order payment in Amazon Seller Central. 


Theme Configuration for Amazon Payments CMS Action

A new CMS action has been introduced to facilitate the Amazon Payments checkout process, amazonPayments:checkout. It's a slightly modified implementation of the shop:checkout action. It follows the same steps, however.

Additionally, when the Amazon Payments payment method is enabled, the following variables will be injected into the following views:

  • amazonPayButton, into the cart view
  • amazonWidgetsJs, into all views
  • amazonAddressBookWidget, into all amazonPayments:checkout views
  • amazonWalletWidget, into all amazonPayments:checkout views.

To build out the front-end, we recommend adding pages and partials specific to the Amazon Payments:checkout CMS action, following the same patterns that our themes utilize in their traditional checkout views, but with swapped values for partial and CMS action references.

Let's use the Zest theme as an example. Adding the following page and partial views would allow you to step through an Amazon Payments checkout:

page-amazon-checkout, representative of a typical checkout page. This page'll sit on top of the amazonPayments:checkout action.

---
action: 'amazonPayments:checkout'
template: inner
protocol: all
published: true
name: 'Amazon Checkout'
url: /amazon-checkout
---
<div class="row">  
  <div class="content twelve columns">
    {% if not items.count %}
      <a class="secondary button" href="{{ site_url('shop') }}">Your cart is empty! Continue shopping.</a>
    {% else %}
      <div id="checkout-page">{{ partial('shop-amazon-checkout') }}</div>    
    {% endif %}  
  </div>
</div>

shop-amazon-checkout, representative of a typical shop-checkout partial.

{% if step == 'billing_info' %}
  {{ partial('shop-amazon-checkout-address') }}
{% elseif step == 'shipping_method' %}
  {{ partial('shop-amazon-checkout-shippingmethod') }}
{% elseif step == 'pay' %}
  {{ partial('shop-amazon-checkout-pay') }}
{% endif %}

amazon-checkout-progress, representative of a typical shop-checkout-progress partial.

{{ open_form({'class': 'custom'}) }}
  {% if step == 'billing_info' %}
    <div class="left">
      <ul class="mybreadcrumbs">
        <li class="active"><a href="#">Billing and Shipping</a></li>
        <li class="active"><a href="#">Shipping Method</a></li>
        <li class="active"><a href="#">Review and Pay</a></li>
      </ul>
    </div>
    <div class="clear"></div>
    <h2 class="left">Checkout Step 1 of 3 </h2>
    {% elseif step == 'pay' %}
    <div class="left">
      <ul class="mybreadcrumbs">
        <li><a href="#" data-ajax-handler="amazonPayments:checkout" data-ajax-update="#checkout-page=-shop-amazon-checkout, #breadcrumbs-area=amazon-checkout-progress, #mini-cart=shop-minicart" data-ajax-extra-fields="nextStep=billing_info">Billing and Shipping</a></li>        
        <li><a href="#" data-ajax-handler="amazonPayments:checkout" data-ajax-update="#checkout-page=shop-amazon-checkout, #breadcrumbs-area=amazon-checkout-progress, #mini-cart=shop-minicart" data-ajax-extra-fields="nextStep=shipping_method">Shipping Method</a></li>
        <li class="active"><a href="#">Review and Pay</a></li>
      </ul>
    </div>
    <div class="clear"></div>    
    <h2 class="left">Checkout Step 3 of 3 </h2>  
    {% else %}
    <div class="left">
      <ul class="mybreadcrumbs">
        <li><a href="#"  data-ajax-handler="amazonPayments:checkout"  data-ajax-update="#checkout-page=shop-amazon-checkout, #breadcrumbs-area=amazon-checkout-progress, #mini-cart=shop-minicart" data-ajax-extra-fields="nextStep=billing_info">Billing and Shipping</a></li>
        <li class="active"><a href="#">Shipping Method</a></li>
        <li class="active"><a href="#">Review and Pay</a></li>
      </ul>
    </div>
    <div class="clear"></div>
    <h2 class="left">Checkout Step 2 of 3 </h2>
  {% endif %}
{{ close_form }}

shop-amazon-checkout-address, representative of a typical shop-checkout-address partial. This view would contain your amazonAddressBookWidget.

{{ open_form({'class': 'custom', 'data-validation-message' : ''}) }}
  <div class="row">
    <!-- Place this where you would like the AddressBook Widget to appear -->
    {{ amazonAddressBookWidget }}
    <!--Place this where you would like the Wallet Widget to appear -->
    {{ amazonWalletWidget }}
  </div>
  <div class="twelve columns">
    <div class="right">
      <!-- See the onSetBillingAndShippignInfo AJAX handler implementation on the Checkout page's AJAX tab -->
      <a class="button" href="#" data-ajax-handler="amazonPayments:checkout" data-ajax-update="#checkout-page=shop-amazon-checkout, #breadcrumbs-area=amazon-checkout-progress, #mini-cart=shop-minicart">Next step</a>
    </div>
  </div>
  <input type="hidden" name="step" value="billing_info,shipping_info">
{{ close_form }}

shop-amazon-checkout-shippingmethod, representative of a typical shop-checkout-shippingmethod partial.

{{ open_form({'class': 'custom'}) }}
  <div class="row">
    <h3>Shipping Method</h3>
    <div class="six columns">
      {% if shippingOptions %}
        <input type="hidden" value="" name="shippingMethod">
        <table class="compact full-width" id="shipping-methods">
          {% for index, option in shippingOptions %}
            <tr>
              <td>
                <label for="{{ 'option'~index }}">
                  <!-- The shipping method radio button clicks are handled in the app.js -->
                  <input name="shippingMethod" {{ option.error_hint ? 'disabled' : null }} value="{{ index }}" {{ radio_state(shippingMethodInfo.id, option.id) }} type="radio" id="{{ 'option'~index }}"/> 
                  <span class="choice-title"> {{ option.shippingMethodName }}
                  {% if option.shippingServiceName %}: {{ option.shippingServiceName }} {% endif %}</span>
                  {% if option.error_hint %}
                    <span class="choice-description error-hint">{{ option.error_hint }}</span>
                  {% endif %}
                </label>
              </td>
              <td class="narrow">
                {% if not option.error_hint  %}
                  {{ not option.is_free ? option.quote|currency : 'free' }}
                {% endif %}
              </td>
            </tr>
          {% endfor %}
         </table>
       {% else %}
         <p>We are sorry, there are no shipping options available for your location.</p>
       {% endif %}
     </div>
     <div class="three columns data-list align-right" id="checkout-totals">
       {{ partial('shop-checkout-totals') }}
     </div>
   </div>
   {% if shippingOptions %}
     <div class="row">
       <div class="twelve columns">
         <div class="right">
           <a class="button" href="#" data-ajax-handler="amazonPayments:checkout" data-ajax-update="#checkout-page=shop-amazon-checkout, #breadcrumbs-area=amazon-checkout-progress, #mini-cart=shop-minicart">Place order & pay</a>
         </div>
       </div>
     </div>
   {% endif %}
     <input type="hidden" name="step" value="shipping_method,review" />
     <input type="hidden" name="nextStep" value="pay" />
{{ close_form }}

shop-amazon-checkout-pay, representative of a typical shop-checkout-pay partial.

{% if cart %}
  {{ partial('shop-cart-items') }}
  <div class="row">
  <div class="six columns">
    {% if order.payment_processed %}
      <p class="flash info"><strong>Thank you!</strong> The payment is already processed for this order.</p>
    {% else %}
     <div class="row">
       <div class="twelve columns">
         <div class="row">
           <div id="payment_form">
             {{ partial('shop-paymentform') }}</div>
           </div>
         </div>
       </div>
     {% endif %}
   </div>
   <div class="three columns offset-by-two data-list align-right">
     {{ partial('shop-checkout-totals') }}
   </div>
 </div>
{% else %}
  <p class="flash error">Order not found.</p>
{% endif %}

Add the amazonWidgetsJs variable as a set of the scripts contained with your head tags.

<head>
  {% if amazonWidgetsJs %}
    {{ amazonWidgetsJs }}
  {% endif %}
</head>

Finally, from your payment method's Pay Button Configuration view, set the Redirect Page option to be the page you've designated as your Amazon checkout page.

Store-Side Flow