Integrate with LWA by Using Buy with Prime UI Library
Important
The Buy with Prime API is offered as a preview and might change as we receive feedback and iterate on the interfaces. We are sharing this early documentation to help you learn about the Buy with Prime API as we write and iterate on the content.
The Buy with Prime UI library offers a low-code solution that provides sign-in functionality through Login with Amazon (LWA). When you use the UI library, you don't need to build your own UI components that initiate the sign-in flow. Instead, you populate a pre-built delivery card component.
Delivery cards display shopper-level information such as the shopper’s name, a delivery estimate, the number of items that are eligible for Buy with Prime, and a sign-in link to let the shopper sign in using their Amazon account credentials. The UI library supports both redirection and pop-ups for sign-in.
Delivery Card
This topic lists your LWA integration tasks if you choose to use the UI library. If you want to use your own UI components, you can integrate with LWA directly or by using an LWA SDK instead. For details, see Use Login with Amazon for Shopper Identity.
Static versus dynamic redirection
Your integration tasks depend on whether you put the sign-in link on static URLs or dynamic URLs, so this topic contains a section for each type.
- A static URL doesn't have any parameters. An example is
https://www.example.com/checkout. - A dynamic URL has parameters that change. For example, a product detail page might have a product ID in the URL (
https://www.example.com/product/red-shirt-1) and a cart page might have a cart ID in the URL (https://www.example.com/cart/cart-id).
For the full authentication flow in each case, see LWA Authentication Flow.
Integration tasks if you use static redirection
The following table shows the back-end tasks to implement if you put the sign-in link on pages with static URLs.
| Task | Required? | Link to Details |
|---|---|---|
| Set up an LWA security profile and add the static URL as an Allowed Return URL in the security profile. | Yes | Set up an LWA security profile |
Add the Buy with Prime UI library delivery-card component to the page with the static URL. Set the redirectUrl in the LWAConfig object to the static URL. | Yes | Add Buy with Prime UI components to a web page |
After LWA redirects the shopper back to the static URL (redirectUrl), extract the authorization code, scope, and state from the query parameters and validate the state. | Yes | Extract information from the redirected URL |
| Call the LWA token endpoint to get an access token and refresh token. Extract the access token and refresh token from the response. Save the refresh token in the backend session data so that you can use it to request a new access token when the access token expires. | Yes | Send an access token request |
| Call the LWA customer profile endpoint to get shopper data. | No | Send a request for shopper data |
| Use the access token as the shopper identity token as an input parameter to Buy with Prime operations. | No | Create a delivery preview with the shopper's Amazon identity (as an example) |
Integration tasks if you use dynamic redirection
The following table shows the back-end tasks to implement if you put the sign-in link on pages with dynamic URLs.
| Task | Required? | Link to Details |
|---|---|---|
| Set up a redirect handler URL. | Yes | Set up a redirect handler URL |
| Set up an LWA security profile and add the redirect handler URL as an Allowed Return URL in the security profile. | Yes | Set up an LWA security profile |
Add the Buy with Prime UI library delivery-card component to the page with the dynamic URL. Set the redirectUrl in the LWAConfig object to the redirect handler URL. | Yes | Add Buy with Prime UI components to a web page |
After LWA redirects the shopper back to the redirect handler URL (redirectUrl), extract the authorization code, scope, and state from the query parameters and validate the state. | Yes | Extract information from the redirected URL |
| Call the LWA token endpoint to get an access token and refresh token. Extract the access token and refresh token from the response. Save the refresh token in the backend session data so that you can use it to request a new access token when the access token expires. | Yes | Send an access token request |
Redirect the shopper to the dynamic URL (the page the shopper was on when they clicked the sign-in link). You can find the dynamic URL from the state when you extract the state from the redirected URL. | Yes | Extract information from the redirected URL |
| Call the LWA customer profile endpoint to get shopper data. | No | Send a request for shopper data |
| Use the access token as the shopper identity token as an input parameter to Buy with Prime operations. | No | Create a delivery preview with the shopper's Amazon identity (as an example) |
Related topics
Updated 2 days ago