API ReferencePreview Merchant PortalMerchant Portal

Miva Integration Steps

Suggest Edits

Integration Steps:

📘

Merchants Migrating from Bread Classic

The Bread Classic Miva Module did not support up funnel Bread placements. This means the Product, Category, and Cart pages will include custom Bread Classic code. It is recommended that this is commented out during the integration until it is confirmed the new Bread module is working on each of these pages. You may then delete the code on each of those pages

Locate your 2.0 api key, api secret, and integration keys

In order to integrate with Bread you will need 2.0 Access Keys. These keys are available in your new Merchant Portal. Sandbox versions of these keys are located in the Preview portal and can be used to run test transactions. It is recommended to work with the preview keys first. Access to the Merchant Portals will be setup by the Integration Manager supporting you during the upgrade. You can learn more about logging into the Merchant Portal here

Bread 2.0 Live Credentials: https://merchants.platform.breadpayments.com
Bread 2.0 Preview Credentials: https://merchants-preview.platform.breadpayments.com

Once logged in, first click on "Account Settings". Then click on the Account Settings drop down and select "Access Keys" to view your credentials. Keep this page open as you will need to reference these keys shortly

Download the Bread Pay Module

  1. Navigate to this link and download the zip file containing the mvc file for the Bread Module
  2. Unzip and save the file locally. It will be needed in the steps below

Upload the Bread Pay Module

  1. From the Miva home page open Settings > Domain Settings
  1. Select Modules > Add Module
  1. Select Upload and Choose File. Select the file downloaded from the first section of this guide, make sure to unzip the file before uploading

Install the Bread Pay Module

  1. From the home page, navigate to Settings > Modules
  2. Search for the Bread Pay Module and select Install

Configure Settings for Bread Pay Module

  1. Navigate to Settings > Payment Settings
  2. Select the Bread Pay Section
  1. Follow the instructions below for configuring the Authentication section
Integration PhaseInstructions
Testing(Preview)1. In the Host field, select Sandbox
2. Add your API keys from the Preview Merchant Portal to the Sandbox API Key, Sandbox API Secret, and Sandbox Integration Key fields
Live(Production)1. In the Host field, select Production
2. Add your API keys from the Production Merchant Portal to the API Key, API Secret, and Integration Key fields
  1. Configure the Generic Settings based on your preferences for the app

Add Bread Buttons to Product, Category, and Cart Pages

  1. From the home page, select User Interface in the navigation pane
  2. Search for the Product Display page
  1. Scroll down to the Product Display Layout section

  1. Copy the div element below and paste into the template in the location where the Bread button should render

    <div id="bread-button"></div>

  2. At the top of the page, open the Items tab

  3. Search breadpay and enable the toggle for Assigned

  4. Repeat steps 2-6 above for the Category Display and Basket Contents pages

    1. For step 4, use the tab below that corresponds to the page you have selected
    2. <div class="bread-ala" style="z-index:9999;position:relative"
id="bread-&mvt:product:id" data-price="&mvt:product:price" data-sku="&mvt:product:sku">
  </div>

      <tr>
    <td>
        <br>
        <div id="bread-button"></div>
    </td>
</tr>

Upload Bread Pay Scripts

  1. From the home page, select User Interface in the navigation pane
  2. Select the CSS/JavaScript Resources section and the JavaScript Resources tab
  1. Select Add JavaScript Resource, add the Code name bread-sdk
    1. Select External File for the TYPE
    2. Paste https://checkout.sp-pv-ads.ue2.breadgateway.net/sdk.js in FILE PATH
    3. Add the Tag Attributes
      1. NAME: type
      2. VALUE: text/javascript
    4. Disable GLOBAL and enable ACTIVE
  2. Select Add JavaScript Resource, add the Code name bread
    1. Select Inline Script for the TYPE
    2. Select the ellipsis at the top of the table and select Edit Source

  1. In the code below, replace YOUR INTEGRATION KEY HERE on line 3 with the integration key from your Merchant Portal. Copy the code and paste into the Source:

    1. <mvt:item name="breadpay" param="bread_data" />
