📘

Buy with Prime API is now available for early access

Sign up for early access to the Buy with Prime API using the 'Sign Up' button below. The API may change as Amazon receives feedback and iterates on it.

Sign Up

You can use your chosen payment service provider(s) to accept payments for Buy with Prime orders on your site. This topic provides an example of a typical experience that shoppers can expect when you implement that workflow.

The images shown in this topic are only recommendations. For a library of Buy with Prime user interface (UI) components that you can use to customize the Buy with Prime experience, ask your Buy with Prime solutions architect.

If your site allows payment by digital wallets, be sure to review Step 9: Payment to see how the checkout flow works with Buy with Prime, particularly for carts that contain a mix of products that are eligible for Buy with Prime, and not eligible for Buy with Prime.

Overview

The following diagram shows an overview of a typical shopper journey after you integrate Buy with Prime into your site using your chosen payment provider. There are several possible variations of this journey – for example, you might enable the shopper to sign in on your checkout page as well as on your cart page. We provide the following flow as just one example.

Steps in the shopper journey

The following steps describe a typical shopper journey after you integrate Buy with Prime into your site:

1. Discovery
2. Cart building
3. Cart review
4. Authentication to Amazon
5. Access shopper profile data
6. Prime member verification
7. Return to cart
8. Checkout
9. Payment
10. Order management

Step 1: Discovery

As shoppers browse your site, you can help them discover items on your site that are eligible for Buy with Prime in the following places:

• Search Results: On your website’s search results page, consider adding a Prime badge to indicate that an item is eligible for Buy with Prime. The following image shows the Prime badge.

• Categories: Your site might have dedicated pages for categories of items in your catalog. On these category pages, consider adding a Prime badge on product thumbnails or titles to indicate that an item is eligible for Buy with Prime. You might also consider having an entire collections page dedicated to only items that are eligible for Buy with Prime. In this case, add a category called "Buy with Prime" to your navigation menu.
• Product detail page: Typically, shoppers who are interested in an item first visit the item’s product detail page. We therefore strongly recommend that you can add a card to your product detail page to indicate that the item is eligible for Buy with Prime. The card can contain additional information such as return eligibility and a link to learn more about how Buy with Prime works. The following card shows how this information might look on your site if you Use the Buy with Prime UI Library.

Step 2: Cart building

As a shopper adds items to their cart, some of the items might be eligible for Buy with Prime, and some not. There’s no need for you to maintain a separate cart for items that are eligible for Buy with Prime. Shoppers can add a mix of products to your cart and still check out with a mix of items that are and aren’t eligible for Buy with Prime using your native checkout.

Step 3: Cart review

When a shopper is ready to check out, they likely want to first review their cart. The following image shows what a shopper might see on your cart page when there is a mix of items that are and aren’t eligible for Buy with Prime.

On the cart page, you might choose to add the following indicators of Buy with Prime:

• A "Prime eligible" badge alongside items in the cart that are eligible for Buy with Prime.

• A "You might also like" or "Recommendation" section to showcase additional items that shoppers might be interested in purchasing. If you create such a section, consider adding a Prime badge alongside the thumbnail or title for items that are eligible for Buy with Prime.

• A delivery card with a sign-in link. This is important because you will not be able to verify whether the shopper is a Prime member until they are signed in. Prior to placing their order, the shopper must sign in using their Amazon account credentials so that you can confirm the shopper's Prime membership status. These actions are described in subsequent steps. By adding this delivery card, you:

  • Indicate to shoppers that they need to sign in to get Prime benefits on eligible items.

  • Enable shoppers to sign in before proceeding to the checkout page.

    The following image shows how the Prime delivery card might look if implemented on your cart page.

  

  We recommend that you implement the Prime delivery card with all of the functionality in the image shown previously, but there are multiple variations of the delivery card available in the Buy with Prime UI library that you can use to enable shoppers to sign in directly from your cart page.

  In the delivery card shown previously, shoppers can sign in by clicking the "Sign in" link and also see a delivery estimate for the number of items in their cart that are eligible for Buy with Prime. This version of the delivery card gives shoppers the most information about the items in their cart, and therefore is most likely to encourage shoppers to sign in.

Step 4: Authentication to Amazon

