The Bare Essentials

WooCommerce Integration Overview

Integrating Bread with WooCommerce and WordPress involves just a handful of steps. With these instructions you can complete a Bread integration within an hour, and enable your customers to qualify and pay for your products with financing in one quick, easy checkout.

Bread’s WooCommerce integration consists of activating a plug-in that injects Bread on any or all of the following pages:

  • Product detail page: This feature presents the Bread button, with “as low as” dollars per month pricing on your product detail page. Customers can pre-qualify for credit directly, and optionally complete the purchase for a single product with financing on the spot without having to leave the page.
    image03
  • Shopping cart overview page: This feature presents the Bread button, with “as low as” dollars per month pricing on your cart page for a set of products. Customers can pre-qualify for credit directly, and optionally complete the purchase for their entire cart with financing on the spot without having to leave the page.
    image06
  • Payment method on checkout page: This feature keeps customers in your store’s existing WooCommerce checkout flow, keeping the experience identical to your existing standard payment methods, and allowing customers to be approved for financing before submitting their order.
    image05

The integration involves the following steps:

  • Install and set up the WooCommerce Bread Gateway plugin
    • Acquire the plugin package from Bread
    • Upload (via FTP or otherwise) the package contents to your WordPress site
    • Enable the plugin in your WordPress admin
    • Configure the plugin in your WooCommerce admin
  • Customize the experience
    • Choose where you wish Bread to appear
    • Design the appearance of the Bread button
    • Customize the Bread experience
  • Manage transactions in WooCommerce

Bread Extension Installation and Setup

The Bread plugin contains everything you need to use Bread in your WooCommerce store. To install the app directly from the WordPress App store:

  1. Navigate to the admin page of your WordPress site
  2. Go to Plugins. Click Add New
  3. In the Search Plugins search bar, type “Bread Finance”
  4. An app with the Bread logo should pop up, click Install Now

image03.5

If you’d prefer to install the app via FTP or direct upload of a zip file:

  1. Navigate to our WordPress plugin page here.
  2. Unpack the WooCommerce Bread plugin and upload the bread-finance folder (likely using FTP to your site server) to the wp-content/plugins folder of your WordPress installation. Alternatively, you can directly upload the zip file by clicking Add New and Upload Plugin. image03.5
  3. Log in to your WordPress admin site. Open Plugins on the left-hand menu and select Installed Plugins. Find the Bread Finance plugin and click Activate.image04
  4. The WooCommerce Bread plugin is now installed. The next step is to configure the Bread plugin settings. To get started, open WooCommerce on the left-hand menu and select Settings. Next, select the Payments tab and select Manage next to Bread (Finance) – Pay Over Time.
    image07

Configuring Bread:

  1. Ensure Enable this gateway is checked.
  2. For Environment, select Sandbox. Enter the Sandbox API Key and Sandbox API Secret Key provided by your Bread Success point of contact.
  3. Under Category Page Options, Product Page Options, and Cart Summary Page Options, ensure the following are checked:
    • Allow Checkout?
    • As Low As?

    Ensure the following are unchecked:

    • Act As Label?

    image07.1

  4. Under Checkout Payment Options, ensure the following are checked:
    • As Low As?

    Ensure the following are unchecked:

    • Disabled

    image07.2

Bread is now installed in sandbox mode on your site, using out-of-the box styles and placement, on product detail page, shopping cart page, and checkout page. Don’t worry – you’ll be able to change the appearance and placement of the Bread button and the Bread checkout flow.

Testing

When filling out the Bread modal in sandbox mode, feel free to make up ‘borrower’ credentials — no real credit is pulled, and no texts or emails are sent by Bread. A few things to note:

  1. Use a unique, random phone number (mash the number keys). Since customers are identified by phone number, using the same phone number repeatedly may result in a denial as the loan capacity associated with that phone number is exhausted.
  2. Birth Date: A birth date before 2000
  3. For the Last 4 SSN, use 0800 to simulate a credit approval or 0400 to simulate a credit denial.
  4. The one time 4-digit passcode is always 1234.

Product detail page

The Bread button appears near the “add to cart” button by default. It will show the dollars per month pricing for the customer for the given product. Note that for products with variations, the Bread button will automatically reconfigure based on the selected variation. It will also hide the Bread button if the product is not in a valid state.

Click on the button, and provide your test information per the above instructions. You will be pre-qualified for a loan with Bread.

If you proceed to provide shipping address information, Bread will connect to your store’s existing tax and shipping logic to present tax and shipping in the final review screen. If you click “Accept and checkout,” an order will be placed with Bread in your WooCommerce order management system, and the customer will land on your standard order confirmation page.

If you were already logged into the WooCommerce store as a customer with default billing and shipping contact information, that information will have been pre-filled into the Bread forms once you open them.

Cart overview page

The Bread button appears near the “proceed to checkout” button by default. It will show the dollars per month pricing for the customer for the given cart.

