Bread Checkout

Overview

Bread facilitates a full-funnel pre-qualification and checkout flow that you can customize to match the look and feel of your site. Bread seamlessly integrates throughout your customer’s shopping journey to enable higher purchasing power and drive conversions.

In the Bread modal, sensitive customer information is collected in a secure, Bread-served iframe and sent directly to Bread in encrypted form, never touching your server.

Don’t worry – the button below is in sandbox mode; no real emails or texts will be sent, and no real credit file will be pulled.

Example Button

To go through the checkout experience, click on the button above to open the Bread modal and enter:

  • Any name, address and email
  • Mobile Number: A random sequence of 10 digits – don’t use duplicates or sequential numbers (e.g. 555-555-5555 or 123-456-7890)
  • Birth Date: A birth date before 2000
  • Last 4 Digits of SSN: 0800 to simulate approval, or 0400 to simulate denial
  • Passcode: 1234

The following steps describe what happens during and after checkout is completed:

  1. The customer clicks the Bread button to open the Bread modal and initiate the pre-qualification and checkout flow. Optionally, the Bread modal can be launched programmatically with a function call to bread.showCheckout() in JavaScript.
  2. After a customer is pre-approved, a customer can complete the Bread checkout flow by clicking the final “Accept & Check Out” button. This generates a pending transaction with Bread.
  3. A transaction token is returned from Bread. If a done callback was defined during the Bread button configuration, this token will be returned as a parameter in the done callback. Otherwise, the containing <form> will automatically submit with the transaction token included as a <input> element.
  4. The transaction token is passed back to the merchant server as either form data or through an AJAX call in a done callback (outlined in the previous step).
  5. From the merchant server, the customer’s order should be created in your order management system through a series of requests to the Bread REST API. This step is handled automatically by a plugin if your site is built with a supported e-commerce platform. For custom sites, please refer to our Backend API documentation

Checkout Button Placement

In order to maximize the impact of financing on conversion, the Bread Checkout button should be placed earlier in the shopping funnel on the:

  • Category page: Display a $X/month or a banner to ensure that your customers know they can finance purchases as they are searching
  • Product detail page: Display a $X/month and allow customers to pre-qualify or checkout with financing right from the product page
  • Homepage and marketing materials: See section on Marketing Your Bread Program

And when the customer is ready to check out:

  • Shopping cart summary page: Display a $X/month and allow customers to pre-qualify or check out with financing right from the cart summary page
  • Checkout page as a payment method: Allow customers to select and check out with Bread

Triggering the Checkout

Bread checkout can be triggered in one of two ways:

  • The Bread button: User clicks on a configured Bread button served in a secure iframe on your page. The button is configurable by passing a custom CSS string that can change the button’s look and feel.

    Example Button

    @import url(https://fonts.googleapis.com/css?family=Montserrat);
    #bread-button,.bread-center,.bread-embed,.bread-embed-inner,body,html{
        height:100%;
        width:100%
    }
    body{
        font-family:Montserrat,serif;
        font-weight:600;
        margin:0
    }
    #bread-button{
        background:#F27935;
        color:#fff;
        font-size:14px;
        letter-spacing:.2px;
        text-align:center;
        text-shadow:0 1px rgba(0,0,0,.1);
        text-transform:uppercase
    }
    #bread-button.bread-btn{
        cursor:pointer
    }
    .bread-center{
        display:table
    }
    .bread-center-inner{
        display:table-cell;
        text-align:center;
        vertical-align:middle
    }
    .bread-btn.bread-as-low-as .bread-as-low-as:before,.bread-label .bread-as-low-as:before{
        content:"As low as "
    }

  • Without the Bread button: Programmatically trigger the checkout experience with an interaction, such as a click or a keypress, on an element on your page. For example, click this text.

 

Display the Checkout Button

To get started, use a <script> tag to link the Bread.js library. Make sure to include your public API key as a data-api-key attribute. Feel free to use the example <script> below, but make sure to replace the sample API key with your actual public API key.

For production:

<script src="https://checkout.getbread.com/bread.js" data-api-key="aaaaaaa-0000-bbbb-1111-cccccccccccc"></script>

For testing in our sandbox environment:

