Documentation Home

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

Add the Masterpass button to your checkout flow

<div id="masterpass_payment_method" th:fragment="form">

    <th:block th:if="${@environment.getProperty('wallet.masterpass.sandbox')}">
        <!-- Sandbox -->
        <script type="text/javascript" src="https://sandbox.masterpass.com/integration/merchant.js"></script>
    </th:block>
    <th:block th:unless="${@environment.getProperty('wallet.masterpass.sandbox')}">
        <!-- Production -->
        <script type="text/javascript" src="https://masterpass.com/integration/merchant.js"></script>
    </th:block>

    <div class="row">
        <div class="col-sm-3 text-center-mobile">
            <a href="#" class="js-masterpass_payment_method"
                    th:attr="data-card-id=${cart.id},
                             data-card-amount=${cart.getTotalAfterAppliedPayments()?.amount},
                             data-card-currency=${cart.currency?.currencyCode},
                             data-checkoutId=${@environment.getProperty('wallet.masterpass.checkoutIdentifier')},
                             data-allowed-cards=${@environment.getProperty('wallet.masterpass.acceptedCards')},
                             data-wallet-shippingLocationProfile=${@environment.getProperty('wallet.masterpass.shippingLocationProfile')},
                             data-wallet-shippingSuppression=${@environment.getProperty('wallet.masterpass.shippingSuppression')}">
                <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>
            <a class="masterpassLearnMore" target="_blank" href="http://www.mastercard.com/mc_us/wallet/learnmore/en/">Learn More</a>
        </div>
    </div>
</div>

Add code to invoke the JS button:

$body.on('click', '.js-masterpass_payment_method', function (e) {
    e.preventDefault();
    var link = this;
    masterpass.checkout({
        "checkoutId": $(link).attr('data-checkoutId'),                                            // Merchant checkout identifier received when merchant onboarded for masterpass
        "allowedCardTypes": [$(link).attr('data-allowed-cards')],                                 // Card types accepted by merchant
        "amount": $(link).attr('data-card-amount'),                                               // Shopping cart subtotal
        "currency": $(link).attr('data-card-currency'),                                           // Currency code for cart
        "shippingLocationProfile": $(link).attr('data-wallet-shippingLocationProfile'),           // Shipping locations supported by merchant - configured in merchant portal
        "suppressShippingAddress": 'true' === $(link).attr('data-wallet-shippingSuppression'),    // Set true when cart items has digital goods only
        "cartId": $(link).attr('data-card-id')                                                    // Unique identifier for cart generated by merchant
    });
});