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:
- Make sure you download the most recent version
- Unzip contents into
app/code/Bread/BreadCheckout
folder - For Canadian merchants only
- Copy file
app/code/Bread/BreadCheckout/etc/adminhtml/system.ca.xml
toapp/code/Bread/BreadCheckout/etc/adminhtml/system.xml
- Copy file
app/code/Bread/BreadCheckout/view/adminhtml/web/js/validation.ca.js
toapp/code/Bread/BreadCheckout/view/adminhtml/web/js/validation.js
- Copy file
- 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:
- Click on Stores on the left hand menu, select Configuration under Settings
- Under Configuration, click on the Sales menu and select Payment Methods
- Under Payment Methods, open Other Payment Methods and Bread Checkout
Basic Settings:
- Set Enabled to Yes
- API Mode should be set to Sandbox during integration testing, but should be switched over to Live once your integration is ready for production
- Set the Bread module version to Bread 2.0
- Find your sandbox API and secret keys in your Merchant Portal
- Enter your Integration Key into the
Integration Key
field - Enter your API Key into the
Sandbox API Public Key
field - 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. - 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
- 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.
- In the upper right corner, hit Save Config to save your settings
- 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.
Site Customizations & Third Party Apps
The Bread Pay plugin was designed to work with native Magento 2 features and functionality. The plugin does not support all third party applications available on the Magento 2 marketplace. Installing these applications or performing customizations to your product, cart, category, and checkout pages can result in issues loading Bread elements.
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
bread-btn-cntnr
and bread-checkout-btn
.
<div id="bread-btn-cntnr">
<div id="bread-checkout-btn" title="Bread Checkout" class="button"></div>
</div>
Configurable Products
Additionally, for configurable products and products with custom options, the Bread block contains an overlay and tooltip to prevent customers from clicking on Bread if the product is not in a valid configuration state. You can style the overlay and tooltip in your site’s CSS. The overlay has the class name
button-prevent
and the tooltip has the class namesbuy_error_tip
andoverride_tip
.
STEP 3: Test the Bread Extension
We strongly recommend you test your Bread integration with your sandbox keys before pushing Bread live on your production site. You can leverage the following dummy data when testing Bread in sandbox 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
- Mobile Code / Token: 1234
In order to simulate an application denial, please use [email protected] as your email address in the application process.
Sandbox Testing
You will not receive emails nor text messages when testing in sandbox mode.
STEP 4: Going Live With Bread
Once you have completed testing the Bread integration, you can follow the next steps to turn Bread on for your customers:
- Access Live Merchant Portal: Ask your main Success point of contact for access to your live Merchant Portal
- Set Bread to Live: From within the Bread extension settings in your Magento admin portal, change API MODE to LIVE.
- Enter Production Keys: Log into your live merchant portal and find your Integration Key, and API and Secret Keys under Account Settings. Enter your API Key into API Public Key, your Secret Key into API Secret Key, and Integration Key into Integration Key.
- Hit Save Config.
You’re now live with Bread!
Updated about 2 months ago