Arrow Down Arrow Right Arrow Down Arrow Right Arrow Arrow Down Arrow Left Arrow Right Articles Case Study Close Facebook GitHub Google+ Menu Information Link LinkedIn x five Interview Location Code Snippet Twitter Tick Timer Users Card Discount Magnifier Time Quote Task

This website uses cookies to ensure you get the best experience on our website. Privacy Policy

Ok

Pay Saasu Invoices via Pin Payments

by Stano Dzavoronok on February 29, 2016
Published in Web Development Add Comment

Have your customer pay their invoices, send donations and buy products online by credit card with a Pay Now button

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.

The HTML code contains an identifier of your Pin Payments account that ensures the payment is sent correctly. The rendered HTML code also includes the graphic for the Pay Now button.

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:

    Figure 2: Navigate to the Templates section in Saasu

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

    Figure 3: Template list

    Figure 3: Template list

  3. Select the template that you want to integrate the Pay Now button. In this example is shown Standard inc tax.
  4. 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:
Figure 4: Edit template screen, see the next section for the legend

Figure 4: Edit template screen, see the next section for the legend

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.

  1. The inserted link needs to be updated with following text string (select it and copy into clipboard)
    amount={BalanceDue}&amp;currency=USD&amp;amount_editable=false&amp;email={BillingContact.Email}&amp;description=Inv{InvoiceNumber}%20for%20{Summary}
  2. Place your mouse / pointer right after the "?" in your HTML code and select the code up to the right quotation mark.
  3. 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:

    Figure 4a: Email template

    Figure 4a: Email template

  2. 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}&amp;currency=USD&amp;amount_editable=false&amp;email={BillingContact.Email}&amp;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:

The text marked in red is the clickable hypertext link to the PinPayments payment screen.

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.

Figure 5: PDF preview of the invoice with Pay Now button implemented

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.

Figure 6: PinPayments' payment portal

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=.

About the author

Stano Dzavoronok

Stan Dzavoronok has been behind XHTMLized (now Xfive) from its inception, from the initial idea to real life implementation. He actually coined that tongue breaking name which is now a well known brand among the PSD to HTML services. As part of X-Team, he's been engaged in partnerships with FOX and Twitter, and currently works as an Engager at Xfive.

More articles from Stano

Comments

Would you like to add something?

All fields are required. Your email address will not be published.

More from the blog

Work with us