Install and Configure the Bread App

Find the Bread App in Marketplace

Get started by logging into your BigCommerce store. From the left-hand menu, select Apps > Marketplace. Search for “Bread” and click on the result that displays the Bread logo:

Click on the logo to see the Bread App details page. From here, click Install to add the Bread App to your store.

Configure the Bread App Settings

Once the Bread App is installed, you can find it in your store under Apps > My Apps > Bread Finance.

Click on Bread Finance to access the app, then click on App Settings from within the app.

Enter Your Sandbox API Keys

Your Bread API keys, which tie transactions made from your store to your Bread account, should be entered into API Key and API Secret under API Configuration. First, find your sandbox API keys in your Sandbox Bread merchant portal. This is your sandbox merchant portal — you should be able to log in with credentials provided by your main success point of contact.

Your API and Secret key will be listed within the Bread merchant portal under Account > API & Secret Keys. Copy the API Key and Secret Key, and paste both in their corresponding fields within the BigCommerce app. Additionally, make sure Use Sandbox Mode? is enabled. Health Care Mode should only be enabled for merchants selling health-related products.

Once these changes have been made, hit the Save button in the lower right corner of the Bread App settings.

Install Webhooks

Next, at the bottom of the Bread App Settings, click the “Install Webhooks” button and wait several seconds. If you refresh the page, and the button is not visible, this was installed successfully.

Insert the Application Link Code

Scroll to the bottom of the Bread App Settings page and find the Application Link Code section. Follow the instructions below:

1. Navigate to Storefront -> Script Manager.
2. Click “Create Script”
3. Set the following fields:
* Name of script: Bread
* Location on Page: Head
* Select pages where script will be added: All Pages
* Script type: Script
4. Paste this link code at the bottom of the app settings into the Script contents field

Note: This script must load on all pages where Bread buttons will be present.

Next Steps

Below you will find a reference guide to all of the settings, but for now proceed to the next topic: Add Bread to Product Pages.

App Settings Reference

Cart Sized Targeted Financing (Optional)

This option allows you to offer an alternative loan program for products or cart sizes above a price threshold. For instance, you could offer promotional 0% financing for high priced items or carts. To enable this option, enter your alternative financing program ID and a price threshold. Please ask your main success point of contact to configure your cart sized targeted financing program.

SKU Based Targeted Financing (Optional)

This option allows you to offer an alternative loan program for a specific list of SKUs.To enable this option, enter your alternative financing program ID and list of SKUs. Please ask your main success point of contact to configure your SKU Based financing program.

Button Configuration

Use Custom CSS to style your Bread buttons. Please read Style the Bread Button for guidance on forming your CSS. The styling set in this field will apply to the Bread buttons on your Product page, and you can specify styling to use on your cart page within the Cart Page settings below. Note: Your CSS should be minified using a tool such as https://cssminifier.com.

Product Details Page

Enable Display Bread Button? to show Bread buttons on product pages and allow customers to pre-qualify for financing. Please refer to the Add Bread to Product Pages documentation to get Bread onto your product pages.

  • Display as Label Only? (Not Recommended) will set the Bread button to display text you can specify in the Button Configuration settings, and will not display an “As low as” amount.
  • Display Monthly Price? (Recommended) will set the Bread button to show an “As low as” monthly price based on the product’s price.
  • Button Identifier specifies the Bread button HTML ID attribute used on your product page template.

Cart Page

Enable Display Bread Button? to show a Bread button on the cart overview page and allow customers to pre-qualify for financing. Please refer to the Add Bread to Cart Summary Page documentation to get Bread onto your cart page.

  • Display Monthly Price? will set the Bread button to show an “As low as” monthly price.
  • Button Identifier specifies the Bread button HTML ID attribute used on your cart page template.
  • Custom CSS allows you to apply custom css to the Bread button on your Cart page.

Checkout

To enable Bread on your checkout page and allow customers to complete their purchase with Bread, you have to first create a “proxy” payment method from within Store Setup > Payments. Once the proxy payment method has been created in your store admin, navigate back to the Bread App settings page and select this payment method from the Proxy Payment Method drop down menu. This step is required for Bread to override a payment method and display on your checkout page. Note that if you are using BigCommerce Optimized One Step Checkout you must enable the Cash On Delivery payment,  set the “display name” to be “Bread # Pay Over Time” and select this as your proxy payment method.

