Pay Saasu Invoices via Pin Payments

The challenge

We were looking for a solution for online credit card payments, which would allow our clients to pay their invoices directly from an email sent by our accounting system (Saasu) and / or PDF invoices received. Our goal was to find a simple, fast and effective solution. After several weeks of research and evaluation, we decided on an Australian company Pin Payments.

As an Australian company with bank accounts in Australia, were looking for a local company and Pin Payments fit the bill. They provide online credit card payments, processing and money transfers into nominated accounts.

Our main requirement for the implementation of payments was an online data transfer method using a hyperlink. All necessary information – ID of our PinPayments account, ID of the invoice, the amount to pay and description of the payment had to be part of the hyperlink in order to populate the data on the Pin Payments payment screen.

The solution

Integration of the Pay Now button into the Saasu template takes no more than 10 minutes of your time following these steps.

Acquiring the code for Pay Now button

1. Log into your account with Pin Payments and navigate to the Payment Button section.
2. Copy the HTML code <a> (hyperlink) marked in red as shown in Figure 1 below.

Integration of Pay Now button to the template

1. Log into your account in Saasu and navigate to Templates section. See the Figure 2 below:

You will receive a list of templates used within Saasu accounting system as shown in next Figure 3

Select the template that you want to integrate the Pay Now button. In this example is shown Standard inc tax.

Click on the link as shown in the Figure 3 above to see a template screen where you can add the snippet of Pin Payments code. It will look similar to Figure 4 below:

What’s behind the numbers in the figure?

(1) This selection tells the system how the content of the text fields on these screen will be displayed on  your PDF invoice. You will need to mark the HTML option to display the Pay Now button with the hyperlink correctly on your invoice.

(2) Paste your Pay Now button HTML code into this field.

The inserted link needs to be updated with following text string (select it and copy into clipboard)

amount={BalanceDue}&currency=USD&amount_editable=false&email={BillingContact.Email}&description=Inv{InvoiceNumber}%20for%20{Summary}

Place your mouse / pointer right after the “?” in your HTML code and select the code up to the right quotation mark.

Paste the string from step a) into the selected area. Your new code should now look like the following:

<a class="pin-payment-button" href="https://pay.pin.net.au/xxxx?amount={BalanceDue}&amp;currency=USD&amp;amount_editable=false&amp;email={BillingContact.Email}&amp;description=Inv{InvoiceNumber}%20for%20{Summary}">
  <img src="https://pin.net.au/pay-button.png" alt="Pay Now" width="86" height="38">
</a>

Please remember that your PinPayments identifier will be different to what we use in our example e.g. xxxx.

(3) Press the Save button. Your template is now stored in the system and ready to use.

Create a payment link in Saasu’s Email PDF (optional)

Optionally you can use the hypertext link in emails which are sent with Saasu’s Email PDF functionality. To make this work, follow these steps below:

1. Click the Email tab in the Template screen, it is located next to the Content tab at the top of the screen, see the Figure 4a below:

Fill out these fields with you desired information – Sender name, From, CC, BCC, Subject and Body. An example text from Figure 4a is shown below. The hypertext taken from the Content tab section is marked in bold.

Dear {BillingContact.FirstName},

Thank you for using Company name.

Please find your invoice in the amount of {BalanceDue} {Ccy.Code} attached.

The easiest and fastest way to pay your invoice is via credit card. You’ll find a link to pay directly from your credit card below:

https://pay.pin.net.au/xxxx?amount={BalanceDue}&currency=USD&amount_editable=false&email={BillingContact.Email}&description=Inv{InvoiceNumber}%20for%20{Summary}

If you choose another option to pay, such as a wire transfer or via Paypal, please include your invoice number #{InvoiceNumber} with your payment.

We will start work immediately after receipt of your payment.

Thank you very much!

Company name Pty Ltd
www.companyname.com

Result

After the PDF is sent from Saasu and delivered to your client’s email box, it might look like Figure 4b below:

You can preview the invoice and check if all of your data is displayed correctly by pressing the Preview button before you send out any invoice to your customers. Figure 5 below shows how an invoice with a Pay Now button may appear on your screen.

The Pay Now button is now integrated with your invoice template. By clicking the button you are redirected to the PinPayments’ payment portal, which looks like Figure 6 below.
Information such as Amount to Pay and Description displayed, are taken from your Saasu account system.

Bonus

Not using Saasu and still want to use Pay Now button for your invoice payments, donation or single product purchases? No problem! This payment button is also a standalone solution. A simple donation button and single product purchase button example is shown below.

Donation button example

HTML code and CSS class for basic visual styling

.pin-payment-button {
  display: inline-block;
  padding: 10px 15px;
  background: #060;
  border-radius: 3px;
  font-size: 100%;
  font-weight: bold;
  color: white;
}

<a class="pin-payment-button" href="https://pay.pin.net.au/xxxx?amount=100&amp;currency=USD&amp;amount_editable=false&amp;description=Donation%20from%20website%20100USD">
Donate 100 USD</a>

To change the amount and description edit the parts of the string after amount= and description=.

Single product purchase button example

HTML code and CSS class for basic visual styling:

.pin-payment-button {
  display: inline-block;
  padding: 10px 15px;
  background: #060;
  border-radius: 3px;
  font-size: 100%;
  font-weight: bold;
  color: white;
}

<a class="pin-payment-button" href="https://pay.pin.net.au/xxxx?amount=100&amp;currency=USD&amp;amount_editable=false&amp;description=Product%20name%20">Buy Now</a>

To change the amount and description edit the parts of the string after amount= and description=.