Add Bread to Checkout Page

Proxy Payment Method

Adding Bread as a payment method on the checkout page requires the use of a “Proxy Payment Method”. This is essentially an unused payment method that Bread can replace on the checkout page.

Note: ALL products are REQUIRED to have product images and SKUs for Bread to load successfully on your checkout page.

Add a Proxy Payment Method for Optimized One-Page Checkout (Most Common)

Get started by logging into your BigCommerce admin and navigating to Store Setup > Payments. If your store uses BigCommerce Optimized One-Page Checkout, under the Checkout Payment Settings tab, scroll down and expand Offline Payment Methods. Toggle on the Cash on Delivery payment method. The Display Name you enter must begin with “Bread #”. For example, “Bread # Pay Over Time” would be a valid Display Name.

Add a Proxy Payment Method for Legacy One-Page Checkout

If your store is using the legacy One-Page checkout, follow the same steps above, but navigate to Online Payment Methods. Select an online payment method that your store is NOT currently using, e.g., Beanstream. Remember, you are choosing a payment method that Bread will override on the checkout page.

Click Set up next to the selected online payment method. On the Settings page for the selected online payment method, fill in dummy information where necessary and enter a Display Name of your choice.

Click Save once you have completed the form.

Insert Footer Script (STRONGLY RECOMMENDED)

Navigate to Storefront -> Footer Scripts and insert the below script. This will hide the Cash On Delivery payment method on your checkout page until it is properly replaced by Bread.

Note: If you find your store is missing Footer Scripts, this is because BigCommerce deprecated this feature for your store. As an alternative, navigate to Advanced Settings > Web Analytics. Make sure Google Analytics is enabled and then select the “Google Analytics” tab. Paste the below code within the “Manually add Google Analytics tracking Code” field. Save your changes.

<style>
.form-checklist label[for="radio-cod"] {
display:none;
}
</style>

Enable within Bread App

Find the Bread App settings under Apps > Bread Finance > App Settings.

Scroll down to Checkout and find the Proxy Payment Method menu. From the drop down menu, select the payment method that you configured earlier. You can refer to the App Settings Reference page for an overview of the additional Checkout settings.

Click Save to update your settings.

Bread will now available as a payment method on your live or staging site. Please confirm that Bread is available on your checkout page and perform a few test transactions in sandbox mode.

Note: If you find that Bread is not loading on your checkout page while testing, and you have confirmed all the products in your cart have images and SKUs, it is likely that the Application Link Code you installed during the Configure the Bread App Settings step is not carrying to your checkout page. Please follow these directions to get the script on your checkout page:

Highlight and copy the Application Link code from the Bread App Settings. Next, back out of the Apps menu and then select Advanced Settings > Web Analytics. Make sure Google Analytics is enabled and then select the “Google Analytics” tab. Paste the Application Link Code within the “Manually add Google Analytics tracking Code” field. Save your changes.

Otherwise, it may be that the jQuery namespace is not available at your checkout page. If so, please add the following line above the Bread Script you previously added to your Google Analytics text field:

<script type=text/javascript src=https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js></script>