Financing Page
The below guidance is for merchants on Bread Pay™ Classic platform.
For merchants on Bread Pay™ 2.0. platform, please refer to our 2.0. documentation HERE.
Why create a financing page?
A financing page that links across your site means customers are able to learn about financing your products long before checkout. With a dedicated page, they see that financing is available in your navigation menu on the homepage, product category page, and everywhere else—rather than just when they’re about to pay.
Not only does a financing page raise awareness earlier in the buying process, it serves as a place where you can conveniently store all the information customers need to answer their questions about your options. Because they have this information at hand, your customers can be more informed and more confident about choosing financing.
How to create a financing page
For easy implementation, Bread has created a financing page HTML template for you to leverage on your site. You can view the template code and a preview below.
You are welcome to customize our financing page or create your own. If you choose to do so, you must submit any updates to your success point of contact for compliance review before the asset is brought live.
Be sure to enable the Bread Apply button to allow customers to prequalify with Bread on the financing page and understand their purchasing power before they begin their purchasing journey.
Critical Compliance Note: Disclosures
Make sure to update the disclosure at the bottom of the template to match your loan program. You can source your required disclosure in the "Required disclosure based on loan program offered" section below.
If you make any edits to the text on this template, be sure to send it to your Merchant Success point of Contact review before you push the page live to ensure the language is legally above board.
Code
<!--
Install Checklist
Skip these directions if you are integrating on any of the following eCommerce platforms with a Bread® app or plugin: BigCommerce, Shopify, WooCommerce, or Volusion
1: Find the bread.js <script> on line 19
2: Enable the bread.js <script> by uncommenting line 19
3: Set your Bread API key within the bread.js <script data-api-key=""> attribute
Example: <script src="https://checkout-sandbox.getbread.com/bread.js" data-api-key="123e4567-e89b-12d3-a456-426655440000"></script>
4: When going live, change the bread.js <script src=""> attribute to "https://checkout.getbread.com/bread.js"
Example: <script src="https://checkout.getbread.com/bread.js" data-api-key="123e4567-e89b-12d3-a456-426655440000"></script>
-->
<!--<script src="https://checkout.getbread.com/bread.js" data-api-key=""></script> -->
<!-- UPDATE DISCLOSURES AT THE BOTTOM TO MATCH YOUR LOAN PROGRAM -->
<style>
<!--
/* ADJUST YOUR PRIMARY AND SECONDARY FONTS HERE +
REMOVE COMMENTING AS NEEED */
/* @import url("URLhere");
@teximport url("URLhere");
@import url("URLhere"); */
/* SET UNIVERSAL COLORS AND IMAGE HERE */
:root {
--brand-color-medium: #59bec9;
--buttons-hover-color: #007dba;
--header-color: #13294b;
--background-photo-url: url('https://i.imgur.com/7wWlEcZ.png');
--brand-font-family: 'Poppins',Arial,sans-serif;
--font-color:#13294b;
}
body {
margin: 0;
padding: 0;
}
.bread-content-inner {
position: absolute;
width: 90%;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.bread-points {
margin-top: 50px;
}
.bread-section {
position: relative;
width: 100%;
text-align: center;
}
.bread-style {
box-sizing: border-box;
font-family: var(--brand-font-family);
font-size: 16px;
}
.bread-main p {
color: var(--font-color);
}
.bread-header {
min-height: 300px;
background: var(--header-color);
color: #fff;
background-size:cover;
background-position: center;
background-repeat: repeat;
background-image: /* linear-gradient( rgba(0, 0, 0, .7), rgba(0, 0, 0, 0.7) ), */ var(--background-photo-url);--> */
}
.bread-header h6 {
margin: 0;
font-family: var(--brand-font-family);
font-size: 50px;
line-height: 50px;
font-weight: 800;
color:#fff;
}
.bread-header p {
margin: 2em 0;
}
.bread-style h2 {
font-family: var(--brand-font-family);
font-style: normal;
font-weight: 800;
font-size: 40px;
line-height: 49px;
color: var(--font-color);
}
.bread-style h3 {
margin: 0;
font-family: var(--brand-font-family);
font-size: 1em;
color: var(--font-color);
}
.bread-main {
background: #fff;
color: #333;
}
.bread-check-your-rate {
color: #FFFFFF;
font-family: var(--brand-font-family);
margin-bottom: 20px;
font-size: 23px;
line-height: 40px;
font-weight: 800;
margin-bottom: 6px;
max-width: 625px;
width: 80%;
margin: 0 auto;
}
/* 'CHECK YOUR RATE' BOX */
.bread-rate-box {
height: 250px;
background: var(--buttons-hover-color);
color: #333;
}
.bread-footer {
background: #edeeef;
color: #333;
overflow-wrap: break-word;
margin: auto;
}
.bread-contact {
margin-bottom: 50px;
}
.bread-disclosure {
font-size: 14px;
margin: 0 auto;
width: 70%;
padding: 10px 0;
}
a,
.bread-contact-info {
text-decoration: none;
color: var(--brand-color-medium);
}
.bread-promo.one {
background: var(--brand-color-medium);
border-radius:25px;
font-family: var(--brand-font-family);
font-style: normal;
font-weight: bold;
font-size: 16px;
line-height: 22px;
display: flex;
align-items: center;
text-align: center;
color: #FFFFFF;
width: 100%;
height: 50px;
max-width: 280px;
justify-content: center;
border: 1px solid var(--brand-color-medium);
text-transform: uppercase;
cursor: pointer;
margin: 30px auto 0px auto;
border: 1px solid #FFFFFF;
border-radius:25px;
padding: 0px, 21px, 0px, 21px;
}
.bread-promo.one:hover {
background-color: var(--buttons-hover-color);
border: 1px solid #fff;
text-decoration: none;
color: #fff;
transition: all 0.4s ease;
}
.bread-promo.bread-promo-two {
background: var(--buttons-hover-color);
border: 1px solid #FFFFFF;
border-radius: 25px;
padding: 0px, 21px, 0px, 21px;
min-width: 15px;
width: 100%;
max-width: 250px;
font-style: normal;
font-weight: bold;
font-size: 16px;
line-height: 22px;
display: flex;
margin: auto;
text-align: center;
height: 50px;
justify-content: center;
color: #FFFFFF;
margin: 30px auto 0px auto;
align-items: center;
font-family: var(--brand-font-family);
}
.bread-promo.bread-promo-two:hover {
color: #fff;
border: 1px solid #FFFFFF;
transition: all 0.4s ease;
background: var(--brand-color-medium);
transition: all 0.4s ease;
}
.bread-learn-more {
font-family: var(--brand-font-family);
font-style: normal;
font-weight: 800;
font-size: 18px;
line-height: 28px;
color: var(--brand-color-medium);
text-transform: uppercase;
position: relative;
width: 100%;
text-align: center;
}
#subhead-terms {
color: black !important;
}
.bread-three-col div {
margin: 50px 20px 0;
}
.bread-three-col img {
margin-bottom: 15px;
}
p{
padding: 5px 0;
line-height: 1.3;
}
@media ALL and (min-width: 768px) {
.bread-three-col {
display: flex;
padding: 0px 15px;
justify-content: space-between;
}
.bread-three-col div {
width: 30%;
margin: 0;
}
.bread-points {
margin-top: 75px;
}
.bread-style h3 {
font-size: 1.25em !important;
}
p {
padding: 0;
}
}
-->
</style>
<body>
<div class="bread-header bread-section bread-style">
<div class="bread-content-inner">
<h6>Financing Available</h6>
<p>
Clear, transparent terms. Fair rates. No prepayment penalties.<br /><br />
</p>
<div
class="bread-promo one"
data-custom="true"
data-button-location="financing"
>
GET YOUR RATE
</div>
</div>
</div>
<div class="bread-main bread-section bread-style">
<h2>Pay Over Time</h2>
<p>
Through
<b
><a
href="https://www.breadpayments.com/shoppers/"
target="_blank"
rel="noopener noreferrer"
><u>Bread Pay</u></a
></b
>™, we offer easy and affordable financing options so you can pay for your
purchase over time.
</p>
<div class="bread-points">
<div class="bread-three-col">
<div>
<img
src="https://i.imgur.com/FyifnXZ.png"
alt="calendar icon"
style="width: 80px"
/>
<h3>Affordable Monthly Plans</h3>
<p>
Buy now and pay for your purchase over time at competitive interest
rates.
</p>
</div>
<div>
<img
src="https://i.imgur.com/6MmfxfK.png"
alt="payment icon"
style="width: 80px"
/>
<h3>No Prepayment Penalties</h3>
<p>
Pay for your purchase with monthly payments and prepay at any time
without penalty.
</p>
</div>
<div>
<img
src="https://i.imgur.com/5OBv9tM.png"
alt="calendar icon"
style="width: 80px"
/>
<h3>Easy Application</h3>
<p>
Get a decision in seconds with no obligation to buy. Checking your
rate won't affect your credit score. Your data is safe and
encrypted.
</p>
</div>
</div>
<br />
<div class="bread-section bread-learn-more">
<br />
<a
href="https://www.breadpayments.com/help-center"
target="_blank"
rel="noopener noreferrer"
>LEARN MORE ► </a
><br /><br />
</div>
</div>
</div>
<br />
<div class="bread-rate-box bread-section bread-style">
<div class="bread-content-inner bread-check-your-rate">
<p>
Check your rate in seconds <br />
without leaving our site <br />
</p>
<div
class="bread-promo bread-promo-two"
data-custom="true"
data-button-location="financing"
>
GET YOUR RATE
</div>
</div>
</div>
<div class="bread-section bread-style">
<div class="bread-check-your-rate" style="color: #0f233f; margin-top: 40px">
<div class="bread-section bread-style">
<center>
<div
class="bread-check-your-rate"
style="color: #0f233f; margin-top: 40px"
></div>
Questions? Visit the
<a href="https://www.breadpayments.com/help-center"
>Bread Pay help center.</a
><br /><br />
</center>
</div>
</div>
</div>
<!-- -->
<div class="bread-footer bread-section bread-style">
<p class="bread-disclosure">
Subject to approval of credit application. Bread Pay™ loans are made by Comenity Capital Bank, a Bread Financial™ company.
</p>
</div>
</body>
<!-- END FINANCING PAGE CODE -->
Preview of the financing page
Financing Available
Clear, transparent terms. Fair rates. No prepayment penalties.
Pay Over Time
Through Bread Pay™, we offer easy and affordable financing options so you can pay for your purchase over time.
Affordable Monthly Plans
Buy now and pay for your purchase over time at competitive interest rates.
No Prepayment Penalties
Pay for your purchase with monthly payments and prepay at any time without penalty.
Easy Application
Get a decision in seconds with no obligation to buy. Checking your rate won't affect your credit score. Your data is safe and encrypted.
Check your rate in seconds
without leaving our site
Updated 11 months ago