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

Paypal’s Pay Now Button For Saasu

by Stano Dzavoronok on March 31, 2016
Published in Web Development Add Comment

Click. Pay. Done. An easy way for your clients to pay for their invoices via Paypal using their account or credit card.

Here they come

Some time ago Saasu announced a new cooperation with Paypal to improve their customer experience.  One of the new features is receiving and accepting online payments via Paypal. There’s a simple solution for this process published under the Saasu help section. It explains how to integrate the function into your invoices in few simple steps. That’s sweet.

The current solution directs customers to the Paypal ‘send money’ screen upon clicking the link provided on their invoice. Our Xfive solution takes it a bit further and automates the whole payment process a little bit more while adding more comfortability to the payment experience. We wanted to take this integration to a higher level. To avoid potential faults at the payment screen, adding extra data strings to the payment link sounded as a good idea. That’s sweeter.

This is how we do it

The idea behind a better payment experience came during the time when we used Paypal as our main payment gateway. We wanted our customers to pay for their projects directly from an invoice or accompanied email which was sent along with the invoice. Standard ‘Buy Now’ button weren’t an option because of certain limitation in PDF invoice and emails, so we picked the email option from Paypal’s Buy now generator code. This served as a good base to build up the whole solution.

This little fella does it for you:

<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&business=payments%40yourdomain%2ecom%2eau&item_name=Web+development&item_number=INV+10001&currency_code=AUD&lc=Australia&amount=100">Pay Now via PayPal</a>

Looks like latin or greek right? It kind of is. Let's untie this knot and see what's behind these strange looking text strings. These are important for proper payment transaction on PayPal's side. In fact you don't even need to know what they mean, they will be automatically populated with information from your Saasu sales item section.

String Explanation
cmd=_xclick This string defines type of payment, email link.
business=sales%40yourdomain.com PayPal business account is defined by your email address, that's place where money will from your clients go.
item_name=Web+development That's your project, invoice summary from sales item.
item_number=INV+10001 Your invoice identifier from Saasu.
currency_code=AUD Currency code defines in which currency you will receive payments, coming from Saasu.
lc=Australia That's your business location.
amount=100 Amount of money you will receive to your account

Now that we’ve shed some light in the corners, let's light up the disco ball! Below is a hypertext link to a PayPal Pay Now button which we'll use for this implementation.

Pay Now

https://www.paypalobjects.com/en_US/i/btn/btn_paynow_LG.gif

Note: If you don't want to use the default graphic button, the text "Pay Now via PayPal" can be used instead.

Going further, we'll use Saasu's merge field tags to populate information into our paypal button link.

We are using the very same link from above, however there are some visible changes, instead of values we have some text strings in brackets. These are essential for adding the values to variables in the string to ensure that the information you insert into the sales invoice is displayed on PayPal's payment screen. You can find more specifications about Saasu merge field tags on their dedicated webpage.

Option a) with graphic Pay Now button from PayPal

<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&business=payments%40yourdomain%2ecom%2eau&lc=AU&item_name=Inv{InvoiceNumber}%20for%20{Summary}&amount={BalanceDue}&currency_code={Ccy.Code}"><img src="https://www.paypalobjects.com/en_US/i/btn/btn_paynow_LG.gif" border="0" alt="PayPal Button"></a>

Option b) with text link - Pay Now via PayPal

<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&business=payments%40yourdomain%2ecom%2eau&lc=AU&item_name=Inv{InvoiceNumber}%20for%20{Summary}&amount={BalanceDue}&currency_code={Ccy.Code}">Pay Now via PayPal</a>

Option c)

Eventually, you can use your own graphic button which would match better your invoice branding. It will require more steps to add it. You'll need to upload your custom button to Saasu. Let's name it paypal-button.jpg.

<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&business=payments%40yourdomain%2ecom%2eau&lc=AU&item_name=Inv{InvoiceNumber}%20for%20{Summary}&amount={BalanceDue}&currency_code={Ccy.Code}"><img src="{Image.Url}paypal-button.jpg"></a>

Example of custom image, right click and Save as ...

