Update footer and invoice page to better support Web Payments

Neto now supports Web Payments (e.g., 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.

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

Example

Apple Pay and Google Pay icons alongside other payment method icons in a webstore footer.

Coding Instructions

Navigate to the footer template for your active theme.

/httpdocs/assets/themes/[THEME-NAME]/templates/footers/template.html.

Step 2: Add the below code to your 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%]

Note: The above code uses Bootstrap 4 classes. If your theme uses an older version of Bootstrap, you may need to update the classes to match your version of Bootstrap.

Add Apple Pay and Google Pay 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”.

Example

Apple Pay displaying as the selected payment method on the invoice page of a Neto website.

Coding Instructions

Step 1: Open the invoice/confirmation template

Navigate to the invoice template for your active theme.

/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%]

Note: The above code uses Bootstrap 4 classes. If you are not using Bootstrap 4 you will need to edit the relevant classes.


Was this article useful?

Be notified when this page is updated. Optional.