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 a plug-in that injects Bread at any or all of:

  • 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 Bread WooCommerce 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
  • Managing transactions in WooCommerce

Bread Extension Installation and Setup

The Bread plugin contains everything you need to use Bread in your WooCommerce store. Currently, the plugin is privately distributed by Bread. Follow the below instructions to install it on your store:

  1. Contact your Bread Success point of contact to obtain the Bread WooCommerce plugin archive.
  2. Unpack the Bread WooCommerce plugin archive. Upload the folder woocommerce-bread (likely using FTP to your site server) to the wp-content/plugins folder of your WordPress installation.
  3. Log in to your WordPress admin site. Go to the Installed Plugins page. Find the WooCommerce Payment Gateway Bread Finance plugin and click Activate.
    image04
  4. The WooCommerce 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, open the Checkout tab and select Bread Finance next to Checkout options.
    image07

Configuring Bread:

image01

  1. Make sure that Enable / Disable is checked.
  2. Set Test or live to Test for integration and testing.
    • Enter the public and secret API Keys for sandbox provided by your account manager in the fields labeled Bread Sandbox API Public Key and Bread Sandbox API Secret Key.
  3. Make sure that all of the following are checked:
    • Enabled on Cart Overview Page
    • Allow Checkout on Cart Overview Page
    • Enabled on Product Details Page
    • Allow Checkout on Product Details Page
    • Enabled on Checkout Page
    • Use “as low as” pricing
    • Use default button size
  4. Make sure that the following are unchecked:
    • Display as Label

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

Bread is intended to be highly customizable, to fit with your customers, your product category, and your store’s overall brand and experience. As such, you will make some decisions and apply some customizations:

  • Where should Bread appear in my customer’s journey?
  • Where on a page should Bread appear? How much space should the button take up?
  • How do I want the Bread button to appear?

Where should Bread appear in my customer’s journey?

In thinking through your Bread implementation, you should decide:

  • Should Bread be available on the product detail page? (Controlled by the Enabled on Product Details Page option)
  • Should you allow customers to checkout immediately from there? Or do you only want to advertise dollars per month pricing and allow customers to pre-qualify for financing, so they know they have the purchasing power but still must go through your standard checkout funnel? (Controlled by the Allow Checkout on Product Details Page option.) Note that checking out directly from this page is particularly effective for merchants that typically sell a single big ticket item in each order.
  • Should Bread be available on the cart overview page? (Controlled by the Enabled on Cart Overview Page option)
  • Should you allow customers to checkout immediately from there? Or do you only want to advertise dollars per month pricing and allow customers to pre-qualify for financing, so they know they have the purchasing power but still must go through your standard checkout funnel? (Controlled by the Allow Checkout on Cart Overview Page option)
  • Should Bread be available on a payment method at checkout? (Controlled by the Enabled on Checkout Page option)

Where on a page should Bread appear?  How much space should the button occupy?

Positioning of the Bread button is controlled by the placement of the Bread page action in WordPress.

Product detail page:

The Bread action is placed on the product detail page with the following reference:

add_action(‘woocommerce_after_add_to_cart_form’, ‘bread_woocommerce_template_single_bread_button’);

To remove this default placement, you may call:

remove_action(‘woocommerce_after_add_to_cart_form’, ‘bread_woocommerce_template_single_bread_button’);

And place the bread_woocommerce_template_single_bread_button action wherever else you like.

The action places a <div> on the page, with identifier bread-checkout-btn. Use your site’s CSS to further size and position the Bread button. Note that if you wish to control the Bread button size yourself, you must change the setting Use default button size in the Bread configuration to unchecked.

Shopping cart page:

The Bread action is placed on the shopping cart page with the following reference:

add_action(‘woocommerce_after_cart_totals’, ‘bread_woocommerce_template_after_cart_button’);

To remove this default placement, you may call:

remove_action(‘woocommerce_after_cart’, ‘bread_woocommerce_template_after_cart_button’);

And place the bread_woocommerce_template_after_cart_button action wherever you like.