Melting po(in)t

It's time to put everything together. Speaking of time, the whole Pay Now button integration will take no more than 5 minutes of your precious time. All you need to have is an active PayPal business account and that's literally it. The most important information you need for this integration is your email address which is associated with your PayPal account. This serves as your account identificator. That's it!

All of the heavy-lifting is done by Saasu. Actually it’s not that heavy at all. Let's start with the easy stuff first.

Copy one of the Pay Now button options from above into your clipboard. Our suggestion is to use Option a) and b) for quicker integration.

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

    Figure 1

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

    Figure 2

    Figure 2

  3. Select the template that you want to integrate the Pay Now button into. In this example, we’re using Standard inc tax.
  4. Click on the link as shown in the Figure 2 above to see a template screen where you can add the snippet of PayPal Pay Now button code. It will look similar to Figure 3 below:

    Template screen

    Figure 3

Numbers, numbers on the picture what story do you tell?

One image tells 1000 words. There's a bit less below:

  1. This selection tells the system how the content of the text fields on this 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 your email address you are using as your PayPal account identifier. A place where you'll need to change the email address is indicated with red text.
    <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&business=payments%40yourdomain%2ecom%2eau&lc=AU&item_name=Inv{InvoiceNumber}%20for%20{Summary}&amount={BalanceDue}&currency_code={Ccy.Code}"><img src="https://www.paypalobjects.com/en_US/i/btn/btn_paynow_LG.gif" border="0" alt="PayPal Button"></a>

    Example: payments%40yourdomain%2ecom%2eau converts into [email protected] Note: if your domain doesn't include .au, remove last %2eau (marked in bold) from your string to make sure that your customers will pay you on correct account.
  3. Press the Save button. Your template is now stored in the system and ready to use.

To test your magic, click the Preview button on the screen. You can view something like in the next Figure 4

Figure 4

To test if it works, click the Pay Now Button and you'll be redirected to PayPal's payment screen. This is what your customers will see when they click the Pay Now button. It should look like Figure 5:

Figure 5

Email adds comfort too

To make it even more comfortable for your customers, there's an option to include PayPal payment link directly into the email sent to your customers. Nice! Now they can pay you directly from their email client by clicking a link. There's only one option and that's only a textual link.

Here are couple of steps of how to achieve it:

  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 6 below:

    Edit email template

    Figure 6

  2. Fill out these fields with you desired information - Sender name, From, CC, BCC, Subject and  Body. An example text from Figure 6 is shown below. The hypertext taken from the Content tab section is marked in bold. Please note: the link will need to have the updated address in the same way as it was explained in the Content section.

Dear {BillingContact.FirstName},

Thank you for using Company name.

Please find your invoice in the amount of {BalanceDue} {Ccy.Code} attached. The easiest, fastest and most secure way to pay the invoice is online payment via PayPal, using either a credit card or PayPal account. You’ll find a link to pay via PayPal below:

https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&business=payments%40yourdomain%2ecom%2eau&lc=AU&item_name=Inv{InvoiceNumber}%20for%20{Summary}&amount={BalanceDue}&currency_code={Ccy.Code}

If you choose one of the other options to pay such as a wire transfer, please include your invoice number #{InvoiceNumber} with your payment.

Thank you very much!

Company name Pty Ltd

Conclusion

If you use Saasu's Email PDF function to send out your invoices with email setup as mentioned in previous section, and the email is successfully delivered to your client's email box, it might look like Figure 7 below (the text marked in red is the clickable hypertext link to the PayPal payment screen)

Figure 7

Figure 7

Once the link is clicked, customers are directed to a payment screen as it's shown in Figure 5 above. It doesn't look nice, but this is one of the limitations of Saasu email PDF functionality. It doesn't support html tags at the moment.

A hidden treasure

Well, it's not a treasure, but definitely a nice feature. PayPal is mostly used by users who have created an account in PayPal's system already, however it also offers simply paying with your credit card. Actually, when you are paying by credit card you are creating your PayPal account. This feature is not always used by many PayPal users, but it is certainly there if they need it.

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