Quick Start

Bread integrations require both a frontend and backend component. However, if you would like to quickly start with creating Bread buttons on your frontend take the following steps:

1. Load the Bread script on your page and set the API Key that has been provided by your Bread Success representative
2. Add the HTML element where you want Bread to load
3. Configure an opts object
4. Create a Bread button by passing the opts object into the bread.checkout function via bread.checkout(opts)

📘

If you are creating a Bread button on a page other than your checkout page make sure to set allowCheckout to false in your opts object

Quick Start Sample Code

The below code is the minimum amount needed to render a Bread button on the frontend of your site. For more information on Bread buttons and the backend portion of a Bread integration please see the Bread Checkout page.

<!-- 
  STEP 1: Load the Bread script on your page and set your API Key 
  NOTE: this is loading the Bread sandbox script
-->
   <script
      src="https://checkout-sandbox.getbread.com/bread.js"
      data-api-key="YOUR-API-KEY"
    ></script>

<!-- STEP 2: Add an HTML element where you want Bread to load -->
<div id="bread-checkout-btn"></div>

<script>
  /* 
   STEP 3: Configure opts object
  */
  const opts = {
  	buttonId: "bread-checkout-btn", // match HTML element ID
    allowCheckout: true, // set to false on non-checkout pages
    customTotal: 1000, // amount in cents
    done: function (err, tx_token) {
        // callback function runs after Bread checkout complete
        // function is required even if allowCheckout = false
    }
	};
  
  /*
   STEP 4: Create Bread button
  */
  bread.checkout(opts);
  
</script>