Examples

Basic Example

Code

<croissant-toggle
	merchant-id="123321"
	placement="pdp" 
	pricing-url="https://api.retailer.croissant.com/v0/prices"
  product-list="[{'product-id': '1233456789', 'quantity': '1'}]"  // See Typescript tab for an example of how to set this attribute
></croissant-toggle>

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

const toggle = document.querySelector("toggle");

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

Screenshot

Example with Custom Styles

Code

<croissant-toggle
	merchant-id="123321"
	placement="pdp" 
	pricing-url="https://api.retailer.croissant.com/v0/prices"
  product-list="[{'product-id': '1233456789', 'quantity': '1'}]"
	custom-styles="{ 
      primaryColor: 'hotpink',
      secondaryColor: '#CA91DC',
      fontFamily: 'Cursive, sans-serif',
      fontColor: 'darkgray',
      defaultFontSize: 16,
      defaultLineHeight: 1.5,
      smallFontSize: 18,
      smallLineHeight: 1.5,
}"// See Typescript tab for an example of how to set this attribute
></croissant-toggle>

    const toggleStyles = {
      primaryColor: "hotpink",
      secondaryColor: "#CA91DC",
      fontFamily: "Comic Sans, cursive, sans-serif",
      fontColor: "darkgray",
      defaultFontSize: 16,
      defaultLineHeight: 1.5,
      smallFontSize: 18,
      smallLineHeight: 1.5,
    };

    const toggle = document.querySelector("croissant-toggle");

    toggle.setAttribute("custom-styles", JSON.stringify(toggleStyles));