<script src="https://checkout-sandbox.getbread.com/bread.js" data-api-key="dddddd-2222-eeee-3333-ffffffffffff"></script>

Note: You will need to use your sandbox public API key to test.

Place a <div> element where you’d like to display the Bread button on your product detail or cart pages. This element must have an id attribute. Note that the element must be a <div> and not a <span> or other non-block element.

Any elements placed inside of this <div> element will display on your page prior to the JavaScript that creates the Bread button running. This can be used to display a loading element or placeholder. Note that any elements inside this <div> element will be removed when the Bread button loads.

Unless size is otherwise set, the button will inherit all the space given to it in its containing DOM element. For a default size of 200px by 50px, set an attribute of data-bread-default-size=true on the button div.

<div id="bread-checkout-btn" data-bread-default-size="true"></div>

The next step is to configure the Bread button with Javascript. You pass the id attribute of the button <div> you created as well as basic information about what is being purchased.

<form id="bread-checkout-form" action="/confirm" method="POST">
<script>
var opts = {
  buttonId: 'bread-checkout-btn',
  actAsLabel: false,
  asLowAs: true,
  items: [
  {
    name:'Couch',
    price:150000,
    sku:'COUCH123',
    imageUrl:'[REPLACEMEWITHAREALURL]',
    detailUrl:'[REPLACEMEWITHAREALURL]', 
    quantity: 1
  }]
};
bread.checkout(opts);
</script>
</form>

So, putting it all together:

<script src="https://checkout-sandbox.getbread.com/bread.js" data-api-key="aaaaaaa-0000-bbbb-1111-cccccccccccc"></script>
<form id="bread-checkout-form" action="/confirm" method="POST">
  <div id="bread-checkout-btn" data-bread-default-size="true"></div>
  <script>
  var opts = {
    buttonId: 'bread-checkout-btn',
    actAsLabel: false,
    asLowAs: true,
    items: [
    {
      name:'Couch',
      price:150000,
      sku:'COUCH123',
      imageUrl:'[REPLACEMEWITHAREALURL]',
      detailUrl:'[REPLACEMEWITHAREALURL]', 
      quantity: 1
    }]
  };
  bread.checkout(opts);
  </script>
</form>

Style the Checkout Button

Style the button to match your site’s look and feel using the customCSS attribute.

We support the following button states, represented by classes added to the #bread-button element:

  • Using a label instead of a button: The default style is a button; however, if it better matches your site, you can display price per month as a label. Do this by setting actAsLabel to true.
  • Pricing based on user login status: Additional classes are added based on whether a user is logged in or not:
    • bread-logged-out if a user is not logged in
    • bread-as-low-as if a user is not logged and asLowAs is true
    • bread-no-terms If a user is logged in but a monthly payment amount is not available
    • bread-show-terms if a user is logged in and a monthly payment amount is available

Within #bread-button, .bread-text has additional class states:

  • bread-pot is the default state, displaying “Pay Over Time” in the default CSS
  • bread-as-low-as if the user is not logged in and asLowAs is set to true
  • bread-for if a user is logged in and a monthly payment amount is available

For example, you can get a button to look and act like this:

Example Button

