MasterPass Checkout Quick Start

Broadleaf Commerce offers an out-of-the-box MasterPass solution that requires little configuration and is easily set up.

You must have completed the MasterPass Environment Setup before continuing

Adding MasterPass Checkout Support

Add the following to your patchConfigLocation in your web.xml of your site module

    classpath:/bl-masterpass-applicationContext.xml

Add the following to your contextConfigLocation in your web.xml of your site module

    classpath:/bl-masterpass-applicationContext-servlet.xml

Add the MasterPass button to your site:

If you are using the Heat Clinic Demo Site:

add the following line of code in cart.html

    <a th:href="@{/masterpass/redirect}">
      <img src="https://www.mastercard.com/mc_us/wallet/img/en/US/mcpp_wllt_btn_chk_147x034px.png" align="left" style="margin-right:7px;"/>
    </a>

Per MasterPass Branding guidelines, you must also include the "learn more" link under the MasterPass checkout button that should trigger a pop-up window with the respective MasterCard-hosted page.

    <a class="masterpassLearnMore" target="_blank" href="http://www.mastercard.com/mc_us/wallet/learnmore/en/">Learn More</a>

Per MasterPass Branding guidelines, you must include the logo as a type of payment on both the checkout and confirmation pages:

add the following line of code in paymentMethodForm.html

    <ul th:if="${orderContainsUnconfirmedCreditCard}" class="payment_methods">

        <li th:if="${#masterpass.isMasterPassPayment(unconfirmedCC)}">
            <img src="https://www.mastercard.com/mc_us/wallet/img/en/US/mp_mc_acc_034px_gif.gif"/>
        </li>

        ...
    </ul>

add the following line of code in confirmation.html

    <div th:if="${payment.active}" class="left_content">
        <h3><span th:text="#{confirmation.payment.method}">Payment Method</span></h3>
        <ul class="payment_methods">
            <li th:if="${#masterpass.isMasterPassPayment(payment)}">
                <img src="https://www.mastercard.com/mc_us/wallet/img/en/US/mp_mc_acc_034px_gif.gif"/>
            </li>
        </ul>
        ...
    </div>