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.
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.
Add Apple Pay and Google Pay payment icons to website footer
This tweak will add Apple and/or Google Pay icons to your webshop footer.
Step 1: Open the footer template
Navigate to the footer template for your active theme.
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 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”.
Step 1: Open the invoice/confirmation template
Navigate to the invoice template for your active theme.
Step 2: Add the below code into the template
[%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.