Adding SnapScan to an invoice

I am looking to integrate snapscan onto my invoices.

They provide this to add in the html:

<a href="https://pos.snapscan.io/qr/shopalot?id=Ord123&amount=1000">
  <img src="https://pos.snapscan.io/qr/shopalot.svg?id=Ord123&amount=1000&snap_code_size=125">
</a>

Which renders to this on the invoice:

Which a customer can then use to pay with. The problem is…
I don’t know how to specify the amount without the decimal points and so on.

When I use {{ total }} when editing the invoice template, I get the value 1000.00 which, when sent to snapscan in the amount=1000.00 part, produces a code for R 10.00 because snapscan assumes there are no decimals.

My question is, are there any liquid filters that format the amount without any decimals and so on?

Since amount is always only 2 decimal values after the . this should be okay.

Have you tried round filter?

Instead of:

{{ total }}

try

{{ total | round }}

I tried that now, but then I got https://pos.snapscan.io/qr/procsum?id=Ord133&amount=Liquid%20syntax%20error:%20Error%20-%20Filter%20'round'%20does%20not%20have%20a%20default%20value%20for%20'decimals'%20and%20no%20value%20was%20supplied

This is what that becomes:

Liquid syntax error: Error - Filter ;round; does not have a default value for ;decimals; and no value was supplied

I tried rounding as well, but that didn’t work.

Any ideas?

Actually I just noticed the filter was expecting how many decimals to round to, so:

{{ total | round:0 }}

should work.

But in the latest version I’m making it so {{ total | round }} should work too.

Also, if you just want to remove decimals (rather than round them), then you can use {{ total | floor }}

@Lubos, I think what @proscum is asking is how to multiply the total by 100. According to its website, Snapscan apparently expects the amount to be expressed as a string of digits, including rand and cents or pounds and pence or whatever (e.g., R123.45 or $123.45 or €123.45 are to be expressed as 12345).

What you need to use is this, assuming you’re on a currency that has two places after the decimal:

{{ total | times:100 | round:0 }}

1 Like

Hey @Jon, thanks, that is what I was actually looking for. I do not think I was very clear about that:-)

It works!

Okay, I now encounter a new issue. When emailing the invoice, there is no snapcode.

But when I print the invoice, the code is there.

Any idea what happens in the emailing process that would stop the code from rendering?

From what I understand:

When you print locally, Manager runs the page content, including any mark-up, through your local web-browser engine, which in turn passes the rendered page to your local printer or PDF driver. During that process, the embedded QR code image is fetched from the SnapScan server and included in the rendered page.

When you email via Manager, the page content is run through a server hosted at manager.io, which renders the page and converts it to a PDF attachment using a tool called wkhtmltopdf (yes, there’s really something called that!). The resulting PDF file is then mailed via either the manager.io SMTP server or the custom server you have specified in Email Settings in Manager.

I’m guessing (and I’m just guessing) that in the latter case, either the manager.io server or the wkhtmltopdf tool is configured not to fetch external images, probably as a security precaution. If it does not fetch the on-the-fly QR image from SnapScan, it doesn’t get included in the output.

I think the issue is SVG format. @procsum, is it possible to retrieve the QR code as PNG or similar?

@lubos, I tried this, and still no image on the invoice. png nor svg.

Here’s the invoice template, the snapcode is close to the bottom, but I included it all since I wasn’t sure if I’ve done something else terrible:

