Update footer and invoice page to better support Web Payments

Maropost Commerce Cloud now supports Web Payments (eg. Apple Pay and Google Pay) for Stripe users. To ensure an optimal shopping experience, you may want to update your website footer to include Apple Pay and Google Pay payment icons. Some older sites may also require an update to the invoice page.

Preparation Checklist

Before you start this tweak, it's a good idea to run through our preparation checklist below:

• Read through the Getting Started to get a better sense of how the Control Panel, Database and Front End store interact.
• Learn our recommended Simple Workflow. This makes the implementation process as easy as possible.
• Create a new Staging Theme for this tweak. This allows you to preview any changes before they are visible to live customers.
• The code snippet in this tweak doc uses Bootstrap 4, you may need to alter this code depending on what version of Bootstrap your theme is using. You can find out what version your theme is using here.

Add payment icons to the footer

This tweak will add Apple and/or Google Pay icons to your webshop footer.

Coding Instructions

Step 1: Open the footer template

The footer template can be found here /httpdocs/assets/themes/[THEME-NAME]/templates/footer/template.html.

Step 2: Add the code into the template

Replace the payment methods function [%payment_methods%] that includes the payment icons with the following new [%checkout_pay_icons%] function.

[%checkout_pay_icons show_icon:'1' ignore_balance:'1'%]
    [%param header%]
        <ul class="list-inline d-flex flex-wrap" role="contentinfo" aria-label="Accepted payment methods">
    [%/param%]
    [%param *body%]
        <li class="mr-1">
            <div class="payment-icon-container">
                <div class="payment-icon" style="background-image: url([@processor_icon_url@]); height: 30px;"><span class="sr-only">[@name@]</span></div>
            </div>
        </li>
    [%/param%]
    [%param *footer%]
        </ul>
    [%/param%]
[%/checkout_pay_icons%]

Add payment information to your checkout confirmation/invoice page

After a shopper has completed checkout, they will be presented with an invoice page outlining their purchase. This tweak will ensure the payment confirmation section of the page displays Apple/Google Pay rather than “no payment method selected”.

Coding Instructions

Step 1: Open the invoice/confirmation template

The invoice/confirmation template can be found here /httpdocs/assets/themes/[THEME-NAME]/templates/cart/invoice.template.html.

Step 2: Add the below code into the template

Replace the [%payment_methods%] function in the Payment Instructions section of the order confirmation page with the following function.

Note: Be sure to test this change before you put it live. Mistakes in your invoice template could have a negative impact on the checkout experience.

[%payment_methods id:'[@payment_method@]' show_webpayments:'1'%]
    [%param *body%]
        <p class="mb-1">
            [%if [@charge_type@] eq 'web' OR [@charge_type@] eq 'cc'%]<i class="fa fa-credit-card"></i> [%/if%]
            [%if [@charge_type@] eq 'acc'%][@config:company_name@] [%/if%]
            [%escape%][@name@][%/escape%]
        </p>
    [%/param%]
    [%param *ifempty%]
        <p class="mb-1">No Payment method has been selected</p>
    [%/param%]
[%/payment_methods%]