📘

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 provides examples of how to render Prime benefit cards by using the Buy with Prime UI library.

To learn how to use the UI library to incorporate Buy with Prime into your checkout flow, see Steps to Use the UI Library.

For the Buy with Prime UI Library Reference, see Buy with Prime UI Library Reference.

Signed-in shopper isn't a Prime member

If the shopper isn't a Prime member, the Prime benefit card isn't rendered.

<prime-benefit-card id="authenticated-non-prime-badge"></prime-benefit-card>
<script>
    const authenticatedNonPrimeShopper = document.getElementById('authenticated-non-prime-badge');
    authenticatedNonPrimeShopper.isShopperPrime = false;
</script>

Shopper isn't signed in, item is offered through Buy with Prime

This example code renders the following image.

<prime-benefit-card isItemBuyable></prime-benefit-card>

Item isn't offered through Buy with Prime

If the item isn't eligible for Buy with Prime, the Prime benefit card isn't rendered.

<prime-benefit-card id="non-buyable-badge"></prime-benefit-card>
<script>
    const nonBuyableItem = document.getElementById('non-buyable-badge');
    nonBuyableItem.isItemBuyable = false;
</script>

Item is eligible for Buy with Prime, card doesn't show returnability

This example code renders the following experience.

<prime-benefit-card isShopperPrime isItemBuyable></prime-benefit-card>

Loading icon

This example code renders the following experience.

<prime-benefit-card loading></prime-benefit-card>

Related topics

• Buy with Prime UI Library Examples
• Buy with Prime UI Library Reference