Buy with Prime | Developer Documentation
Documentation

Steps to Use the UI Library

📘

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

This topic shows how to add Buy with Prime to your checkout flow by using the Buy with Prime UI library. After covering the terminology, you learn how to do the following tasks:

  • Initiate the Login with Amazon sign-in flow, where shoppers grant you access to their Amazon customer profile data.
  • Render a delivery card, which displays the shopper's name and a delivery estimate, the number of items that are eligible for Buy with Prime, and a sign-in link.
  • Render a Prime benefit card, which displays an item's eligibility for Buy with Prime and an item-level delivery estimate.

Although this topic is specific to the checkout page, it should give you insight into how to enable the experience for other pages, such as the cart page.

Prerequisites

This procedure assumes that you have fulfilled the following prerequisites:

Steps

To add Buy with Prime to your checkout flow, perform the following steps. Many of the steps have two aspects: how to get the necessary information and then how to use that information to render a delivery card or Prime benefit card.

  1. Integrate Login with Amazon (LWA) with your site.
  2. Get the Buy with Prime UI library.
  3. Display a delivery card.
  4. Display a Prime benefit card.
  5. (Optional) Prefill the checkout page with shopper information.
  6. Create an order.

Step 1: Integrate Login with Amazon with your site

Follow the instructions in Integrate Login with Amazon with Your Site.

Step 2: Get the Buy with Prime UI library

Ask your Buy with Prime solutions architect for the Buy with Prime UI library. For details about the components in the library, see Buy with Prime UI Library Reference. The library is a pre-built, single-file bundle. The bundle is a standard JavaScript module with no dependencies.

After you receive the pni-web-components.js (for HTML frameworks) or pni-react-components.js file (for React frameworks), put it in your project directory. Ideally, choose a folder that's designated for third-party libraries, such as a ./lib or ./vendor folder.

Step 3: Display a delivery card

To enable sign-in for shoppers, you use the delivery-card component of the Buy with Prime UI library. You can also use the delivery-card component to display information such as the number of Buy with Prime items in their cart and a delivery estimate.

For delivery card example code, see Delivery Card Examples.

Step 4: Display a Prime benefit card

The prime-benefit-card UI component enables you to display Prime benefits such as free delivery, free return, and delivery estimates for items that are eligible for Buy with Prime. You can customize the Prime benefit card to display the applicable Prime benefits.

You can populate the Prime benefit card with the following information:

  • Buyability: To determine whether the item is eligible for Buy with Prime, you fetch the item's buyability by using the product query of the Buy with Prime Catalog interface. For an example, see Get the buyability status of a product. If the status in Buyability of the response is BUYABLE, the item is eligible for Buy with Prime.
  • Returnability: To determine whether an item is returnable, use the reversalOffers query of the Buy with Prime Return interface. An item is considered returnable if the title in ReversalOfferGroupSummary is “Eligible for Return." For examples, see Get Reversal Offers.
  • Prime membership status: To fetch the shopper's Prime membership status, call the shopperBwPEligibility query of the Buy with Prime Delivery Preview interface. If bwpEligibilityStatus in shopperBwPEligibility is PRIME, the shopper is a Prime member.
  • Delivery estimate: To get a delivery estimate, call the deliveryPreview query of the Buy with Prime Delivery Preview interface. The Delivery Preview interface supports various ways of getting a delivery estimate for unauthenticated shoppers (postal code, IP address, and so on) and for authenticated shoppers by using the LWA access token. For examples, see Delivery Preview Interface Examples. From the deliveryPreview response, get the deliveryMessage for the item.

For Prime benefit card example code, see Prime Benefit Card Examples for Signed-In Prime Members and Prime Benefit Card Examples for Other Scenarios.

Step 5: (Optional) Prefill the checkout page with shopper information

To provide shoppers a more convenient checkout experience, you can prefill fields on your website's checkout forms by using the shopper's Amazon customer profile data. For example, you can prefill the email address and delivery address fields.

You should already have fetched the shopper’s name and email in the previous steps. You can also fetch their default shipping address by using LWA profile API. For details, see Call the Profile Endpoint Server-Side in the LWA documentation.

Step 6: Create an order

After the shopper verifies their delivery address, enters payment details, and chooses to complete their purchase, you create a Buy with Prime order. To create a Buy with Prime order, call the createOrder mutation of the Buy with Prime Order interface. For examples, see Create a Buy with Prime Order.

Related topics

Updated 19 days ago