The bread-classic Developer Hub

Welcome to the bread-classic developer hub. You'll find comprehensive guides and documentation to help you start working with bread-classic as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    

Styling Bread

Bread’s white-labeling functionality allows you to style your Bread offering to mimic your site’s overall branding strategy. There are two key ways that we recommend quickly and easily taking advantage of this capability:

Customizing the Bread Modal

In your Bread merchant portal, navigate to Checkout Settings to begin customizing the Bread pop-up modal. You have the ability to adjust the colors, fonts, and text within the modal. You also have the option to add your logo into the top left-hand corner.

🚧

REMINDER FOR HEALTHCARE MERCHANTS:

Compliance regulations require that healthcare designated merchant partners include a disclosure prior to the Bread modal. To enable this, navigate to Checkout Settings > enable Show Introduction Screen. You’ll need to add the below:

  • Header: “How we handle 3rd party information”
  • Body: “This application is powered by Bread. Bread is not affiliated with this merchant. Any information you provide here will be received by Bread only, and Bread’s privacy policy will govern the use of this information.”
  • Design: All other text and the Bread logo must remain in its original state, however, you can adjust the color scheme.

Customizing the Bread Button on Your Site

In your Bread merchant portal, navigate to Button Settings to configure the appearance of how the Bread button looks on your website. Here, you can customize the style of your buttons and apply it directly to your integration without writing any CSS!

You’ll see several options for customizing the appearance and behavior of your Bread button. As you make changes to your configuration you should see the button preview and generated custom CSS update in realtime. Please see the reference below for details on each option.

Button Settings Reference

  • Default Button Text: Switch between “Default”, “As low as”, and “Logged in” states to configure the button text for each button state.
  • Enable Button Configuration: Select this option to deploy your button style to all of your live Bread Checkout buttons.
  • Background Color: Set the main color of the button.
  • Hover Background Color: Set the main color of the button when hovered.
  • Border Color: Set the color of the button outline. Note this only applies if the Border Width is greater than 0px.
  • Border Radius (in px): Set the roundness of the corners of the button. 0px will give the button a square look. A higher border radius will round out the corners.
  • Border Width: Set the width of the button outline. Note you will only be able to see the outline if your Border Color is different than your Background Color.
  • Add Custom Font: Set an import URL for your custom font. See Google Fonts for free font options.
  • Font Family: Set the font used for the button text. You can supply comma separated fallback options (i.e. Helvetica, Arial, sans-serif).
  • Font Color: Set the color of the button text.
  • Font Size: Set the font size of the button text.
  • Font Weight: Set the font weight of the button text. 100-300: Light. 400-500: Normal. 600+: Bold.

Enabling Button Settings
Once you are happy with your button, you have two options for applying your button styles:

  • Option 1: The first and easiest option is to turn on “Enable Button Configuration” and hit save. This will tell Bread to use these styles for all of your currently integrated Bread Checkout buttons! Note that choosing this option will not override Bread buttons that already have customCSS applied.
  • Option 2: Copy and paste the generated custom CSS code and manually apply it within your plugin settings or through your custom integration.

📘

NOTE

Turning on Enable Button Configuration will tell Bread to use your Button Settings styles for all of your Bread checkout buttons with two exceptions: these styles will not affect Bread Apply buttons or Bread Checkout buttons that already have defined customCSS.

👍

PRO TIP

Once you have deployed your Button Setting styles you may notice that additional changes aren’t reflected immediately in your live buttons. This is a side effect of how Bread caches assets. Try opening your button in an incognito window or clear your site cookies to see the new changes right away!

Updated 3 months ago


Styling Bread


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.