Examples

Basic Example

Code

<croissant-buyback-badge
	merchant-id="123321"
	placement="cart" 
  product-list="[{'product-id': '1233456789', 'quantity': '1'}]" 
></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"
	custom-styles="{ 
      primaryColor: '#975097',
      secondaryColor: '#eedaee',
      defaultFontFamily: 'Times New Roman, Times, serif',
      defaultFontSize: 16,
      smallFontSize: 14,
}"></croissant-buyback-badge>

const buybackBadgeStyles = {
      primaryColor: "#975097",
      secondaryColor: "#eedaee",
      defaultFontFamily: "Times New Roman, Times, serif",
      defaultFontSize: 16,
      smallFontSize: 14,
    };

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

    buybackBadge.setAttribute(
      "custom-styles",
      JSON.stringify(buybackBadgeStyles)
    );

Screenshot

Updated 26 days ago