Login & pay with Amazon

If you have an account with Amazon, you can place a 'pay with amazon' button on your website's checkout to allow your customers to login to their Amazon account on your website, select a pre-saved delivery address and select their pre-saved payment method.

The 'pay with Amazon' button sits alongside the 'proceed to checkout' button on your website's shopping basket page.

Clicking the button will then take the user to the Amazon site to login.

Once logged in, on the checkout page the user will be able to select their address and billing information.

SSL Certificate Required!

You'll need to have an SSL certificate installed on your website in order to use the Amazon Payments module.


Installing the extension

Select 'apps and extensions' from the left menu and then 'available extensions'. Find the 'login and pay with amazon' extension and click to activate it on your account.

Once the extension is activated you'll then need to add the relevant code to your website's files (described below). Adding the code will place the form on your website. To add the relevant code you'll need to use the page editor, alternatively you can click the 'request installation' button and we'll install the code for you (a small charge will be made for the installation, which is listed on the extension page).

For self-installation

1. Locate the checkout_basket.twig file (located in /views/checkout pages/checkout_basket.twig)

2. Add the code shown below where you'd like the 'pay with amazon' button to appear. This must be added within the <form> tag.

{% if basket.amazon_payments %}
    <div id="amazon-payments-button"></div>
{% endif %}

At the bottom of the file, add the following code.

{% block scripts %}
    {{ parent() }}
    {% if basket.amazon_payments %}
        <script>
            var AmazonPaymentsSettings = {
                loginButtonId: 'amazon-payments-button'
            };
        </script>
        {% include 'shopwired/amazon_payments.twig' with { 'settings': basket.amazon_payments } only %}
    {% endif %}
{% endblock %}

3. Save your changes to this file.

4. Locate the checkout_address.twig file (located in /views/checkout pages/checkout_address.twig)

5. At the top of the checkout <form> add the code shown below.

{% if checkout.amazon_payments %}
    <div class="amazon-widgets">
        <div id="amazon-payments-address-book"></div>
        <div id="amazon-payments-wallet"></div>
    </div>
    <div>
        <button id="amazon-confirm-button">
            CONFIRM AND COMPLETE PAYMENT WITH AMAZON
        </button>
    </div>
{% endif %}

6. At the bottom of the file, add the code shown below.

{% block scripts %}
    {{ parent() }}
    {% if checkout.amazon_payments %}
        <script>
            var AmazonPaymentsSettings = {
                addressBookId: 'amazon-payments-address-book',
                confirmButtonId: 'amazon-confirm-button',
                walletId: 'amazon-payments-wallet',
                formId: 'checkout-form',
                onConfirm: function() {
                    $('#amazon-confirm-button').hide();
                    $('.amazon-widgets').hide();
                    $('button[name="amazon_payments_button"]').trigger('click');
                }
            };
        </script>
        {% include 'shopwired/amazon_payments.twig' with { 'settings': checkout.amazon_payments } only %}
    {% endif %}
{% endblock %}

7. Certain elements on the checkout/address page need to be hidden when the user has selected to pay by Amazon.

This is done by adding the code below within the class="" of those elements.

{{ checkout.amazon_payments ? ' hidden' : '' }}

For example,

<div class="row {{ checkout.amazon_payments ? ' hidden' : '' }}">

These elements are:

i) The delivery and billing address sections
ii) The payment buttons and terms & conditions section

8. Save your changes.

9. You will then need to add the following code to one of the theme's LESS or CSS files. You may only have one file (default.twig.css), so you can add the code in there. If you have multiple LESS or CSS files, strictly speaking, it shouldn't matter which file you add this to but we'd recommend adding it to one of the checkout.less files (if there is one for your theme) or something like global-style.less.

.amazon-widgets > div {
    width: 100%;
    height: 340px;
}
.checkout-form .hidden {
    display: none;
}

The exact height for .amazon-widgets is your choice, we recommend 340px.

10. Save your changes to the CSS/LESS file.


Setting up Amazon Payments within your account

1. Select 'checkout' from the left menu and then 'payment gateway'.

2. At the bottom of the page you'll be able to enter your account details for Amazon Payments, as shown in the example below.

3. You'll need to setup your Amazon account with a new application and ensure that:

i) The allowed javascript origin is set as your website address (including the https:// protocol), e.g. https://www.joesshoeshop.com
ii) The allower return URL set as https://www.yourdomainname.com/amazon/login (replacing yourdomainname.com with your website's actual domain name).