The action places a <div> on the page, with identifier bread-checkout-btn. Use your site’s CSS to further size and position the Bread button. Note that if you wish to control the Bread button size yourself, you must change the setting Use default button size in the Bread configuration to unchecked.

Checkout and admin side payment method pages:

The Bread action places a <div> on the page, with identifier bread-checkout-btn.Use your site’s CSS to further size and position the Bread button. Note that if you wish to control the Bread button size yourself, you must change the setting Use default button size in the Bread configuration to unchecked.

How do I want the Bread button to appear?

The Bread button is highly customizable, and you can make it appear and behave any way you like.  This is controlled by the Bread Button Design setting in the Bread plugin configuration, which accepts a string of custom CSS. For instructions on using this setting to style the appearance and behavior of the Bread button, see Bread Settings Reference below.

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

Bread Settings Reference

Field Type Description Example
Enable/Disable [Yes/No] Globally enables or disables the Bread Checkout plugin. When enabled, Bread appears as a payment method option Yes
Test or live [Test/Live] Determines whether the Bread plugin will point to Bread’s sandbox for integration and testing, or to the live production environment Test
New Order Authorize [Authorize Only/Authorize and Capture] Determines whether to request capture of funds immediately upon checkout in addition to authorizing the transaction. If you are unsure about whether you should be capturing at checkout, please speak with your Bread account manager. In most cases, you will want to set this to Authorize Only. Authorize Only
Enabled on Cart Overview Page [Yes/No] Displays the Bread button for conversions directly from the shopping cart page. Enabled must also be set to Yes Yes
Allow Checkout On Cart Overview Page [Yes/No] If this is set to false, the user will be presented in the Bread flow on the shopping cart page with a button that allows them to return to your site rather than straight through to checkout. Set this to yes for direct conversion, and to no in order to force customers through your standard checkout funnel. Yes
Enabled on Product Details Page [Yes/No] Displays the Bread button for conversions directly from the product details page. Enabled must also be set to Yes Yes
Allow Checkout On Product Details Page [Yes/No] If this is set to false, the user will be presented in the Bread flow on the product detail page with a button that allows them to return to your site rather than straight through to checkout. Set this to yes for direct conversion, and to no in order to force customers through your standard checkout funnel. Yes
Use “as low as” pricing [Yes/No] When set to yes, the user will see indicative “as low as” pricing based on a representative rate everywhere the Bread button is shown, before pre-qualifying. If set to no, the user will see descriptive text, such as “pay over time,” which can be controlled in your Bread button design CSS. Yes
Title [Text] The text that is displayed for the Bread payment option at checkout Bread: Pay over time
Description [Text] The description that is displayed for the Bread payment option at checkout Finance your purchase securely.
Bread Sandbox API Public Key [Text] The public merchant identifier key assigned to you by Bread for your sandbox account. aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa
Bread Sandbox API Secret Key [Text] The secret merchant identifier key assigned to you by Bread for your sandbox account. bbbbbbbb-bbbb-bbbb-bbbb-bbbbbbbbbbbb
Bread 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
Bread 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
Incomplete Bread Checkout error [Text] The text displayed to the user if she attempts to move past the payment section of checkout when Bread is selected but the Bread checkout flow has not been successfully completed Please click the pay over time button and complete the Bread finance forms or choose another payment method.
Bread Button Design [Text/CSS] Custom CSS that defines the look and feel of the Bread button to match your storefront. Will fail validation if not well-constructed CSS or includes any javascript events See instructions on Styling the Bread Button
Display as Label [Yes/No] If set to yes, when 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 risk-based rate and prompting him to add the item to the merchant shopping cart. When set to no, the cost per month is displayed in a button that can be used to check out directly with a single item from the product detail page. No
Use default button size [Yes/No] If set to No, the Bread button will take up all of the space available to it in its containing element. To customize the Bread button size, set this to No and use your site’s CSS to size the button (see above) Yes
Use Healthcare Mode [Yes/No] If set to Yes, WooCommerce will not send any product or customer information directly to Bread. Additionally, Bread checkout will be disabled on product detail and cart pages. No

 

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