body{
    display:table;
    position:relative;
    -webkit-font-smoothing:antialiased
}
#bread-button,body,html{
    height:100%;
    margin:0;
    width:100%
}
#bread-button{
    background:#26A65B;
    background-image:linear-gradient(-180deg,rgba(255,255,255,.12) 0,rgba(0,0,0,.12) 100%);
    border:1px solid #1A8E4A;
    box-shadow:0 2px 10px 0 rgba(0,0,0,.1),inset 0 1px 0 0 rgba(255,255,255,.25);
    border-radius:4px;
    color:#FFF;
    cursor:pointer;
    display:table-cell;
    font-family:Lato;
    vertical-align:middle
}
#bread-button:after{
    background:rgba(255,255,255,.1);
    content:"";
    height:100%;
    left:0;
    opacity:0;
    position:absolute;
    top:0;
    transition:opacity 125ms ease-in-out;
    width:100%
}
#bread-button:hover:after{
    opacity:1
}
.bread-center:before{
    content:"Buy Now";
    font-size:16px;
    font-weight:600;
    letter-spacing:.75px;
    text-shadow:0 -1px 0 rgba(0,0,0,.25);
    text-transform:uppercase
}
.bread-center{
    margin-left:74px
}
.bread-text.bread-as-low-as:before{
    content:"for as low as "
}
.bread-text{
    font-size:14px
}
.bread-dur{
    display:none;
}
.bread-amt:after{
    content:" / mo."
}
.bread-embed-icon{
   background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMCIgeT0iMCIgdmlld0JveD0iMCAwIDE5LjI1IDE5LjI1IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiPjxkZWZzPjxmaWx0ZXIgaWQ9ImIiPjxmZU9mZnNldCBpbj0iU291cmNlQWxwaGEiIGR4PSIwIiBkeT0iLTAuMjUiIHJlc3VsdD0ibyIgLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAgIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMC4yNSAwIiB0eXBlPSJtYXRyaXgiIGluPSJvIiByZXN1bHQ9InMiPjwvZmVDb2xvck1hdHJpeD48ZmVNZXJnZT48ZmVNZXJnZU5vZGUgaW49InMiIC8+PGZlTWVyZ2VOb2RlIGluPSJTb3VyY2VHcmFwaGljIiAvPjwvZmVNZXJnZT48L2ZpbHRlcj48L2RlZnM+PHBhdGggZD0iTTE5LjAxIDIuOTdjLTAuMTktMC4yMi0wLjQ3LTAuMzQtMC43Ni0wLjM0SDQuNDNMNC4yNCAxLjQ2QzQuMTYgMC45OCAzLjc0IDAuNjMgMy4yNSAwLjYzSDFjLTAuNTUgMC0xIDAuNDUtMSAxczAuNDUgMSAxIDFoMS40bDEuODYgMTEuMTZjMC4wMSAwLjA1IDAuMDMgMC4wOCAwLjA1IDAuMTIgMC4wMiAwLjA1IDAuMDMgMC4xIDAuMDUgMC4xNSAwLjAzIDAuMDcgMC4wOCAwLjEyIDAuMTIgMC4xOCAwLjAzIDAuMDQgMC4wNiAwLjA4IDAuMSAwLjExIDAuMDYgMC4wNSAwLjEzIDAuMDkgMC4xOSAwLjEzIDAuMDQgMC4wMiAwLjA3IDAuMDUgMC4xMSAwLjA3IDAuMTIgMC4wNSAwLjI0IDAuMDggMC4zNyAwLjA4IDAgMCAxMSAwIDExIDAgMC41NSAwIDEtMC40NSAxLTFzLTAuNDUtMS0xLTFINi4xbC0wLjE3LTFIMTcuMjVjMC41IDAgMC45Mi0wLjM3IDAuOTktMC44NmwxLTdDMTkuMjggMy40OCAxOS4yIDMuMTkgMTkuMDEgMi45N3pNMTcuMSA0LjYzbC0wLjI4IDJIMTMuMjV2LTJIMTcuMXpNMTIuMjUgNC42M3YyaC0zdi0ySDEyLjI1ek0xMi4yNSA3LjYzdjJoLTN2LTJIMTIuMjV6TTguMjUgNC42M3YyaC0zYy0wLjA1IDAtMC4xIDAuMDItMC4xNSAwLjAzbC0wLjM0LTIuMDNIOC4yNXpNNS4yNiA3LjYzSDguMjV2Mkg1LjZMNS4yNiA3LjYzek0xMy4yNSA5LjYzdi0yaDMuNDJsLTAuMjggMkgxMy4yNXoiIGZpbGw9IiNGRkZGRkYiIHN0eWxlPSJmaWx0ZXI6dXJsKCNiKTsiLz48Y2lyY2xlIGN4PSI2Ljc1IiBjeT0iMTcuMTMiIHI9IjEuNSIgZmlsbD0iI0ZGRkZGRiIgc3R5bGU9ImZpbHRlcjp1cmwoI2IpOyIvPjxjaXJjbGUgY3g9IjE1Ljc1IiBjeT0iMTcuMTMiIHI9IjEuNSIgZmlsbD0iI0ZGRkZGRiIgc3R5bGU9ImZpbHRlcjp1cmwoI2IpOyIvPjwvc3ZnPgo=);
    height:40px;
    left:20px;
    margin-top:-20px;
    position:absolute;
    top:50%;
    width:40px
}

