📘

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 describes how to integrate the Buy with Prime cartridge into a site based on the Storefront Reference Architecture (SFRA) structure, and provides a list of affected controllers, models, scripts, and templates.

To combine the Buy with Prime functionality with your storefront, you can start with the int_buywithprime_sfra cartridge for Buy with Prime, which overrides SFRA functionality, and reapply your existing customizations. Alternatively, you can omit the int_buywithprime_sfra cartridge and selectively copy relevant code for Buy with Prime from int_buywithprime_sfra into your own custom cartridge.

For details about installing the Buy with Prime cartridge, see Install the Buy With Prime Cartridge.

Custom code overrides

This topic shows code overridden by the int_buywithprime_sfra cartridge for Buy with Prime, which can overwrite customizations that you made to the same controllers, models, scripts, and templates in other cartridges.

If you've heavily customized your storefront, consider selectively copying relevant code from this topic into your storefront cartridge instead of using int_buywithprime_sfra as a starting point.

Controllers

The int_buywithprime_sfra cartridge overrides the following controller routes with server.replace, which overrides any existing logic for the same routes, including server.append and server.prepend, in cartridges to the right of int_buywithprime_sfra in the cartridge path.

• Cart-UpdateQuantity
• CheckoutServices-PlaceOrder

For the controller route, add the custom logic that you want to preserve to a cartridge that has priority by being to the left of int_buywithprime_sfra in the cartridge path.

Models

The int_buywithprime_sfra cartridge doesn't override any models. Each model properly inherits functionality from its respective base superModule model.

Scripts

The int_buywithprime_sfra cartridge overrides the following script helper functions. In a cartridge that has priority by being to the left in the cartridge path, update the helper functions to combine the Buy with Prime logic with any of your own custom logic that you want to preserve. You can combine the logic either in the int_buywithprime_sfra cartridge if you use the cartridge, or in your own custom cartridge if you don't use int_buywithprime_sfra.

cart/cartHelpers.js

In addProductToCart, account for Buy with Prime inventory as well as standard inventory.

Code

Code (continued)

checkout/checkoutHelpers.js

In placeOrder, clear the Buy with Prime session data and add the hook and error handling after order placement.

Code

checkout/shippingHelpers.js

In getApplicableShippingMethods, account for custom logic in the Buy with Prime shipping method.

Code

Code (continued)

helpers/basketValidationHelpers.js

In validateProducts, account for Buy with Prime inventory as well as standard inventory.

Code

renderTemplateHelper.js

In getRenderedHtml, extend the base superModule to add Buy with Prime attributes to the templateContext.

Code

Templates

The int_buywithprime_sfra cartridge overrides the following templates. If you heavily customized a template from the version in app_storefront_base, consider copying the relevant custom code for Buy with Prime into your storefront template override.

cart/productCard/cartProductCardEdit.isml

Wrap a conditional statement to only show an Edit link next to a line item if the line item is for a variation product.

Code

cart/productCard/cartProductCardProductPrice.isml

Add two containers for Buy with Prime to each product line item.

Code

cart/cartApproachingDiscount.isml

Add messaging for the shipping discount.

Code

cart/cartShippingMethodSelection.isml

Wrap a conditional statement to only show the shipping method selection for baskets not offered through Buy with Prime.

Code

cart/checkoutButtons.isml

Override both the app_storefront_base and Amazon Pay versions, add the Buy with Prime button, and edit the markup for the standard checkout button.

Code

checkout/billing/paymentOptions/creditCardSummary.isml

Wrap a conditional statement to only display the expiration date if both expirationMonth and expirationYear exist.

Code

checkout/billing/paymentOptions/paymentOptionsSummary.isml

Override both the app_storefront_base and Amazon Pay versions, and add displays for both the Adyen and Amazon Pay payment methods.

Code

checkout/cart/miniCart.isml

Override this template to include cart/checkoutButtons.isml, like in app_storefront_base. Don't include cart/miniCartButtons, like in int_amazonpay_sfra.

checkout/confirmation/confirmationDetails.isml

Keep this template similar to the template in app_storefront_base, relying on the includes checkout/shipping/shippingSummary.isml and checkout/orderProductSummary.isml.

checkout/customer/customerCard.isml

Add a Buy with Prime sign-in widget to the checkout login.

Code

checkout/customer/customerSummary.isml

Add a conditional statement if the checkout is a Buy with Prime checkout to use the email address from the order.

Code

checkout/productCard/productCard.isml

Add attributes to the .product-line-item div.

Code

Add the Prime checkmark logo and Prime Day deal promotions.

Code

checkout/productCard/productCardSummary.isml

Add this new file from int_buywithprime_sfra. The file doesn't exist in app_storefront_base.

checkout/shipping/shipmentCard.isml

Add a sign-in card for Buy with Prime.

Code

checkout/shipping/shippingCard.isml

Suppress the display for Buy with Prime or multi-channel fulfillment orders, add the selected-shipping-method-X attribute to the .leading-lines div, and edit the display to allow for strikethrough shipping pricing.

Code

checkout/shipping/shippingSummary.isml

Edit the shipping summary display.

Code

checkout/checkout.isml

Override both the app_storefront_base and Amazon Pay versions.

Code

Code (continued)

Code (continued, again)

checkout/orderProductSummary.isml

Edit the product summary display.

Code

common/layout/checkout.isml

Override both the app_storefront_base and Amazon Pay versions.

Code

product/components/addToCartButtonExtension.isml

Add the Buy with Prime button to the cart. The app_storefront_base version of this template is empty.

Code

product/components/productAvailability.isml

Add bwpCard above product availability.

Code

product/gridTile.isml

Add the productTile.js asset to the page, and add amzn-sku to the .product div.

Code

product/productTileFooter.isml

Add the Prime checkmark logo to the bottom of the product tile.

Code

product/quickView.isml

Add attributes to .product-quickview.

Code

Add bwpCard below product availability.

Code

search/refinements/attributes/boolean.isml

Add the ability to use the Prime checkmark logo next to the refinement check box instead of text.

Code

Related topics

Install the Buy With Prime Cartridge