Examples

Basic Example

Code

<croissant-buyback-badge
	merchant-id="123321"
	placement="cart" 
  product-list="[{'product-id': '1233456789', 'quantity': '1'}]" // See Typescript tab for an example of how to set this attribute
></croissant-buyback-badge>

const productList = [{ productId: "123456789", quantity: 1 }];

const buybackBadge = document.querySelector("croissant-buyback-badge");

buybackBadge.setAttribute("product-list", JSON.stringify(productList));

Screenshot

Example with Learn More Link

Code

<croissant-buyback-badge
	merchant-id="123321"
	placement="cart" 
  product-list="[{'product-id': '1233456789', 'quantity': '1'}]"
  has-learn-more-link="true"
></croissant-buyback-badge>

Screenshot

Example with Background Color

Code

<croissant-buyback-badge
	merchant-id="123321"
	placement="cart" 
  product-list="[{'product-id': '1233456789', 'quantity': '1'}]"
  has-background-color="true"
></croissant-buyback-badge>

Screenshot

Example with Subtext

Code

<croissant-buyback-badge
	merchant-id="123321"
	placement="cart" 
  product-list="[{'product-id': '1233456789', 'quantity': '1'}]"
  has-subtext="true"
></croissant-buyback-badge>

Screenshot

Example with Background Color and Custom Styles

Code

<croissant-buyback-badge 
	merchant-id="123321"
	placement="cart" 
  product-list="[{'product-id': '1233456789', 'quantity': '1'}]"
  has-background-color="true"
	></croissant-buyback-badge>

:root {
  --croissant-font-family--main: Times New Roman, Times, serif;
  --croissant-color--primary: #975097;
  --croissant-color--secondary: #eedaee;
}