Customize Bread Checkout

To better match your brand, the checkout experience can be modified with your own colors, fonts, and copy. The merchant portal provides access to the following settings:

Setting Description
Colors: Primary Sets the primary color of the checkout interface, including the Title, Header Links, and Form Highlights.
Colors: Button Sets the background color of both the ‘Log In’ and ‘Get My Rate’ button.
Colors: Footer Background Sets the background color of the footer.
Colors: Text Links Sets the color of any text links.
General Styling: Custom Logo Enabling this setting displays your uploaded logo in the header.
General Styling: Bread Illustrations Enabling this setting displays Bread-selected images on the registration and credit terms pages.
General Styling: Button Radius Sets the roundness of the corners for the action button.
General Styling: Flat Button Style Enabling this setting removes any borders and drop shadows from the action button.
Fonts: Custom Font URL 1 Imports a custom font into the checkout interface. This should be the URL to a CSS file that includes font face declarations, e.g. ‘https://fonts.googleapis.com/css?family=Open+Sans’.
Fonts: Custom Font URL 2 Imports a custom font into the checkout interface. This should be the URL to a CSS file that includes font face declarations, e.g. ‘https://fonts.googleapis.com/css?family=Open+Sans’.
Fonts: Headline Sets the main header font in the checkout interface. This should be a prioritized list of font family names, as in a “font-family” CSS property.
Fonts: Body Sets the main body font in the checkout interface. This should be a prioritized list of font family names, as in a “font-family” CSS property.
Fonts: Action Button Sets the action button font in the checkout interface. This should be a prioritized list of font family names, as in a “font-family” CSS property. It is typically the same as the “Body” font list.
Header Copy: Headlines Sets the headline for the various steps of the checkout experience.
Custom Introduction Enabling this setting displays a custom introduction screen to the checkout experience.
Custom Introduction: Headline Sets the custom introduction page headline.
Custom Introduction: Body Content Sets the main content area of the custom introduction page.
Custom Introduction: Body Image If added, this displays an image in the upper-right body content area of the custom intro page.

Additional Implementation Options

Initialize API Key After Page Load

In some cases, you might need to initialize your API key after the page has loaded instead of providing it in the script tag. The setAPIKey method allows you to do just this:

bread.setAPIKey('YOURAPIKEY')

 

Add a done Callback

In the example below, when the customer clicks the button and successfully completes a checkout using Bread, the containing form will automatically submit with a transaction token included as an input. You can specify additional front-end logic to execute before the form submits by including a done callback:

opts.done = function(err, tx_token) {
  if (err) {
    console.error("There was an error: " + err);
    return;
  }

  if (tx_token !== undefined) {
    console.write(tx_token);
    var i = document.createElement('input');
    i.type = 'hidden';
    i.name = 'token';
    i.value = tx_token;
    var f = document.createElement('form');
    f.action = '[REPLACEMEWITHSERVICEURL]';
    f.method = 'POST';
    f.appendChild(i);
    document.body.appendChild(f);
    f.submit();
  }
  return;
};
bread.checkout(opts);

Trigger Bread Checkout without the Button

You can trigger the checkout experience without a Bread button by calling bread.showCheckout(opts) during a click event on the page. The opts object here mimics the object used in bread.checkout(), but without the buttonId.

Use this method to trigger Bread Checkout when a user toggles a radio button or clicks a custom button, text, or image. This allows additional flexibility in integrating the Checkout flow in your existing customer workflows.

Note that it’s important that bread.showCheckout() be run in a synchronous context. If executed from an async callback some browsers may interpret call as a pop-up and block the display. When using bread.showCheckout() it is important to test functionality across browsers and devices.

var opts = {...};

document.getElementById('my-own-button').addEventListener('click', function(e) {
  bread.showCheckout(opts);
});

Display Inline Checkout Experience

You can also trigger the checkout experience inline by simply replacing the buttonId field with formId. As a note, the Bread Inline Experience should not exist on the same page as a Bread Checkout or Bread Apply/Promo button.