Buy with Prime is only available to Prime members. Shoppers who are not Prime members can add items that are eligible for Buy with Prime to their cart and check out on your site, but they will not get Prime benefits.

To get Prime benefits, shoppers must sign in using their Amazon account credentials. When you authenticate the shopper through Login with Amazon, you can confirm a shopper's Prime membership status and access the shopper’s Amazon customer profile data, including their name, email, phone number, and default shipping address.

To start the authentication process, the shopper clicks the "Sign in" link on the delivery card that you display on your cart page or checkout page.

The following images are examples of the shopper's experience after they click the "Sign in" link on the delivery card.

If the shopper has an Amazon account, they can sign in using their credentials.

If the shopper doesn't have an Amazon account but wants to use Buy with Prime for this order, they must create an Amazon account, sign up for Prime, and sign in using their Amazon account credentials. If they do not want to sign up, they can cancel out of the authentication flow and proceed with a standard checkout experience on your site without getting Prime benefits on any items.

Step 5: Access shopper profile data

You can use the shoppers' Amazon customer profile data provided to you to auto-fill the relevant fields on the checkout page to make checkout faster for shoppers.

Step 6: Prime member verification

After a shopper signs in, you can verify whether they are a Prime member. Shoppers who aren't Prime members may still sign in using their Amazon account credentials and grant you access to their customer profile data.

Step 7: Return to cart

After signing in, shoppers are returned to the page where they originally clicked the "Sign in" link. They now see a slightly different delivery card on the page. In the following example, the shopper first clicked "Sign in" on the cart page, signed in using their Amazon account credentials, and granted you access to their Amazon customer profile data. The following image is what they might see when they return to the cart page.

Note the following two changes on the cart page after a shopper has authenticated their Amazon account:

• Delivery card: Previously, this card had a "Sign in" link and messaging related to Prime benefits. Now, the card indicates that the shopper is signed in and renders their name as a link. If the shopper clicks the link, a modal appears that enables the shopper to sign out of the account they’re currently signed into, as shown in the following image.

• Prime badge: Previously, this card simply displayed the Prime badge with "eligible." Now, the Prime badge is accompanied by messaging that indicates whether the item is also eligible for free returns. Some Buy with Prime items might not be eligible for return, in which case the card doesn't have the "FREE returns" messaging.

Step 8: Checkout

On your checkout page, we recommend that you add the following:

• A “Prime eligible” badge alongside the product thumbnail or title for any items in the checkout that are eligible for Buy with Prime.
• A delivery card directly above your delivery options to alert shoppers who have not already signed in. Up to this point, we described the experience for a shopper who signs in on the cart page before proceeding to the checkout page. However, it’s possible that not all shoppers will do this. If a shopper has not yet signed in when they land on the checkout page, they may see the following experience.

To address this scenario, you can use the delivery card on the checkout page to alert a shopper to sign in using the same flow explained previously in the cart sections. After the shopper has successfully signed in, they might experience the following image on the checkout page.

Note the following three changes to the checkout page after a shopper has been authenticated:

• Delivery card: In this example, the delivery card with a sign-in option is now gone, and instead, the display defaults to show that Prime benefits are available on eligible items in their checkout. The shopper sees a delivery card that shows the delivery estimate and that they are getting "FREE delivery and returns." You can customize how the delivery card looks on your checkout page after a shopper has signed in. For example, you might choose to apply the same state seen in the delivery card shown in the previous section on building a cart.
• Delivery groups: You might choose to group all Buy with Prime items that are arriving together as a single group and treat other items that are shipping with Standard or another delivery method as another group. These groups are called “delivery groups.” We recommend that you consider how you might want to group items on your site when a shopper has an order that contains items that are eligible for Buy with Prime and items that aren't. Our recommendation is to group items shipping with a single shipping method and arriving together in a single group to avoid shopper confusion at checkout.
• Buy with Prime badges: In addition to the Prime promise badge used in the Shipping Method section, the "Prime eligible" badge is now updated to indicate a shopper is getting “FREE delivery and returns” on the item. When an item(s) is not eligible for return, the displayed Prime badge must indicate this, either by omitting the “and returns” portion of the message or replacing with "FREE delivery, not eligible for return."

