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: 0800 to simulate approval, or 0400 to simulate denial
  • Passcode: 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 will be included automatically through the associated plugin.

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

Next, place the Bread Apply <div> element:

<div class="bread-promo bread-modal-button" data-api-key="dddddd-2222-eeee-3333-ffffffffffff" data-custom=true data-button-location="financing">
  <div>Get My Rate</div>
</div>

Note the attributes class=”bread-promo” and data-api-key=”your-api-key” are both required for the Bread Apply button. The data-api-key value in both examples is a sample public API key. Please replace the data-api-key in this example with the sandbox key provided to you by Bread.

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-api-key="dddddd-2222-eeee-3333-ffffffffffff" 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>

Apply Reference

Required

class

string

Value is bread-promo for Bread Apply
data-api-key

string

Your public API key
data-custom

boolean

Value must be true

Specify to enable custom markup

Optional

financing-program-id

string

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.

data-show-in-window

boolean

Default is false

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

data-button-location

string

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="https://checkout.getbread.com/bread.js" data-api-key="aaaaaaa-0000-bbbb-1111-cccccccccccc"></script>
<div class="bread-promo bread-modal-button" data-api-key="aaaaaaa-0000-bbbb-1111-cccccccccccc" data-custom=true data-button-location="financing">
  <div>Get My Rate</div>
</div>

When you’re ready to go live with your Bread Apply button, follow these steps:

  1. Change the Bread.js <script> src attribute to https://checkout.getbread.com/bread.js
  2. Change the data-api-key in the Bread.js <script> and bread-promo <div> to your live public API key

Capturing Open Events

Bread offers the ability to capture information or insert custom logic when customers click your Bread Apply buttons. Use the Bread events subscribe feature to specify custom functionality when customers open the Bread modal.

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);
});