Click here for more information

Only Allow Users to Pre-qualify vs. Check Out

For merchants that would like to prevent users from bypassing your site’s checkout flow by checking out earlier in the funnel (product detail or cart summary page), you can use the allowCheckout toggle.

Even if the customer can’t check out, the Bread button can still be used to advertise $/month pricing to customers, and to inform customers of their buying power by allowing them to pre-qualify with Bread early. After the customer receives a pre-qualification result, they will be prompted to return to your site to complete checkout through your existing checkout funnel.

opts.allowCheckout = false;

Calculate Tax and Shipping

If tax and shipping amounts are available, that information can be passed to the Bread button as part of the configuration.

If Bread is selected as a payment method in your standard checkout funnel after shipping and billing address information have been captured, then you can easily pass tax and shipping to the Bread button.

If Bread is configured to allow users to check out before the standard checkout flow (e.g., from the product detail and shopping cart pages), then Bread provides Javascript callbacks that can be used to return tax and shipping information. This will be based on the customer shipping information Bread collects on your behalf.

For example:

opts.calculateTax = function(shippingContact, billingContact, callback) {
  $.ajax({
    url: '/tax',
    type: 'POST',
    contentType: 'application/json',
    data: JSON.stringify({
      shippingAddress: shippingContact,
      total: items[0].price * items[0].quantity
    })
  })
  .done(function(data){
    callback(null, data);
  })
  .fail(function(err){
    callback(err);
  });
};
opts.calculateShipping = function(shippingContact, callback) {
  $.ajax({
    url: '/shipping',
    type: 'POST',
    contentType: 'application/json',
    data: JSON.stringify({
      shippingAddress: shippingContact,
      total: items[0].price * items[0].quantity
    })
  })
  .done(function(data){
    callback(null, data);
  })
  .fail(function(err){
    callback(err);
  });
};

This example assumes a simple endpoint on the server that will return tax cost and shipping options based on total price and shipping address; your actual system configuration may be more complex.

The shipping contact will include the customer’s selected shipping option as the field selectedShippingOption. This will contain shipping information provided by the shippingOptions field or by the calculateShipping callback, which may be used to calculate tax.

See the reference section for more information.

Capture Information about Abandoned Checkouts

If a customer starts going through the Bread workflow and closes it without completing a checkout, merchants can capture the customer’s email address and potentially the pre-qualification status via the onCustomerClose function.

This is highly valuable, and we recommend that you surface a customized message to the customer based on the status returned from onCustomerClose. 

There are four potential outcomes for customers pre-qualifying with Bread Checkout:

  • Pre-qualified: Customer is pre-qualified for financing options for at least the amount of the checkout
  • Partially pre-qualified: Customer is pre-qualified for financing options, but not for the total amount of the desired checkout. To help partially pre-qualified customers convert, talk to your Success representative about using Bread’s out-of-the-box Split Pay feature. Split Pay lets your customers input a credit or debit card to cover the remainder of their purchase.
  • Not pre-qualified: Customer is not pre-qualified for financing options at this time
  • Abandoned: Customer didn’t complete the application and authentication steps, so pre-qualification status is unknown
opts.onCustomerClose: function(err, custData) {
  if (err !== null) {
    console.error("An error occurred getting customer close data.");
    return;
  }

  var customerEmail = custData.email;
  var qualState     = custData.state;
  switch (qualState) {
    case 'PREQUALIFIED':
      console.log(customerEmail + " was prequalified for financing.");
    break;

    case 'PARTIALLY_PREQUALIFIED':
      console.log(customerEmail + " was partially prequalified for financing.");
    break;

    case 'NOT_PREQUALIFIED':
      console.log(customerEmail + " was not prequalified for financing.");
    break;

    case 'ABANDONED':
      if (customerEmail === undefined || customerEmail === null) {
        console.log("Unknown customer abandoned their prequalification attempt.");
      } else {
        console.log(customerEmail + " abandoned their prequalification attempt.");
      }
    break;
  }
}

Capture Information during Button Interaction

Similar to the onCustomerClose function, the onCustomerOpen function provides a method for including your own logic when customers open the Bread modal.

