Shopify Integration Steps

Install the Bread Pay App (Checkout)

Installing the Bread Pay app allows customers to select Bread as a payment method on the Shopify checkout page. When customers select Bread at checkout, they are redirected to the Bread pre-qualification and checkout experience before ultimately returning to your standard purchase confirmation page.

Step 1: Locate your api key, and api secret

In order to Configure the Bread Pay app you will need Public and Secret API Keys. These keys are available in your Merchant Portal. Sandbox versions of these keys will be needed when running test transactions, and you should work with these keys first. Access to the portal will be setup by the Integration Manager supporting you.

Bread Classic Sandbox: https://merchants-sandbox.breadpayments.com
Bread Classic Live: https://merchants.breadpayments.com

Once logged in, hover over the gear icon in the bottom left and click on "Account". Then Click "API & Secret Keys" to view your credentials. Keep this page open as you will need to reference these keys shortly.

Step 2: Install the Bread Pay App

Ensure that you are logged into Shopify with store owner privileges. This level of access is required to make payment method changes.

Navigate to the New Bread Pay App here: https://apps.shopify.com/bread-app

Click “Add app”

Then click “Install app”

Select Enable test mode and then click “Activate BreadPay”

Click "Manage"

Step 3: Configure the Bread Pay App

Here you will verify your desired settings and enter the keys you located in Step 1.

Set the Bread Version to "Classic"

If your Success manager has approved your account to “auto-settle” transactions, enable Auto-Settle payments.

Check the Box "Use sandbox (test) mode", when running test transactions.

Enter Both the Sandbox API and API Secret keys from the Sandbox Portal.

When Setting are configured, Click "Save" in the top right corner.

Confirm That Bread Is Now A Payment Method at Checkout

The Bread Pay app is installed and configured. Bread should now appear as a payment option at Checkout. You can confirm this by running through a standard checkout in your Shopify store and looking for Bread at the payment step.

Bread is now in test mode as a payment option on this site — if you are not ready to test Bread Checkouts, click the Deactivate option in the Payment Settings. When ready to re-activate Bread, you can manually search for it under Additional Payment Methods > Add payment methods.

Note: If you activated Bread as a payment method on your live site, customers will be able to see and select Bread on your live store. We recommend activating and testing Bread during low-traffic hours as Shopify does not offer a preview mode for alternative payment gateways.

Note: Currently, the Bread option displayed in the payment method step cannot be customized due to Shopify’s constraints

Install the Bread Pay Messaging App (Required)

The Messaging App is required for full functionality and integration with Bread Pay. This app allows important order details to be pulled into Bread's systems. It also allows you to place Bread pre-qualification buttons throughout your site, increasing awareness of your financing option and ultimately driving conversions. By placing Bread buttons strategically on your product, cart, and dedicating financing pages, customers are able to pre-qualify and complete a checkout with financing. To add a Bread pre-qualification button to PDP and Cart pages, you will need to:

Step 4: Install the Bread Pay Messaging App

Navigate to the Bread Pay Messaging App here: https://apps.shopify.com/bread-pay-messaging

Click “Add app”

Then click “Install app”

Once the Bread Pay Messaging app is installed you will be redirected to the apps settings page. You can also find this settings page within your Shopify Admin. Just click on Bread Pay Messaging from the Apps menu.

Step 5: Configure the Bread Pay Messaging App

The following steps are performed within the Bread Pay Messaging app Settings page in Shopify Admin.

Set the Bread Version to "Classic"

It is highly recommend to select "Enable Shopify Webhooks"

It is highly recommend to select "Show 'As low as' promotional text"

Copy the Shop ID at the top of the Bread Pay Messaging App, you will need it in the next step.

Click Save in the top right corner

Note: There are additional important settings to configure, but first we’ll walk through the process of adding Bread buttons to your Shopify product and cart templates.

Step 6: Adding Bread Buttons to your site.

If you are using a Shopify 2.0 Theme the Bread buttons can be added via Theme Blocks in the Themes customization options.

If you are using a Legacy Shopify Theme or if it is your preference, you can add the Bread buttons directly into your liquid files. Those instructions can be found here.

Using Shopify Theme Blocks:

From your Admin home page, click "Online Store" in the left navigation menu, and then click "Customize" on the right. Across the top of the Customize page, use the top centered drop-down menu to select your "Products" page, you can start with your default product page.

In the Product Information menu select "Add block", scroll to the apps section and select "BreadPay As Low As Button". Once added, click on the Bread button in the menu.

After clicking on the BreadPay element, paste the Shop ID that you copied from the Messaging app in the previous step. Then Click Save in the top right corner.

The bread button should now appear on the page. In the Menu, use the app squares on the right to drag and drop the button to its desired location.

The steps for adding the Bread Pay app theme block should be repeated for any other product page templates and for your cart page.

Note: Every Shopify theme handles browser width and device (desktop vs mobile) size differently. Open one of your product pages in a desktop browser and shrink/expand the browser horizontally. Similarly, try opening a product page on a mobile phone. Pay attention to how your “Add to Cart” buttons adapt to different widths and devices and make sure your Bread button responds similarly. You may have to use CSS media queries to ensure a consistent style between your Add to Cart and Bread buttons.

📘
Shopify Theme Blocks
For additional details on working with Shopify Theme Blocks, please reference the Shopify Documentation here: https://www.shopify.com/partners/blog/theme-blocks

Customize Bread Buttons And Modal

There are several additional settings available for fine-tuning the Bread Experience. These settings can be found in both the Bread Pay App and the Bread Pay Messaging App.

Click here for more information on your customization options.

Test Bread Integration

We strongly recommend you test your Bread integration with your sandbox keys before pushing Bread live on your production site. If available, this can also be done on a staging site.

Ensure that you have entered the Sandbox Keys, that were gathered in step 1 and have checked the box labeled "Use sandbox (test) mode".

In your store admin page, navigate to settings > payments and find Bread under “supported payment methods”, click "Manage".

Select the box labeled "Enable test mode", then click "Save".

You can leverage the following dummy data to run test transaction while in test mode:

Any name, address and email
Mobile Number: A random sequence of 10 digits – don’t use duplicates or sequential numbers (e.g. 555-555-5555 or 123-456-7890)
Birth Date: A birth date before 2000
Last 4 Digits of SSN: 07xx (Any 4-digit number starting with 07, such as 0789) to simulate approval, or 0400 to simulate denial
Mobile Code / Token: 1234

Note: You will not receive emails nor text messages when testing in sandbox mode. Please refer to our Testing documentation for additional guidelines.

Going Live With Bread

Once you are ready to go live with your Bread integration, you will have to enter your Live Production API keys in the Bread Pay App payments settings. Please reach out to your main Bread Pay point of contact and they will provide you with access to the Production Merchant portal where you will find your live API keys under Account Settings.

Shopify Payment Settings

In your store admin page, navigate to settings > payments and find Bread under “supported payment methods”.

Click “manage”

Uncheck the "Enable test mode" option, then click save.

Click "manage" again

Uncheck the "Use sandbox (test) mode", then click save in the top right.

Congratulations, you are now able to accept live Bread orders!