How to introduce Amazon Pay to Shopify (with notes)

Amazon PayのShopifyへの導入手順 (注意点あり)

(Updated October 20, 2020)

What is Amazon Pay?

Amazon Pay is a payment service provided by Amazon.
Users who have an Amazon account can use the credit card information and shipping address information registered with Amazon to make payments on other sites. Since there is no need to enter payment information, address, etc. every time, users can be provided with a stress-free and smooth shopping experience.

Shopify, which boasts the world's largest number of cart systems installed, started introducing Amazon Pay, which is compatible with Amazon.co.jp in Japan, in October 2017, and is being adopted by many companies, large and small. .

Benefits of introducing Amazon Pay

  1. Lowering payment hurdles for new users
  2. Users can make payment and delivery procedures smoothly
  3. You can (indirectly) introduce credit card payments such as JCB that do not support Shopify Pay

In this article, we will explain how to set up Amazon Pay on Shopify and points to note.

How to bring Amazon Pay to Shopify

Apply for an account first

Before you can use Amazon Pay with Shopify, you need to have an Amazon Pay account. If you do not have an account yet, you can apply from the link below.
Amazon Pay application form

There are two points to note when applying.
First, only corporations can apply. We are not accepting individual applications at this time.
Second, the review process takes time. The review process usually takes 1-2 weeks. We recommend that you apply well in advance. Please note that even if you apply just before the site opens, it may not be implemented in time.

After passing the inspection, let's move on to the actual work. There are up to STEP7, but if it goes smoothly, Amazon Pay will be available on your site in about 5 to 10 minutes.

STEP1 : Prepare the Shopify management screen

Log in to your Shopify store admin screen. Click "Settings" on the bottom left, then "Payment Settings".

AmazonPay settings
[Shopify] Settings > Payment Settings

There is an Amazon Pay setting item in the middle row. From there, click "Activate Amazon Pay" and a page will appear where you can enter the required information. From now on, we will transfer (copy and paste) this necessary information from the Amazon management screen.

[Shopify] Payment settings
[Shopify] Payment settings

[Shopify] Amazon Pay
[Shopify] Amazon Pay

Leave this screen open, open another window, and proceed to the next step.

STEP2 : Login to Amazon Pay management screen (Seller Central)

Let's open the "Amazon Seller Central" login screen in a separate window.
Once logged into Amazon Seller Central, select "Amazon Pay (Production)" from the dropdown menu in the header.

Amazon Pay (production environment)
[Seller Central] Amazon Pay (production environment)

STEP3 : Register application information

Click "Integration" at the top left of the transition destination page and select "Integration Central".

[Seller Central] Integration Central

On the next screen, click the "Verify Application" button.

[Seller Central] Check the application

The Manage Client ID/Store ID settings page will open, select the appropriate store and click the "Edit" link.

[Seller Central] Application Information

After moving to the edit screen, register the following contents.

[Seller Central] Application Information

  • Application Name or Store Name: Site name (visible to buyers)
  • Description: Site description (administrative, not visible to buyers)
  • Logo data: Displayed when you log into Amazon on the site. The image will be changed to 150 x 50px, so we recommend uploading an image with the same ratio.
  • Privacy Policy URL: URL of the corresponding page on the site
  • Allowed JavaScript Origin (Optional): Paste the URL displayed on the Shopify management screen below
  • Allowed return URL (optional): Paste the URL displayed on the Shopify management screen below

Copy the two URLs "Allowed JavaScript origin" and "Allowed return URL" in the Shopify management screen that you left open on the Amazon Pay management screen and click the "Save changes" button. increase.

[Shopify] Amazon Pay
[Shopify] Amazon Pay

STEP4 : Enter each ID and access key

Again, select "MWS Access Key" from "Integration" in the header menu.

[Seller Central] MWS Access Key

You'll see each piece of information you need to enter into your Shopify admin screens. "Secret access key" will be displayed when you press the "Show secret" button.

[Seller Central] MWS Access Key

Copy and paste the content corresponding to each number into the Shopify admin screen that you keep open.

[Shopify] Amazon Pay
[Shopify] Amazon Pay

After entering the information, the "Activate Amazon Pay" button will become active, so click it.

[Shopify] Amazon Pay
[Shopify] Amazon Pay

STEP5 : Change Shopify Checkout Settings

Here is the final task.
From the Shopify admin screen "Settings" select "Checkout" and look for "Form Options" in it.

[Shopify] Checkout settings
[Shopify] Checkout settings

As shown above, select "Full name: Require last name only" and "Shipping phone number: Let me choose or require" and click the "Save" button at the bottom right of the page.

All settings are now complete. After that, check the display and behavior on the implemented site.

Points to note when setting

Input form placeholder wording

If "Full name" is set to "Require last name only" in STEP7, "First name (optional)" will be displayed in the "First name" input form. When the buyer uses Amazon Pay, Amazon's registration information is referenced, so this is unlikely to be a problem, but when the buyer manually enters the shipping address information, such as when making a normal credit card payment, misunderstandings can occur. You may enter only your last name. Basically, both "last name" and "first name" should be required for shipping address information, so it is safer to correct the relevant parts in the language settings.

Shopify admin > Online store > Themes > Actions > Edit language > Checkout & system

Search for "any" in the above settings page and try to find it.
The same applies when the phone number is set to "Let me choose".

[Shopify] Edit language
[Shopify] Edit language

If the return URL is different, the payment will not go through

If you set up without connecting the domain before the shop opened, the URL may have changed after the shop opened. When connecting your own domain to Shopify, you need to set up Amazon Pay after connecting the domain.

Be careful when using the Buy Button

Shopify's default feature allows you to add a sales channel called "Buy Button". This "Buy Button" is a convenient function that allows you to purchase products directly on the site after having them introduced to external blogs. However, if you have introduced Amazon Pay on the original site, you need to be careful.

The reason why you need to be careful is that when you install the "Buy Button", the URL referenced as the original site is not the URL with your own domain, but the Shopify management domain (xxx.myshopify.com). As mentioned above, if the return URL (domain) is different, Amazon Pay will display an error screen during payment, so countermeasures are necessary.

The countermeasure is to add the URL of Shopify's management domain to the "JavaScript origin" and "Return URL" registered in your own domain.
From the Amazon login web settings "Edit", click "Add more" for "JavaScript origin" and "Return URL" and enter the following information.

JavaScript origin: Shopify admin domain URL (xxx.myshopify.com)
Return URL: URL where the domain part of the set URL is replaced with Shopify's management domain

[Seller Central] Web Settings
[Seller Central] Web Settings

By setting the above figure, you will be able to complete the purchase without stopping with an error even when purchasing with the Buy Button.

Advance application required

As I mentioned at the beginning, prior application and approval is required to introduce Amazon Pay. You can't proceed with the above work unless you pass the screening, so if you are considering introducing Amazon Pay, apply early.
If you haven't applied yet, please do so here.
Amazon Pay application form

コマースメディア株式会社

国内3社目のShopifyエキスパートとして、サイトの制作・運営・物流までワンストップでサービスを展開しています。
ご相談等ございましたら、下記フォームよりお気軽にお問い合わせください。

積極採用実施中!詳しくはこちら
積極採用実施中!詳しくはこちら