Buy with Prime post order elements

You need to create two new pages within your site theme.

Shopify

1. Open your Shopify admin.
2. On the side menu, under Sales channels, choose Online store, and then Pages.
3. Choose Add page.
4. In the Title field, enter the page name, for example “yourstore.com/pages/amzn-post-order”.
   Note: Page names can vary based on your preference. You can’t change the URLs after completing this process.
   

   

5. In the Content field, choose the HTML [<>] button.
6. Add the following code snippet to embed the Buy with Prime post order experience within your site:
   

   <amazon-order-management/>
   <script type="module" data-target-id="[your-target-id]" src="http://cdn.elements.amazon/elements/amazon-order-management/v1.0/web-component.js"></script>
   <amazon-order-management> </amazon-order-experience>

   Note: To find the target id, go to the Domain Allowlist page in merchant console.
7. In the Visibility section, choose Visible.
8. In the Template section, choose Default page.
9. Choose Save.
10. Repeat steps 2-3.
11. In the Title field, enter “yourstore.com/pages/amzn-post-order-redirect”.
12. In the Content field, choose the HTML [<>] button.
13. Add the following code snippet to integrate the Login with HAQM (LWA) authentication:
    

    <script async data-target-id="[your-target-id]" type="module" src=" http://cdn.elements.amazon/elements/amazon-sign-in/v1.0/web-component.js "></script>
    <amazon-sign-in hidden="true"></amazon-sign-in>

14. Repeat steps 7-9.
    

    

Login with HAQM (LwA) authenticates shoppers in the Buy with Prime post order flows embedded on your site. After authentication, shoppers see a consent screen. For more information about LwA, go to Login with HAQM Documentation.

Before you can use LwA on your site, you must register for a developer account and security profile through the HAQM Developer Console. During registration, you provide the name and description of your application, your logo, and a link to your privacy policy. Users see this information each time they use LwA on your site or mobile app. To register for LwA and a security profile, use the following steps:

1. Sign in to HAQM developer using your HAQM developer credentials.
2. Choose Create a New Security Profile.
3. In the Security Profile Management page, enter the following details:
   
   • Security Profile Name: Your site’s domain name. This name appears on the consent screen when users agree to share information with your application.
   • Security Profile Description: The internal description for your security profile.
   • Consent Privacy Notice URL: The location of your company or application’s privacy policy (for example, http://www.example.com/privacy.html). This link appears for users on the consent screen.
   • (Optional) Consent Logo Image: to add the logo image for your application, choose Upload Image. This logo is displayed on the sign in and consent screen to represent your business or website.
4. Choose Save. Your security profile is created, and you see this message “Login with HAQM successfully enabled for security profile”.

After creating a security profile or activating an existing security profile for LwA on the developer console, you can add settings for your website. To add a website to your profile, use the following steps:

1. If you’re not signed in, sign in to HAQM developer using your new security profile.
2. In the Login with HAQM Configurations section, choose the security profile that you created in Register for a developer account and security profile to use Login with HAQM.
3. In the Manage column, choose Web Settings.
   

   

4. Choose Edit.
5. Add the following details:
   
   • Allowed Origins: Add your website domain. For example, http://www.example.com.
   • Allowed Return URLs: Add the redirect page with the post order element code that you created in Create new pages for Buy with Prime post order elements. For example, http://www.example.com/pages/amzn-post-order-redirect.
6. Choose Save.

To activate post order elements on your site, share the following information with your Sales Representative or contact Merchant Support.

• Page URLs created in Create new pages for Buy with Prime post order elements
• Security Profile ID created in Register for a developer account and security profile to use Login with HAQM
• Client ID

To locate and copy these IDs, use the following steps:

1. If you’re not signed in, sign in to HAQM developer using your new Security Profile.
2. In the Login with HAQM Configurations section, choose the Security Profile that you created in Step 2.
3. In the Manage column, choose Security Profile.
4. Choose the General tab, and then copy your Security Profile ID (also known as LwA application ID).
5. Choose the Web Settings tab, and then copy your Client ID.

To add your site’s domain to the allow list within merchant console, use the following steps:

1. Sign in to merchant console.
2. On the side menu, choose Settings, and then Domains.
3. Verify if your site’s domain is on the allow list.
4. If not, add your site’s domain to the list.
5. Save your changes.

To ensure that shoppers can access the Buy with Prime post order elements, you need to surface an ingress or entry point across key locations on your site. Locations can include the header, footer, shipping/returns help pages, contact us page, order history and detail pages, and the Buy with Prime collection page. Use the following steps to implement the ingress using either a direct link or a Prime branded button, such as in the following example:

Shopify

1. Open your Shopify admin.
2. On the side menu, under Sales channels, choose Online store, and then Themes.
3. Create a duplicate of the theme file as a backup.
4. On the more actions (…) menu on your theme, choose Edit Code.
5. Choose the page where you want to add the ingress.
6. In the code editor, add a new Section.
7. In the new section, add the following code snippet:
   

   <script type="module" data-target-id="[your-target-id]" src="http://cdn.elements.amazon/elements/amazon-order-ingress/v1.0/web-component.js"></script>
   <amazon-order-ingress page-url="[http://yourstore.com/pages/amazon-order]"></amazon-order-ingress>

   
   Where:
   
   • target id: A unique value assigned to each Buy with Prime sales channel. You can find it on the Domain Allowlist page in merchant console.
   • page-url: The page you created for the Buy with Prime post order elements. For example, “http://yourstore.com/pages/amzn-post-order”.

8. (Optional) Add additional attributes to the code snippet:

   Configuration	Input parameter
   Choose to show the subtext or not (tracking, returns, support, and more)	show-explainer="true” or “false”
   Activate/deactivate the dark mode for the button background	color-mode="light” or “dark”
   Model the ingress as a link	type=”link”
   Set the order-id attribute to link to a specific order detail page. This is useful when the order ingress element is linked to a specific order, for example, on your native order detail page or on an order confirmation page. If no order-id is passed, the element links to the shopper’s order history page.	order-id=”{{order.id}}

Place a test order on your site, and then confirm that you can see and access the Buy with Prime post order elements. If you don’t see the link or button to the post order elements, contact Merchant Support.

Get answers to common questions about the Buy with Prime post order elements.