You have access to a shopper's Amazon customer profile data that includes name, email, phone number, Prime membership status, and default shipping address after they sign in. If the shopper hasn't already entered information for those fields on the checkout page, you might want to use this customer profile data to auto-populate the relevant fields on the checkout page on behalf of the shopper when they land back on the checkout page after they sign in.

Step 9: Payment

On the checkout page, shoppers can either manually enter their credit card details in the "Payment" section or auto-fill these details from a browser-based tool.

Shoppers might also be able to use a digital wallet (for example, PayPal, Apple Pay, and so on) that you have enabled for your site. However, there are some considerations to keep in mind with how wallets may operate with Buy with Prime.

Digital wallets typically use one of two checkout flows: "Continue" and "Pay Now." The following sections describe how the shopper experience for these two flows depends on whether the shopper has already been authenticated on your site.

"Continue" checkout flow

The shopper takes the following steps:

1. The shopper is redirected from your checkout page to the wallet's checkout page. There, the shopper is shown the default shipping address and payment method stored in the wallet. The shopper doesn't see the items in their cart and the associated delivery options.
2. The shopper reviews their order preferences.
3. The shopper clicks a "Continue" button on the wallet’s checkout page, which takes them back to your checkout page. Upon returning to your checkout page, the shopper's shipping address and payment method are populated with values returned by the wallet.
4. The shopper places the order on your checkout page.

Buy with Prime considerations for this flow:

• If the shopper HAS NOT already been authenticated on your site prior to choosing to pay using a wallet, the shopper will still have the chance to sign in to get Prime benefits on eligible items when they are redirected back to your checkout page before placing their order.
• If the shopper HAS already been authenticated on your site prior to choosing to pay using a wallet, the shopper will remain signed in and get Prime benefits on eligible items when they place their order.

"Pay now" checkout flow

The shopper takes the following steps:

1. The shopper is redirected from your checkout page to the wallet's checkout page. There, the shopper is shown the default shipping address and payment method stored in their wallet. They also see the items in their cart and the associated delivery options.
2. The shopper reviews their order preferences.
3. The shopper clicks a Pay button on the wallet's checkout page.

Buy with Prime considerations for this flow:

• If the shopper HAS NOT already been authenticated on your site prior to choosing to pay using a wallet, the shopper will likely NOT have the chance to sign in prior to placing their order. If you know that most or all of the wallets enabled on your site use the "Pay now" flow, you might consider having a warning that alerts shoppers with items that are eligible for Buy with Prime in their cart to sign in prior to selecting a wallet to avoid misleading shoppers.

• If the shopper HAS already been authenticated on your site prior to choosing to pay using a wallet, the shopper might still be able to get Prime benefits. This experience works best when a shopper has only items that are eligible for Buy with Prime in their cart because there would only be a single delivery method applied to their entire order, and you would likely pass the shopper’s chosen delivery method to the wallet to show to shoppers in the wallet's checkout page.

  🚧

  If a shopper has a cart in which some items are offered through Buy with Prime and some aren't, this experience might break because most wallets don't support multiple delivery methods for a single order. We recommend testing this experience with your existing wallets as part of integration testing.

Step 10: Order management

After a shopper places an order that includes Buy with Prime items, they get two order confirmation emails: one you send from your site’s email domain and one sent on your behalf from the Buy with Prime email domain. Shoppers can use the Buy with Prime order confirmation email to access the Buy with Prime order detail page where they can see order information such as an order summary and tracking status for Buy with Prime items.

Shoppers will also need to access the order detail page to initiate cancellation requests or return requests for Buy with Prime items in their order and get customer support through Buy with Prime Assist.

If a shopper has any items in the order that aren't eligible for Buy with Prime, the Buy with Prime order detail page directs them to visit your post-order management portal to get order information, initiate cancellation, and initiate returns for those items.

The Buy with Prime createOrder mutation returns a link to the Buy with Prime order detail page. You can include this link in your post-order emails and order management portal. Consider embedding this link in these places to give shoppers a way to access the Buy with Prime order detail page to manage Buy with Prime items in their order. The following example shows the link a shopper might click to manage their order.

Shoppers can also view their orders with Buy with Prime items in their Amazon account. For example, from the Amazon app, they click Your Orders and then click Your Buy with Prime Orders.

Related topics

• Use the Buy with Prime UI Library
• Steps to Use the UI Library
• Buy with Prime UI Library Examples