Please refer to the Add Bread to Checkout Page documentation for detailed instructions on checkout page set up.

  • Enable Use Embedded Checkout to have the Bread modal open as an embedded iframe on your checkout page.
  • Enable Show the Bread Finance Logo? to display a Bread logo next to the Bread payment option on your checkout page.
  • Enable Display Monthly Price? to display an “As low as” monthly price next to the Bread payment method.
  • Enable Auto Settle Payments? to automatically settle Bread transactions. Please see if you qualify for auto-settlement with your main success point of contact.
  • Specify Payment Instructions (Optional) to guide customers through the Bread check out flow.

Overflow Payment Settings

When a cart size exceeds the credit limit extended to a customer, they will have the option to pay the remaining balance on credit or debit card. When the credit card portion of a Bread transaction is declined, this setting allows you to choose to automatically cancel these orders, or leave them in “Pending” status.

Order Cancellations

By installing webhooks, cancelling a Bread order in your general Order list, will also cancel the order if your Bread App and Bread Merchant Portal Order list.

Application Link Code

This section displays a script customized for your store that should be included within the Script Manager settings and/or the Google Analytics section of your Web Analytics panel. This script is responsible for including the bread.js library. See the “Insert the Application Link Code” instructions above, for detailed instructions on how to set this up.

Advanced Settings (Optional)

Minimum Display Value

This setting allows you to set a threshold where Bread will not be displayed below a certain price on Product, Cart, or Checkout pages.

Disabled SKUs

This setting allows you to define a set of SKUs where Bread will not be displayed on Product, Cart, or Checkout pages. If a disabled SKU is present in a cart with other non-disabled SKUs, Bread will not be displayed on Cart or Checkout pages.

Managing Transactions

Bread transactions will be reflected in both your BigCommerce OMS and the Bread App Orders List. You have the option to Capture, Cancel, and Refund Bread transactions from the Orders list, and these actions will automatically flow back to Bread and be reflected in your Bread Merchant Portal.

Note: You are not required to manage transactions in the Bread BigCommerce app. Alternatively, you can choose to manage transactions in the Bread Merchant portal only. Actions taken in the Bread Merchant Portal will NOT flow back to the Bread app order list or your BigCommerce OMS.

image00

Capturing Orders

If you qualify for Auto-Settlement, you can enable Auto Settle Payments? within the Checkout settings of the Bread app. This will allow Bread orders to be automatically captured automatically upon authorization. Please confirm with your Success point of contact to see if you qualify for auto-settlement.

If you do not qualify Auto-Settlement, you are required to capture (settle) Bread orders upon fulfillment. To capture an order in the Bread app order list, click the 3 dots in the “Action” column, and click “Capture”. The order Status in both the Bread App and Bread Merchant Portal order list, will be reflected as “Settled”, allowing you to receive funds for the transaction.

Note: If you attempt to Capture an order in the Bread app that is already reflected as “Settled” in the Bread Merchant Portal, you will see a “Payment Capture Failed” error message, indicating that Bread already knows the transaction as captured.

Cancelling Orders

You can Cancel a partial or full amount of a Bread transaction that is Authorized, but not yet Settled. To cancel an order in the Bread app order list, click the 3 dots in the “Action” column, and click “Cancel”. You will be presented with the below options to partially or fully cancel your order. The action you take will be automatically reflected in the Bread Merchant Portal.

If you partially cancel an order, the new order total will be reflected in the Adjusted Total column in the Bread App orders list.

Refunding Orders

You can Refund a partial or full amount of a Bread transaction that is Settled. To refund an order in the Bread app order list, click the 3 dots in the “Action” column, and click “Refund”. You will be presented with the below options to partially or fully refund your order. The action you take will be automatically reflected in the Bread Merchant Portal. Full refunds will automatically update the order status in your BigCommerce OMS as well.

If you partially refund an order, the new order total will be reflected in the Adjusted Total column in the Bread App orders list.