Bread Apply

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.

With Bread Apply, you can:

  • Strategically place ‘Get My Rate’ style buttons throughout the shopping journey 
  • Let your customers know if they pre-qualify for financing in seconds 
  • Inform customers of their purchasing power early in the shopping experience, driving upsells and cross-sells

Ultimately, using Bread Apply will increase customer awareness of financing options on your site. 

Don’t worry – the link below is in sandbox mode. No notifications will be triggered and no credit file will be pulled.

Apply Example

Get My Rate

To go through the pre-qualification experience, click on the button above 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: 07xx (Any 4-digit number starting with 07, such as 0789) to simulate approval, or 0400 to simulate denial
  • Mobile Code / Token: 1234

After the customer is pre-qualified with Apply, Bread will save the user’s session and the customer will be remembered. As the customer views products on your site, monthly prices will dynamically update to reflect that specific customer’s approved APR and your longest term. The customer will not need to re-submit this information when later interacting with Bread Checkout, allowing them to speed through the checkout process.

Apply Button Placement

We strongly recommend that you place Bread Apply on your homepage and on a dedicated financing overview page.


Display Apply on Your Site

Using Bread Apply is as simple as placing a <div> element on your page with a couple of attributes. First, make sure that you have included the bread.js JavaScript library. For merchants using a supported e-Commerce platform (e.g. Magento, Shopify, WooCommerce), 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.

<script src="" data-api-key="71f27c89-1e0d-4bb3-b6eb-f3323cc19f27" ></script>

Next, place the Bread Apply <div> element:

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

Note the attribute class=”bread-promo” is required for the Bread Apply button. You can replace “Get My Rate” with your choice of wording. Ultimately, all financing language will be reviewed for compliance.

Load Apply Buttons

By default, the bread.js script will automatically detect all <div> elements on the page with an attribute of class=”bread-promo” and load Bread Apply buttons. However, any bread-promo buttons that are dynamically added to the page after the initial page load (i.e. within a modal) will not trigger automatically. For dynamic Bread Apply buttons, you can manually trigger the button load by using the method bread.apply().

Style 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>

.bread-promo {
  height: 50px;
  width: 250px;
  background: #000;
  color: #fff;
  line-height: 50px;
  text-align: center;
.bread-promo:hover {
  background: #999;

Apply Reference




Value is bread-promo for Bread Apply


Value must be true

Specify to enable custom markup




Default is null

ID of your alternate financing program. An example use case for this attribute: promote a conditional 0% APR program while still offering a positive interest program by default.

Note: Financing programs are created by Bread. Please ask your main Success point of contact for helping setting up additional financing programs.



Default is false

Set as true to launch the Bread modal in a new window.



Default is null

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”, “other”


Moving from Sandbox to Production

<script src="" data-api-key="71f27c89-1e0d-4bb3-b6eb-f3323cc19f27" ></script>
<div class="bread-promo bread-modal-button" data-custom=true data-button-location="financing">
 Get My Rate</div>

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

  1. Change the Bread.js <script> src attribute to
  2. Update the <script> data-api-key attribute to your production API key

Note: To leverage Bread’s full product functionality, drive further sales, and optimize the Bread experience for your customers, please add bread.js to your base template.

Capturing Open and Close Events

Bread events offers 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:

Customer Open Event'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.

Customer Close Event'onCustomerClose', function(err, data) {
  // Capture information here
  // data.status and contains the customer's pre-qualification status and email