opts.onCustomerOpen: function(err, data, callback) {
  if (err !== null) {
    console.error("An error occurred getting customer open data.");
    return;
  }

  switch (data.source) {
    case 'PROMO':
      alert('Triggered by a promo click.');
      callback(true);
      break;
    case 'OFFSITE':
      alert('Triggered by an offsite redirect.');
      callback(true);
      break;
    case 'BUTTON':
      alert('Triggered by a button click');
      // Example use case where you want to make sure a user
      // applies discounts before proceeding. `user` object is
      // fictional and not related to Bread.
      if (user.hasDiscounts == false) {
        alert('You have unapplied discounts you can add before checking out!');
        callback(false);
      } else {
        callback(true);
      }
      break;
    default:
      callback(true);
  }

  // or add your own logic here
  // This code will run in the time between the customer clicking on the Bread button
  // and the Bread modal appearing


  // Finally, make sure to run callback(data) or the Bread modal won't open
  callback(data);
}

Targeted Financing

Bread works with you to tailor financing options that make sense for your business. In addition to your default financing program, Bread allows you to create additional, promotional financing programs that your store can offer based on various factors. By using the financingProgramId attribute, you can offer 0% APR financing conditionally based on higher margin SKUs or based on a cart size threshold. On the other hand, you can conditionally revert to interest positive financing for sale items or discounted carts.

Targeted Financing Examples

// Example - Offer promotional financing for cart sizes over $1,000
var cartSize = opts.items.reduce(function(total, item) {
  return total + (item.quantity * item.price);
}, 0);

if (cartSize > 100000) {
  opts.financingProgramId = 'cdcf5ae4-4f74-4e6d-9a9c-302e8d359cb9';
}


// Example - Change financing program for carts with discounts
if (opts.discounts.length > 0) {
  opts.financingProgramId = 'aabf5ae4-4f74-4e6d-9a9c-302e8d319cb9';
}

Note: Additional financing programs must be created by your Success account manager. Get started with targeted financing by reaching out to your main Success point of contact.

Checkout Reference

The following parameters are submitted to your form’s action endpoint, along with other elements of your form, once a Checkout is completed with Bread.

PARAMETER DESCRIPTION
tx_token The ID of the token representing checkout details.

You can further customize your customer’s Checkout experience by configuring the following options in our opts object.

Required

buttonId

string

The DOM id of the checkout button

bread-checkout-btn

items

array

Required if no customTotal is provided.

The item(s) in the customer’s cart at checkout. Fields in the items object are required.

name

Required

The name of the item
price

Required

The price of the item in cents. Must be a positive integer
sku

Required

The unique identifier or SKU for the product
imageUrl

Optional

A URL for the product image. The supported image types are .jpg, .gif, and .png
detailUrl

Required

A URL pointing to the product page for the item
quantity

Required

The quantity of the item as a positive integer

Highly Recommended

calculateTax

function

The callback method to dynamically calculate tax based on shipping address and product price/cart total. Recommended to enable checkouts from the product detail or cart summary page. Pass in shippingContact and callback as parameters. Return the tax total (as an integer in cents) or an error through the callback.

opts.calculateTax = function(shippingContact, billingContact, callback) {
  $.ajax({
    url: '/tax',
    type: 'POST',
    contentType: 'application/json',
    data: JSON.stringify({
      shippingAddress: shippingContact,
      total: items[0].price * items[0].quantity
    })
  })
  .done(function(data) {
    callback(null, data);
  })
  .fail(function(err){
    callback(err);
  });
};

billingContact

object

Customer’s billing address and information. Providing these fields will auto-populate fields in the form.

fullName

Required

The customer’s full name. Can be used in place of firstName and lastName.
firstName

Optional

Optional unless a fullName isn’t provided
lastName

Optional

Optional unless a fullName isn’t provided
address

Required

The customer’s billing address
address2

Optional

zip
(string)
Required
The customer’s 5 digit US billing zipcode
city

Required

state

Required

A two character state abbreviation
phone
(string)
Optional
A 10 digit phone number
email

Required

A valid email address

shippingContact

object

Customer’s shipping address and information. Providing this field will auto-populate fields in the form.

fullName

Required

The customer’s full name. Can be used in place of firstName and lastName.
firstName

