Bread Apply

How Bread Apply Works

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.

Similar to Bread Checkout, Bread Apply drives customers through a pre-qualification flow. Unlike Bread Checkout, however, Bread Apply is not associated with specific products or carts and does not allow the customer to complete their purchase.

Step 1: Add bread.js to your Site

Add the following bread.js script to your base template so that it loads on all pages. Replace the value in data-api-key with your public API Key.

For production:

<script src="https://checkout.getbread.com/bread.js" data-api-key="REPLACE WITH YOUR   PUBLIC API KEY"></script>

For sandbox:

<script src="https://checkout-sandbox.getbread.com/bread.js" data-api-key="REPLACE WITH YOUR SANDBOX PUBLIC API KEY"></script>

🚧

Testing in Sandbox

Only use your sandbox API keys and the sandbox Bread domain for testing and development. This ensures you don’t unintentionally create live transactions.

📘

Bread Apply and Supported E-commerce Platforms

For merchants using a supported e-Commerce platform (e.g. Magento, Shopify, WooCommerce) and attempting to add a Bread Apply button, the bread.js script may already be included. You can test this by typing bread into the browser console and seeing if it is defined.

Step 2: Button Placement and Configuration

Place a <div> element where you’d like to display the Bread Apply button on your page. This element must have a class attribute containing the bread-promo class and a data-button-location attribute containing the location of the button on your site (i.e. financing, product…). Note that the element must be a <div> and not a <span> or other non-block element. For example:

<div class="bread-promo bread-modal-button" data-custom=true data-button-location="financing">
    <div>Get My Rate</div>
</div>

Step 3: Styling The Apply Button

The Bread Apply button can be styled like any other element on your site (in-line, style tag, external stylesheet). Make sure the Apply div element includes the attribute data-custom=true.

<div class="bread-promo bread-modal-button" data-custom=true data-button-location="financing">
    <div>Get My Rate</div>
</div>
<style>
.bread-promo {
 height: 50px;
 width: 250px;
 background: #000;
 color: #fff;
 line-height: 50px;
 text-align: center;
}
.bread-promo:hover {
 background: #999;
}
</style>

Using the HTML/CSS above will render a Bread Apply button like below:

Capture On Open And Close Events

Bread events offer a way to capture information or insert custom logic when customers click your Bread Apply buttons or close the Bread modal. Subscribe to Bread events to specify custom functionality

bread.events.subscribe('onCustomerOpen', function(err, data, callback) {
  // Same functionality as the opts callback.
  // The subscribe event is executed 2nd in the event that onCustomerOpen
  // is defined for both an object and on the message bus.
  callback(true);
});

bread.events.subscribe('onCustomerClose', function(err, data) {
  // Capture information here
  // data.status and data.email contains the customer's pre-qualification status and email
});

Moving from Sandbox to Production

When you're ready to go live with your Bread Apply button:

Apply Reference