Click on the button, and provide your test information per the above instructions. You will be pre-qualified for a loan with Bread.

If you proceed to provide shipping address information, Bread will connect to your store’s existing tax and shipping logic to present tax and shipping in the final review screen. If you click “Accept and checkout,” an order will be placed with Bread in your WooCommerce order management system, and the customer will land on your standard order confirmation page.

If you were already logged into the WooCommerce store as a customer with default billing and shipping contact information, that information will have been pre-filled into the Bread forms once you open them.

Payment method at checkout

The Bread button appears as a payment method among all other payment methods available. It will show the dollars per month pricing for the customer for the given cart, inclusive of tax and shipping already selected.

Select the Bread radio option and click on the button, and provide your test information per the above instructions. You will be pre-qualified for a loan with Bread.

After clicking “Accept and checkout,” your order will be submitted with Bread payment information.

Customizing Bread

The Bread button is highly customizable, and you can make it appear and behave any way you like.  This can be done in the Custom CSS text area under the Bread Appearance section in the Bread plugin configuration, which accepts a string of custom CSS. For more detailed instructions, refer to Customize the Bread Experience

Handling Orders After the Checkout

The Bread extension integrates seamlessly with WooCommerce so you can manage orders paid for with financing without leaving your standard order management system.

Actions taken in the WooCommerce order management system for Bread app orders will be automatically reflected in Bread’s systems. Orders paid for with Bread will be noted in the order as “Payment via Bread: Pay over time.”

  • To capture funds, change the order status to either “Processing” or “Completed” once you have fulfilled the order and save.
    image02
  • To cancel a Bread transaction, change the order status to “Cancelled” once you have fulfilled the order and save.
  • To partially or completely refund a settled Bread transaction, click “Refund” in the order view, supply a refund amount, and then click “Refund via Bread (Finance).”
    image00

Order Status Chart

The following flowchart displays the correlation between an order’s status in WooCommerce and its corresponding status in Bread’s Merchant Portal.
image10

In a few cases, the WooCommerce order status may not match the corresponding Bread order status shown above. If so, there may be room for further investigation. Please contact your Bread Success associate with any questions regarding mismatched order statuses.

Bread Settings Reference

Field Type Description Example
Enable/Disable [Checkbox] When checked, the plugin is globally enabled and Bread appears as a payment method option. Uncheck to globally disable. Checked
Title [Text] The text displayed for the Bread payment option at checkout Pay over time
Description [Text] The description displayed for the Bread payment option at checkout Bread lets you pay over time for the things you need
Environment [Production/Sandbox] Determines whether the Bread plugin will point to Bread’s sandbox or live production environment for integration and testing. Sandbox
Sandbox API Public Key [Text] The public merchant identifier key assigned to you by Bread for your sandbox account. aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa
Sandbox API Secret Key [Text] The secret merchant identifier key assigned to you by Bread for your sandbox account. bbbbbbbb-bbbb-bbbb-bbbb-bbbbbbbbbbbb
Live API Public Key [Text] The public merchant identifier key assigned to you by Bread for your live production account. aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa
Live API Secret Key [Text] The secret merchant identifier key assigned to you by Bread for your live production account. bbbbbbbb-bbbb-bbbb-bbbb-bbbbbbbbbbbb
Custom CSS [Text/CSS] Custom CSS that defines the look and feel of the Bread button to match your storefront. This will fail validation if it is not well-constructed CSS or includes any javascript events See instructions on Styling the Bread Button
Button Size [Default/Custom] When set to Custom, you can customize the Bread button size and use your site’s CSS to size the button (see above) Default
Button Placement [Dropdown Options] Displays the Bread button at the specified location. Enabled must also be checked. If “Don’t display button on [product/category/cart summary] pages” is selected, the Bread button will not appear on that page. After Add to Cart button
As Low As? [Checkbox] When checked, the user will see indicative “as low as” pricing based on a representative rate everywhere the Bread button is shown, before pre-qualifying. When unchecked, the user will see descriptive text, such as “pay over time,” which can be controlled in your Custom CSS section of Button Appearance. Checked
Act as Label? [Checkbox] When checked, and if the user is logged in to Bread with an offer of credit terms, the button on product pages will be replaced by informative text displaying to the user the cost per month of the item, based on his/her risk-based rate and prompting him/her to add the item to the merchant shopping cart. When unchecked, the cost per month is displayed in a button that can be used to checkout directly with a single item from the product detail page. Unchecked
Allow Checkout? [Checkbox] When unchecked, the user will be presented in the Bread flow with a button that allows him/her to return to your site rather than straight through to checkout. Check this checkbox for direct conversion and uncheck to force customers through your standard checkout funnel. Checked
Checkout Page: Disabled [Checkbox] When checked, the Bread button at the checkout page will be disabled. Uncheck to enable the Bread button at checkout. Enabled must also be checked in order for the Bread button to appear. Unchecked

 

Now that you’re all setup, please click here for best practices on marketing your Bread program!