Croissant Cart Toggle Input

The Croissant CartToggle Input is a button element that allows the user to opt a cart in to Croissant. When clicked, a request is made to the merchant-proxy-opt-in-url to POST a true isOptedIn value to the passed in cart.

Required Attributes

cart

• Learn More

merchant-id

• Learn More

merchant-proxy-opt-in-url

• Learn More

placement

• Learn More

Optional Attributes

Custom Text

• toggle-opt-in-text (string): defaults to on, changes the text that shows when the Toggle is in an opted in state
• toggle-opt-out-text (string): defaults to off, changes the text that shows when the Toggle is in an opted out state

Custom CSS

CSS classes and variables can be used to customize the look and branding for the Opt-In Container.

⚠️

Use caution when changing toggle height and width

Changing the toggle height and width from the default (62px W x 32px H) can have unintended consequences. Slider width/height, calculations for slider position, and label font size and padding will likely need to be adjusted to accommodate the shift in dimensions.

Use the below sample CSS as a guide for what classes you can use to modify toggle proportions.

Example

   <croissant-cart-toggle-input
          merchant-id="12345678"
          placement="pdp"
    ></croissant-cart-toggle-input>

:root {
  --croissant-font-family--main: "Times New Roman", serif;
  --croissant-color--primary: limegreen;
}

.croissant-toggle-input {
  width: 50px;
  min-width: 50px;
  height: 24px;
  border: 1px solid black;
}

.croissant-toggle-input--opted-out {
  background-color: lightblue;
}

.croissant-toggle-input__slider {
  width: 16px;
  height: 16px;
  background-color: black;
}

.croissant-toggle-input--opted-out .croissant-toggle-input__slider {
  left: 5px;
}

.croissant-toggle-input--opted-in .croissant-toggle-input__slider {
  left: calc(100% - 20px);
}

.croissant-toggle-input__label {
  color: black;
  font-size: 10px;
}

.croissant-buyback-value {
  font-family: var(--croissant-font-family--main);
  font-size: 18px;
  color: black;
}