Bread 2.0 Financing Page
Creating a dedicated Bread Pay™ financing page is critical to maximizing financed sales. For easy implementation, Bread Pay™ has created a financing page HTML template for you to leverage on your site. You can view the template code and a preview below.
Install Checklist:
- Replace the "your-integration-key-here" text contained in the script at the bottom of this HTML file (Line 430) with the integration key located in your Bread Pay Merchant Portal
- Copy the script contents and paste into the HTML page created for your financing page
- When going live, remove "-preview" in the SDK preview script on line 10
Template Code
<!-- Install Checklist
1. Replace the "your-integration-key-here" text contained in the script at the bottom of this HTML file with the integration key provided by your integration manager
2. If going live, replace the SDK preview script on line 10 with <script src="https://connect.breadpayments.com/sdk.js"></script>
3. Copy the script contents and paste into the HTML page created for your financing page
-->
<!-- UPDATE DISCLOSURE AT THE BOTTOM TO MATCH YOUR LOAN PROGRAM -->
<script src="https://connect-preview.breadpayments.com/sdk.js"></script>
<style>
<!--
/* ADJUST YOUR PRIMARY AND SECONDARY FONTS HERE */
@import url("https://fonts.googleapis.com/css?family=stalematelf:400");
@import url("https://fonts.googleapis.com/css?family=Nunito+Sans:400,600,700,800");
@import url("https://fonts.googleapis.com/css?family=play:400,600,700");
/* SET UNIVERSAL COLORS AND IMAGE HERE */
:root {
--brand-color-medium: #59bec9;
--buttons-hover-color: #007dba;
--header-color: #13294b;
--background-photo-url: url('https://payments-dev.breadfinancial.com/wp-content/uploads/2022/06/Financing-Page-Header.svg');
--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: var(--header-color);
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: 0px;
font-family: var(--brand-font-family);
font-size: 50px;
line-height: 50px;
font-weight: 800;
color: var(--header-color);
}
.bread-header h1 {
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;
font-family: 'Nunito Sans';
font-weight: 400;
font-size: 18px;
font-style: normal;
line-height: 28px;
}
.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: #1d8195;
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: #1C8195;
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 40px auto;
border: 1px solid #1C8195;
border-radius:25px;
padding: 0px, 21px, 0px, 21px;
box-shadow: 0px 5px 0px 3px rgba(78, 92, 111, 0.25)
}
.bread-promo.one:hover {
background-color: #1d8195;
border: 1px solid #fff;
text-decoration: none;
color: #fff;
transition: all 0.4s ease;
}
.bread-promo.bread-promo-two {
background: none;
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(--buttons-hover-color);
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">
<p>
<h6>Financing <br> Available</h6><br>
Clear, transparent terms. Fair rates.<br>No prepayment penalties.
<div class="bread-promo one" id="bread-placement-1">Low monthly payments</div>
</p>
</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://assets.platform.breadpayments.com/financing-templates/affordable-monthly-plans.svg"
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://assets.platform.breadpayments.com/financing-templates/no-prepayment-penalties.svg"
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://assets.platform.breadpayments.com/financing-templates/easy-application.svg"
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" id="bread-placement-2">Low monthly payments</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
<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>
<script>
var placements = [
{
allowCheckout: false,
domID: "bread-placement-1",
},
{
allowCheckout: false,
domID: "bread-placement-2",
},
];
BreadPayments.setup({
integrationKey: "PLACE INTEGRATION KEY HERE"
});
BreadPayments.registerPlacements(placements);
BreadPayments.on("INSTALLMENT:APPLICATION_CHECKOUT", () => {});
BreadPayments.on("INSTALLMENT:APPLICATION_DECISIONED", () => {});
</script>
</body>
<!-- END FINANCING PAGE CODE -->
Preview
Financing
Available
Clear, transparent terms. Fair rates.
No prepayment penalties.
Low monthly payments
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
Low monthly payments
Updated 3 months ago