Magento 2 Integration Steps

STEP 1: Install and Configure Bread Extension

You can install the Bread Extension by downloading a zip file of the plugin, found here or on our github, and unzipping the contents into the app/code/Bread/BreadCheckout folder within the Magento app. In addition, you can install the extension via composer.

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. Find your sandbox API and secret keys from your Bread sandbox merchant portal, under Account Settings
4. Enter your API Key into the Sandbox API Public Key field
5. Enter your Secret Key into the Sandbox API Secret Key field
6. 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
7. 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.
8. In the upper right corner, hit Save Config to save your settings
9. 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, but there are additional settings which allow you to fine-tune the extension’s functionality.

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 can be styled using custom CSS, however, the CSS must be supplied through the Bread Plugin settings under the Bread Button Design field in the Bread Extension settings. The CSS must be compressed into a single-line string (using a service such as CSS Minifier) before being added to the Bread Button Design field.

The Bread button can also be styled through a visual builder in the Merchant Portal.

Note: Please review the Style The Bread Button for an explanation of the Bread button HTML structure and different button states. All CSS values contained in quotes should use double quotes.

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>