(function(){
    let breadSetup = {integrationKey: "YOUR INTEGRATION KEY HERE"};
    let minBreadPrice = &mvte:bread_min_cart;;
    let maxBreadPrice = &mvte:bread_max_cart;;

    let breadQuantitySelector = undefined

    let breadPrice = 0;

    function renderPDPButton(data) {
        let breadCurrency = "USD"; // TODO add support for CAD
        let breadPlacements = [];
        for (const placement of data) {
            let breadPlacement = {};
            breadPlacement.allowCheckout =  false;
            breadPlacement.domID = placement.id;
            breadPlacement.order = {};
            breadPlacement.order.items = []; // TODO fill in items array
            let breadTotalPrice = placement.price;
            if (breadQuantitySelector) {
                breadTotalPrice *= Number(breadQuantitySelector.value);
            }

            breadPlacement.order.subTotal = {value: breadTotalPrice, currency: breadCurrency};
            breadPlacement.order.totalPrice = {value: breadTotalPrice, currency: breadCurrency};
            breadPlacement.order.currency = breadCurrency;
            breadPlacement.order.totalShipping = { value: 0, currency: breadCurrency };
            breadPlacement.order.totalTax =  { value: 0, currency: breadCurrency };
            breadPlacement.order.totalDiscounts =  { value: 0, currency: breadCurrency };
            breadPlacements.push(breadPlacement);
        }
        window.BreadPayments.setup(breadSetup);
        window.BreadPayments.on('INSTALLMENT:APPLICATION_DECISIONED', () => {});
        window.BreadPayments.on('INSTALLMENT:APPLICATION_CHECKOUT', () => {});
        window.BreadPayments.on('INSTALLMENT:INITIALIZED', () => {});
        window.BreadPayments.registerPlacements(breadPlacements);
        window.BreadPayments.__internal__.init();
    }

    function minMaxCheck(curPrice, minPrice, maxPrice) {
        minPrice = Math.round(minPrice * 100);
        maxPrice = Math.round(maxPrice * 100);
        if (minPrice === 0 && maxPrice === 0) {
            return true;
        } else if (maxPrice === 0 && curPrice >= minPrice) {
            return true;
        } else if (minPrice <= curPrice && curPrice <= maxPrice) {
            return true;
        }
        return false;
    }

    function skuCheck(sku) {
        const bread_sku_filter_mode = "&mvte:bread_sku_filter_mode;";
        const bread_sku_filter = "&mvte:bread_sku_filter;";
        var bread_sku_filter_list = bread_sku_filter.split(",").map(function(item) {
            return item.trim();
        });
        if (bread_sku_filter_mode == "none") {
            return true;
        } else if (bread_sku_filter_mode == "include") {
            return bread_sku_filter_list.includes(sku);
        } else if (bread_sku_filter_mode == "exclude") {
            return !bread_sku_filter_list.includes(sku);
        }
        return false;
    }

    <mvt:if expr="l.settings:page:code EQ 'PROD'">
        breadPrice = Math.round(&mvt:product:price * 100);
        if (!minMaxCheck(breadPrice, minBreadPrice, maxBreadPrice)) {
            return;
        }
        if (!skuCheck("&mvt:product:sku;")) {
            return;
        }

        let breadQuantityElements = document.getElementsByName("Quantity")
        if (breadQuantityElements.length > 0) {
            breadQuantitySelector = breadQuantityElements[0];
        }

        let breadQuantity = 1;
        if (breadQuantitySelector) {
            breadQuantity = Number(breadQuantitySelector.value);
        }

        let quantityIntervalId = setInterval(function() {
            let prevQuantity = breadQuantity;
            if (breadQuantitySelector) {
                breadQuantity = Number(breadQuantitySelector.value);
            }
            if (prevQuantity != breadQuantity) {
                renderPDPButton([{id: "bread-button", price: breadPrice}])
            }
        }, 500);
        renderPDPButton([{id: "bread-button", price: breadPrice}]);

        MivaEvents.SubscribeToEvent('price_changed', function (product_data) {
            breadPrice = Math.round(product_data.price * 100);
            renderPDPButton([{id: "bread-button", price: breadPrice}]);
        });
    <mvt:elseif expr="l.settings:page:code EQ 'CTGY'">
        let breadAsLowAsContainers = document.getElementsByClassName("bread-ala");
        let breadData = [];
        for (const container of breadAsLowAsContainers) {
            breadPrice = Math.round(container.dataset.price * 100);
            const breadSku = container.dataset.sku;
            if (!minMaxCheck(breadPrice, minBreadPrice, maxBreadPrice)) {
                continue;
            }
            if (!skuCheck(breadSku)) {
                continue;
            }
            breadData.push({price: breadPrice, id: container.id});
        }
        renderPDPButton(breadData);
    <mvt:elseif expr="l.settings:page:code EQ 'BASK'">
        breadPrice = &mvt:basket:total * 100;
        if (!minMaxCheck(breadPrice, minBreadPrice, maxBreadPrice)) {
            return;
        }
        let breadSku = "";
        <mvt:foreach iterator="group" array="basket:groups">
            breadSku = "&mvt:group:product:sku;";
            if (!skuCheck(breadSku)) {
                return;
            }
        </mvt:foreach>
        renderPDPButton([{id: "bread-button", price: breadPrice}]);
    </mvt:if>
})();

  2. Add the Tag Attributes

    1. NAME: type
    2. VALUE: text/javascript

  3. Disable GLOBAL and enable ACTIVE

  4. For each script added above, select the line, click the ellipsis at the top of the page, and select Pages

    1. Search for the pages below and enable the Assigned toggle
    2. Pages:
      1. BASK
      2. CTGY
      3. PROD

Add Bread Pay Scripts to Resources

  1. From the home page, select User Interface in the navigation pane
  2. Select the CSS/JavaScript Resources section and the Resource Groups tab
  3. Select the footer_js resource group line, select the ellipsis, and select JavaScript Resources
  4. Find the two Bread scripts added in the previous step and enable the Assigned toggle

Integration Complete!

You may now proceed to Testing or Go-live depending on the status of your integration project

Updated about 8 hours ago