Magento 2 Integration Steps

STEP 1: Install and Configure Bread Extension

You can install the Bread Extension after downloading the plugin in one of the following locations:

Magento Marketplace: https://marketplace.magento.com/bread-module-breadcheckout.html
Bread Github: https://github.com/getbread/magento-v2-bread/releases

For a Composer installation follow the steps found here.

Zip File Installation Steps

In order to install the Bread Pay extension using a zip file:

1. Make sure you download the most recent version
2. Unzip contents into app/code/Bread/BreadCheckout folder
3. Copy file app/code/Bread/BreadCheckout/etc/adminhtml/system.us.xml to app/code/Bread/BreadCheckout/etc/adminhtml/system.xml
4. Copy file aapp/code/Bread/BreadCheckout/view/adminhtml/web/js/validation.us.js to app/code/Bread/BreadCheckout/view/adminhtml/web/js/validation.js
5. Enable module
   bin/magento module:enable Bread_BreadCheckout
bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento setup:static-content:deploy

Basic Configurations

Find the Bread Extension’s settings in the Magento 2 admin by:

1. Click on Stores on the left hand menu, select Configuration under Settings
2. Under Configuration, click on the Sales menu and select Payment Methods
3. Under Payment Methods, open Other Payment Methods and Bread Checkout

Basic Settings:

1. Set Enabled to Yes
2. API Mode should be set to Sandbox during integration testing, but should be switched over to Live once your integration is ready for production
3. Set the Bread module version to Bread 2.0
4. Find your sandbox API and secret keys in your Merchant Portal
5. Enter your Integration Key into the Integration Key field
6. Enter your API Key into the Sandbox API Public Key field
7. Enter your Secret Key into the Sandbox API Secret Key field. You can access these keys within the Account Settings section of your Bread Merchant portal.
8. Set Payment Action to Authorize & Capture to request for the immediate capture of funds upon checkout. Please speak with your Success account manager before enabling Authorize & Capture
9. Enable button on product details, cart, and/or checkout pages by changing one or more of Enabled on Product Details Page, Enabled on Cart Overview Page, and Display as Payment Method on Checkout to Yes.
10. In the upper right corner, hit Save Config to save your settings
11. Flush your Magento cache and reload your store on a page you’ve enabled Bread to confirm everything appears

With the basic settings above, you’ll be able to render Bread in the specified parts of your site.

STEP 2: Style the Bread Button

Bread is highly customizable, and the Bread button and modal can be styled to match your site’s theme.

Button Styling

The Bread button will render on Product Detail and Cart pages in an anchor tag, and it can be styled with CSS via your site's stylesheet. In order to style the Bread button, add the below snippets to your stylesheet:

On Product Detail page:

#bread-checkout-btn a {
  /*Add your styles here*/
}

On Cart:

#bread-checkout-btn-2 a {
  /*Add your styles here*/
}

Positioning and Sizing

Positioning of the Bread button is controlled by the placement of the Bread page block in Magento. You will need to edit your Magento files directly to make position adjustments for the Bread button.

You can control the size of your Bread button with CSS, but you will first need to set Use default button size to No in the Bread Extension Settings of your Admin Dashboard.

Product Detail Page

The identifier of the Bread block on the product detail page is breadcheckout.prod.view. By default, it is placed in reference to the product.info.extrahint block. You may use your page templates to place it elsewhere on the page to match your design.

Cart Overview Page

The identifier of the Bread block on the cart overview page is breadcheckout.checkout.view. By default, it is placed in reference to the checkout.cart.methods block. You may use your page templates to place it elsewhere on the page to match your design.

Both breadcheckout.prod.view and breadcheckout.checkout.view blocks will place two

<div id="bread-btn-cntnr">
    <div id="bread-checkout-btn" title="Bread Checkout" class="button"></div>
</div>