Sign-In Card Element

📘

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.

The sign-in card element is a web component that displays a sign-in option, the Prime checkmark logo, and delivery estimates based on whether the shopper is a Prime member. By default, the sign-in card element automatically handles the sign-in process redirection flow. Authentication remains valid for one hour. After one hour expires, the shopper must sign in again. Use the sign-in card element on the cart and checkout page to let the shopper sign in to their Amazon account, provide a delivery estimate, and streamline the checkout experience.

  • JavaScript source: https://cdn.elements.amazon/elements/amazon-sign-in/v1.0/web-component.js.
  • HTML tag: <amazon-sign-in>.

The following image shows a sign-in card element.

Amazon sign-in card element

Prerequisites

In addition to the general prerequisites for all elements, to use the sign-in card element, your organization must have the following prerequisites:

Attributes on the element tag

The sign-in card element has optional attributes for display settings.

Appearance

Attribute Value Description Example
color-mode "light"
"dark"
The color mode of the element. The default is "light". "light"

"dark"
background-color Hex color code The background color of the element. "#FFDAF0"
text-color Hex color code The text color of the element. "#BD1A83"
font-family Name of the font The font of the element. The default is "Amazon Ember". "Amazon Ember"

"Times, serif"
font-size-base Size in pixels, for example 14px The font size of the element. The Prime Check logo increases or decreases in size to match. The default is 14px. "14px"

"18px"
corner-style "rounded" (default)
"square"
"pill"
"custom"
The corner style of the element background. If you choose "custom", you must also set the border-radius attribute. The default is "rounded". "rounded"

"square"

"pill"
border-radius Size in pixels, for example 24px To set a border radius, you must also set corner-style to custom. "24px"

Example

<amazon-sign-in background-color="#FFDAF0" font-size-base="16">
</amazon-sign-in>

Related topics