|
This article will show you how to add Amazon Pay Checkout V2 to your Shift4Shop store.
Please click on a link below to go to that section of the article:
Please Note
Shift4Shop's Amazon Pay module can only be used with U.S. Amazon accounts. Also, be aware that the payment method is not compatible with HTML4 templates. Therefore you will also need to make sure your site is using an HTML5 or Core theme in order to use it.
Setting up Amazon Pay Checkout V2
back to top
The following instructions should be followed if you are setting up Amazon Pay on your Shift4Shop store for the very first time. If you have previously set up Amazon Pay on the store, please follow the instructions listed at the end of this article in the Upgrading from Amazon Pay - Legacy section.
- Log into your Shift4Shop Online Store Manager
- Using the left hand navigation menu, go to Settings >Payment
- Click the "Select Payment" button under the Payment Methods section.
Under the "Recommended Payment Solutions section, you will see "Amazon Pay" and a brief description of the payment method. To the far right of the payment option, you will see a toggle switch set to the "off" position. To continue:
- Click on the Amazon Pay toggle switch to turn the module on.
- Next, click on the button labeled "Click to Connect with Amazon" and begin the onboarding process.
During the onboarding process, you'll be taken to a page where you can either create a new Amazon Pay merchant account or sign into your existing account. Once you complete the process of creating (or configuring your existing) merchant account, you'll be directed back to your Shift4Shop Online Store Manager and the payment method will be activated.
Important
Please note that the Amazon Pay Onboarding process only works for Safari and Firefox browsers currently. Please ensure you are using one of these browsers when doing so.
Additional Information
Once onboarding is complete, the Amazon Pay module will also contain the additional settings that you can use to fine tune the payment method. These additional settings include setting the payment method to Authorize Only, as well as limiting the payment method to specific customer groups, regions and order amount ranges as needed. Additionally, you will also have a checkbox that will place the payment method into "Test Mode"
Please make sure that Test Mode is unchecked if you are in the production/live environment.
Test Mode should only be used in a sandbox/test environment and it requires an Amazon Pay Sandbox test account to make purchases.
After you've configured the additional settings to meet your needs, click "Save" at the top right of the page to set them.
Congratulations, your store can now accept payments with Amazon Pay!
Note:
If you were previously integrated with the earlier version of this payment method (Amazon Pay - Legacy), please see below for steps on upgrading to the new integration.
Upgrading from Amazon Pay - Legacy
back to top
Amazon Pay released a new version of their checkout platform which offers increased checkout conversion by providing a streamlined experience with improved decline handling and recovery. Shift4Shop will continue to support the legacy version of Amazon Pay, however the steps shown below will describe how to upgrade the checkout to the latest version.
Tip
Rather than disabling the legacy checkout and enabling the new checkout, Amazon's recommended approach is to enable the new checkout and then change the legacy checkout's advanced settings to have a minimum and maximum order amount of $0. This will ensure that any previous orders on the legacy checkout can still be processed if they have not been captured yet. It also ensures that any previous orders placed on the legacy checkout can still be refunded.
To enable the new checkout:
- Log into your Shift4Shop Online Store Manager
- Using the left hand navigation menu, go to Settings >Payment
- Click the "Select Payment" button under the Payment Methods section.
Under the "Recommended Payment Solutions section, you will see "Amazon Pay" and a brief description of the payment method. To the far right of the payment option, you will see a toggle switch set to the "off" position. To continue:
- Click on the Amazon Pay toggle switch to turn the module on.
- Next, click on the button labeled "Click to Connect with Amazon" and begin the onboarding process.
If you already have the legacy Amazon Pay checkout enabled, your credentials will automatically be applied to the new checkout. You will also see the following popup message:
The popup message is simply asking you to disable one of the Amazon Pay versions since you have both the new and the legacy one enabled. In the next few steps, we'll show you how to disable the legacy one in such a way where it won't appear to users, but still remain active for capture/refunds on previous orders. (See tip section above).
- Scroll down to the "Payment Methods" section and locate the payment method labeled "Amazon Pay - Legacy"
This is the previously integrated method.
- Look to the far right of the method and click on the Action Wheel
- Next, click on the "Advanced Settings" option
- In the advanced settings popup, change both the Minimum Order and Maximum Order amounts to 0 as shown below
- Click "Save" to finish
Setting the order amount ranges in this fashion will prevent the legacy checkout method from showing up for any products and future orders. However, the method will still be available on your store for captures and refunds on previous orders made with the legacy payment module.
The format for the new checkout is different than previous incarnations of the payment module. Therefore, if you have HTML template customizations in your checkout and view cart pages, you'll need to revert those HTML templates back to the common folder. This is neccessary in order to make sure your store has the latest coding for Amazon Pay.
The following templates are affected:
- view_cart.html
- checkout-singlepage.html
(or checkout-step1.html, checkout-step2.html & checkout-step3.html if you are using multi-step checkout)
- checkout_wallet.html
Tip
If your theme folder does not contain these templates, then there's no need to revert back to common as the store's theme is already using the most up-to-date files
Checkout Customization
By default, the new Amazon Pay payment method will show up on the top of the checkout page. If you would like to move the button further down to the regular - "Choose One Payment Method" - section, follow the steps shown below:
Please Note
The following information is provided solely as a courtesy and to offer basic instructions on making changes to your store's HTML templates.
Please understand that - regardless of how simple or complex the changes may be - HTML changes and troubleshooting fall outside the scope of our support department. The Shift4Shop support team is neither trained, qualified, nor allowed to make these changes for you. The boundary of our scope in this matter is limited to providing these instructions and helping you reset the template if the changes don't work as you wanted.
If you are uncomfortable with making changes to your site's HTML, please contact your sales representative and inquire about our HTML and design services which can make these changes for you.
Thank you for your understanding
Before taking the following steps, please make a backup of your template. The template you will be editing for this is called checkout-singlepage.html (or checkout-step3.html if you're using multi-step checkout.)
In your favorite text or HTML editor, open the template file and proceed with the following:
- Locate and remove the following 2 blocks of code:
<!--START: Amazon_Pay--> <div id="AmazonPayButton2" class="amazon_pay_button"></div> <!--END: Amazon_Pay-->
----------
<!--START: Amazon_Pay_JS--> [AmazonPay_JS] <!--END: Amazon_Pay_JS-->
- Next, find the block of code with the divPaymentMethods ID. It will look something like:
<div id="divPaymentMethods" class="divPaymentMethods">
- Add the following code within the divPaymentMethods section:
<!--START: Amazon_Pay_Checkout--> <div class="dpm-provider PayWithAmazon wallet-method"> <h4>Check out with Amazon Pay</h4> <div name="divPaymentOption"> <!--START: Amazon_Pay--> <div id="AmazonPayButton2" class="amazon_pay_button" style=="margin:0px;"></div> <!--END: Amazon_Pay--> <!--START: Amazon_Pay_JS--> [AmazonPay_JS] <!--END: Amazon_Pay_JS--> </div> </div> <!--END: Amazon_Pay_Checkout--> Here is the preview of how the checkout page will look with the customizations above:
|