Optional

Optional unless a fullName isn’t provided
lastName

Optional

Optional unless a fullName isn’t provided
address

Required

The customer’s shipping address
address2

Optional

zip
(string)
Required
The customer’s 5 digit US shipping zipcode
city

Required

state

Required

A two character state abbreviation
phone
(string)
Optional
A 10 digit phone number

calculateShipping

function

The callback method to dynamically generate shipping options and prices based on shipping address. Recommended to enable checkouts from the product detail or cart summary page. Pass in shippingContact and callback as parameters. Return an array of shippingOptions or an error through the callback. Please refer to shippingOptions under Checkout Reference for valid formatting.

opts.calculateShipping = function(shippingContact, callback) {
  $.ajax({
    url: '/shipping',
    type: 'POST',
    contentType: 'application/json',
    data: JSON.stringify({
      shippingAddress: shippingContact,
      total: items[0].price * items[0].quantity
    })
  })
  .done(function(data){
    callback(null, data);
  })
  .fail(function(err){
    callback(err);
  });
};

buttonLocation

String

 A String representing the location of the Bread button in the customer’s shopping journey. The options are: “product”, “cart_summary”, “checkout”, “category”, “financing”, “marketing”, and “other”.

Optional

tax

integer

The amount of tax on the purchase in cents.
customTotal

integer

The total amount of the purchase in cents, including all items, tax and shipping. This field will override the total amount calculation and must be a positive integer.

This field is required if no items are provided.

discounts

array

The discount(s) to be applied to the customer’s order. This amount will be deducted from the cart total, unless a customTotal is provided.

amount

integer

Positive integer amount for the discount value in cents
description

string

Text displayed to describe the discount.

financingProgramId

string

Set promotional financing programs with financingProgramId. If financingProgramId is not specified or invalid, the default financing program will be used. For more details, see Targeted Financing under Additional Implementation Options.
shippingOptions

array

The shipping option(s) to be displayed to the customer. If more than one option is presented, the customer will be able to select their option prior to checkout.

typeId

string

The ID representing the shipping type
cost

integer

The cost of the shipping option in cents. This must be a positive integer.
type

string

Text displayed to the user to name or describe the shipping option

actAsLabel

boolean

Default is true.

Display price per month label text instead of the button. The button will not be clickable if true. The bread-button element is assigned the bread-label class, instead of the bread-btn class.

asLowAs

boolean

Default is false.

Display price per month to logged out users using the lowest available APR and longest term length offered. Displayed with a tooltip explaining terms are subject to change. If a user is pre-qualified, she will see price per month based on her custom rate.

allowCheckout

boolean

Default is true.

Specify whether users are able to complete checkout after pre-qualification. If set to false, the user will be prompted to ‘Continue shopping’ if pre-qualified for financing.

showInWindow

boolean

Default is false.

Specify whether Bread Checkout launches in a new window regardless of device or browser. Use this if the page containing Checkout is not on a secure HTTPs connection.

disableEditShipping

boolean

Default is false.

Specify whether customers are able to modify the shipping address on the review order screen of the Bread Checkout modal.

requireShippingContact

boolean

Default is true.

Specify whether a user is required to fill out a shipping contact form during checkout. This is used in cases like virtual goods where no shipping address is ever collected.

customCSS

string

Overwrite the default Bread CSS with your own. More information here.
onCustomerOpen

function

The callback to track when a user opens the Bread Checkout modal. This can be used to prevent the modal from opening.
onCustomerClose

function

The callback to track when a user closes the Bread Checkout modal. This returns the user’s email address and pre-qualification status of the user.
done

function

The callback to invoke when the checkout is completed. A tx_token is passed if upon a successful checkout, otherwise an error object is passed.
addToCart

function

The callback to override the default flow of allowing users to checkout from the Bread Checkout flow. Instead, this override allows the user to add the items to her cart.

addToCart: function(err, callback) {
 $.ajax({
   url: '/cart/add/'+productId,
   type: 'PUT'
 }).done(function(data){
   if (data.error !== undefined) {
     callback(new Error(data.error));
   } else {
     // The Item was added to the cart succesfully
     // and they return to the product page.
     callback(null);
   }
  });
}