<table style="width: 100%">
    <thead>
        <tr>
            <td style="font-size: 36px; font-weight: bold; vertical-align: top; line-height: 36px">Invoice</td>
            <td style="text-align: right">{% if business.logo != empty %}<img src="{{ business.logo }}" style="max-width: 300px; max-height: 150px">{% endif %}</td>
        </tr>
        <tr>
            <td colspan="2" style="padding: 20px 0px">
                <table style="width: 100%">
                    <tr>
                        <td style="vertical-align: top; font-weight: bold; width: 1px; white-space: nowrap; padding-right: 10px">
                            To
                        </td>
                        <td style="vertical-align: top">
                            <div>{{ customer.name }}</div>
                            <div>{{ billing_address | newline_to_br }}</div>
                            <div>{{ customer.identifier }}</div>
                        </td>
                        <td style="vertical-align: top; width: 100px; padding-right: 20px; vertical-align: top; text-align: right">
                            <div style="font-weight: bold">Issue date</div>
                            <div>{{ issue_date | date_to_string }}</div>
                            {% if due_date != null %}
                            <div style="font-weight: bold; margin-top: 10px">Due date</div>
                            <div>{{ due_date | date_to_string }}</div>
                            {% endif %}
                            <div style="font-weight: bold; margin-top: 10px; white-space: nowrap">Invoice number</div>
                            <div>{{ reference }}</div>
                            {% if sales_quote != empty %}
                            <div style="font-weight: bold; margin-top: 10px; white-space: nowrap">Sales quote</div>
                            <div>{{ sales_quote }}</div>
                            {% endif %}
                            {% if purchase_order != empty %}
                            <div style="font-weight: bold; margin-top: 10px; white-space: nowrap">Purchase order</div>
                            <div>{{ purchase_order }}</div>
                            {% endif %}
                        </td>
                        <td style="vertical-align: top; width: 100px; border-left: 1px solid #000; padding-left: 20px; vertical-align: top">
                            <div style="font-weight: bold; white-space: nowrap">{{ business.name }}</div>
                            <div style="white-space: nowrap">{{ business.contact_information | newline_to_br }}</div>
                            <div style="white-space: nowrap">{{ business.identifier }}</div>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="2">
                <div style="font-weight: bold; padding-bottom: 20px; font-size: 14px">{{ summary }}</div>
                <table style="width: 100%">
                    <tr>
                        <th style="border: 1px solid #000; padding: 5px 10px">Item</th>
                        <th style="border: 1px solid #000; padding: 5px 10px">Description</th>
                        <th style="width: 40px; border: 1px solid #000; padding: 5px 10px; text-align: center">Qty</th>
                        <th style="width: 80px; border: 1px solid #000; padding: 5px 10px; text-align: center">Unit price</th>
                        <th style="width: 60px; border: 1px solid #000; padding: 5px 10px; text-align: center">Discount</th>
                        <th style="width: 100px; border: 1px solid #000; padding: 5px 10px; text-align: center">Amount</th>
                    </tr>
                    {% for line in lines %}
                    <tr>
                        <td style="border: 1px solid #000; padding: 5px 10px; border-bottom: none; border-top: none; vertical-align: top">{{ line.item.name }}</td>
                        <td style="border: 1px solid #000; padding: 5px 10px; border-bottom: none; border-top: none">{{ line.description | newline_to_br }}</td>
                        <td style="border: 1px solid #000; padding: 5px 10px; border-bottom: none; border-top: none; text-align: center; vertical-align: top">{{ line.qty }}</td>
                        <td style="border: 1px solid #000; padding: 5px 10px; border-bottom: none; border-top: none; text-align: right; vertical-align: top">{{ line.unit_price | money_without_currency }}</td>
                        <td style="border: 1px solid #000; padding: 5px 10px; border-bottom: none; border-top: none; text-align: center; vertical-align: top">{{ line.discount }}</td>
                        <td style="border: 1px solid #000; padding: 5px 10px; text-align: right; border-bottom: none; border-top: none; vertical-align: top; white-space: nowrap">{{ line.total | money_without_currency }}</td>
                    </tr>
                    {% endfor %}
                    <tr>
                        <td style="border: 1px solid #000; padding: 5px 10px; border-top: none">&nbsp;</td>
                        <td style="border: 1px solid #000; padding: 5px 10px; border-top: none">&nbsp;</td>
                        <td style="border: 1px solid #000; padding: 5px 10px; border-top: none">&nbsp;</td>
                        <td style="border: 1px solid #000; padding: 5px 10px; border-top: none">&nbsp;</td>
                        <td style="border: 1px solid #000; padding: 5px 10px; border-top: none">&nbsp;</td>
                        <td style="border: 1px solid #000; padding: 5px 10px; border-top: none">&nbsp;</td>
                    </tr>

                  {% if amounts_include_tax %}
                    {% if rounding != 0 %}
                    <tr>
                        <td colspan="5" style="text-align: right; padding: 5px 10px">Round off</td>
                        <td style="border: 1px solid #000; text-align: right; padding: 5px 10px; white-space: nowrap">{{ rounding | money }}</td>
                    </tr>
                    {% endif %}
                    <tr>
                        <td colspan="5"  style="text-align: right; padding: 5px 10px; font-weight: bold">Total</td>
                        <td style="border: 1px solid #000; text-align: right; padding: 5px 10px; font-weight: bold; white-space: nowrap">{{ total | money }}</td>
                    </tr>
                    {% for tax_component in tax_components %}
                    <tr>
                        <td colspan="5"  style="text-align: right; padding: 5px 10px">{{ tax_component.code }}</td>
                        <td style="border: 1px solid #000; text-align: right; padding: 5px 10px; white-space: nowrap">{{ tax_component.amount | money }}</td>
                    </tr>
                  {% endfor %}
                  {% else %}
                    {% assign tax_components_count = tax_components | size %}
                    {% if tax_components_count > 0 %}
                    <tr>
                      <td colspan="5" style="text-align: right; padding: 5px 10px; font-weight: bold">Subtotal</td>
                      <td style="border: 1px solid #000; text-align: right; padding: 5px 10px; font-weight: bold; white-space: nowrap">{{ subtotal | money }}</td>
                    </tr>
                    {% endif %}
                    {% for tax_component in tax_components %}
                    <tr>
                        <td colspan="5"  style="text-align: right; padding: 5px 10px">{{ tax_component.code }}</td>
                        <td style="border: 1px solid #000; text-align: right; padding: 5px 10px; white-space: nowrap">{{ tax_component.amount | money }}</td>
                    </tr>
                    {% endfor %}
                    {% if rounding != 0 %}
                    <tr>
                        <td colspan="5"  style="text-align: right; padding: 5px 10px">Round off</td>
                        <td style="border: 1px solid #000; text-align: right; padding: 5px 10px; white-space: nowrap">{{ rounding | money }}</td>
                    </tr>
                    {% endif %}
                    <tr>
                        <td colspan="5"  style="text-align: right; padding: 5px 10px; font-weight: bold">Total</td>
                        <td style="border: 1px solid #000; text-align: right; padding: 5px 10px; font-weight: bold; white-space: nowrap">{{ total | money }}</td>
                    </tr>
                    {% endif %}
                </table>
                <div>{{ notes }}</div> 
                
                                
                {% if balance_due < 0 %}
                <div style="text-align: center; margin-top: 40px; margin-bottom: 80px"><span style="color: red; border: 10px solid red; padding: 10px; font-size: 40px; font-weight: bold; transform:rotate(-15deg); -ms-transform:rotate(-15deg); -moz-transform:rotate(-15deg); -webkit-transform:rotate(-15deg); -o-transform:rotate(-15deg);">{{ strings.overpaid | capitalize }}</span></div>
                {% endif %}
                
                {% if balance_due > 0 %}
                <div>{{ terms_and_payment_advice }}</div>
                  {% if overdue %}
                    <div style="text-align: center; margin-top: 40px; margin-bottom: 80px"><span style="color: red; border: 5px solid red; padding: 10px; font-size: 20px; transform:rotate(-15deg); -ms-transform:rotate(-15deg); -moz-transform:rotate(-10deg); -webkit-transform:rotate(-10deg); -o-transform:rotate(-10deg);">{{ strings.overdue | capitalize }}</span></div>
                  {% endif %}
                  
                    <a href="https://pos.snapscan.io/qr/procsum?id={{ reference }}&amount={{ total | times:100 | round:0 }}">
                        <img src="https://pos.snapscan.io/qr/procsum.png?id={{ reference }}&amount={{ total | times:100 | round:0 }}&snap_code_size=200">
                    </a>

                  {{ payment_advice_cutaway }}

                {% endif %}

                {% if balance_due == 0 %}
                  <div style="text-align: center; margin-top: 40px; margin-bottom: 80px"><span style="color: darkgreen; border: 5px solid darkgreen; padding: 10px; font-size: 20px; transform:rotate(10deg); -ms-transform:rotate(10deg); -moz-transform:rotate(10deg); -webkit-transform:rotate(10deg); -o-transform:rotate(10deg);">{{ strings.paid_in_full | capitalize }}</span></div>
                {% endif %}
            </td>
        </tr>
    </tbody>
</table>

Thanks for the great reply @Jon and @lubos, this is really helpful.

When I tried PNG version, it works when emailing PDF document.

Weird. I just tried every combination I could think of, including creating a new template view and new invoice, and switching off my SMTP settings that route via Gmail. I also upgraded to the latest version.

And still, the invoice comes through, with no snap code. Yet, it is generated in the manager server page.

So I’m a little stumped now.

I found the issue. Upgrade to the latest version (16.5.83), it should start working.

Great! It works now, and svg works too:-) Thanks