Business On A Page Gateway

The problem: Receiving credit card payments

Recently, our client, who I will call Murphy for this article, asked me if he could make a payment by Credit Card. Unfortunately, doing so was difficult as we only accepted bank transfers and cash payments up until that point. However, four reasons convinced me to look at the resources I had, in order, to find a way to do it. Namely, because;

• the amount owed was relatively significant for Business On A Page Gateway,
• transferring or paying by cash was not convenient for Murphy due to circumstances beyond his control,
• I hoped to finalise the transaction before the financial year end, and
• receiving payment by Credit Card would be useful for other clients in the future

As a result, I decided to pool the resources I had and find a way to make Credit Card payments happen.

Using WordPress

Those of us who have dabbled in, or worked on, developing websites using WordPress know there are advantages and disadvantages with using the WordPress User Interface (UI). A couple of pros and cons include:

• Pros,
  • its user interface, themes and plugins are available across hosting platforms and
  • updates are managed from the single dashboard, and
• Cons,
  • attacks can be made through vulnerabilities left open in default features and
  • that updates occur relatively too frequently.

Using PayPal

Amongst the many eCommerce options available. I decide to use Advanced PayPal buttons on my website, which meant working with WordPress and PayPal Custom HTML.

Although PayPal fees for Credit Card payments were amongst the highest fees for these type of services, I continued because the positives outweighed this negative, namely:

• I was familiar with using WordPress for this website, and already had a PayPal account,
• PayPal had this feature and had tools to help automate code I could use,
• the amount received would cover the PayPal fees,
• there was a short time to research and install the solution, and
• once the solution was in place for this payment I could investigate other options later

Scope of this article

So, to share a fix for the PayPal Smart button in WordPress, I will quickly explain what was set up and what I did to get a PayPal Smart button working. In this way, you might be able to apply the same solution if you have the same issue, or apply the knowledge in a another way to fix the issue.

In case the PayPal Smart button issue is different to your issue, or the fix doesn’t help, I should let you know this article was correct at the time of writing for the version of PayPal, WordPress, hosting and browser I was using, but might not apply to your issue or require some variation to work.

Setting up a PayPal Smart button

To create and customise PayPal Smart buttons to accept payment by credit card, I clicked the

1. “Pay & get paid” option in the top menu of the PayPal Business Dashboard
2. then the “PayPal Buttons” option on the far right hand side of the sub menu and
3. then the “Smart Buttons” listed in the boxes that appeared below the menu.

The resulting page was titled “Set up your PayPal Checkout experience” indicating I could customise the PayPal Checkout and copy the code to add to my website.

Consequently, I customised the button with the options:

• Button Type: Variable price (to allow invoice details to be entered)
• Description field label: Invoice Description (i.e. the description on the invoice}
• Amount field label: Invoice Amount (i.e. the amount on the invoice)
• Currency: AUD
• Invoice ID label: Invoice Number (i.e. the invoice number)

When the preview updated and looked the way it was supposed to I then clicked the “Copy code” button to copy the code to the clipboard ready to be pasted in the WordPress interface.

Adding the code to WordPress

I then signed onto my website WordPress account and created a Payment page. Inside the page I added an introduction to let clients know what to do to enter the invoice details required. Then I added a Custom HTML block and pasted the copied code into the textbox provided. Finally, I published the page for Murphy to try out.

The results

Unfortunately, two issues arose.

1. The Invoice Number field did not show and
2. Murphy’s payments did not register in my account

Finding out what went wrong

These issues led me to investigate coding, to read the online Help pages and to call the support desk to compare the draft “Payment” screen, which worked, with the published “Payment” screen, which didn’t work and to find out what happened to the payments

In this article I will only cover how I solved the first issue, showing the missing field.

The missing field

By examining the source code from the draft and published screens I saw that the code differed. For some reason, publishing the html code modified the draft code by changing the logical “And” (&&) to its ASCII equivalent, &#038&#038.

Or to put it another way, the code in the WordPress editor looked like this. The way it was supposed to:

onClick: function () {
  if (invoiceid.value.length < 1 && invoiceidDiv.style.display === "block") {
    invoiceidError.style.visibility = "visible";
  } else {
    invoiceidError.style.visibility = "hidden";
  }

But, when it was published, the code looked like this:

onClick: function () {
  if (invoiceid.value.length < 1 &#038;&#038; invoiceidDiv.style.display === "block") {
    invoiceidError.style.visibility = "visible";
  } else {
    invoiceidError.style.visibility = "hidden";
  }

Initially, I searched the web to see how others prevented the change, but couldn’t find a solution.

Consequently, I modified the script by changing the logical “And” statement into a nested “If” statement.

A nested “If” statement, is the most basic way of making a logical “And”. Basically, in words, if the first decision is true then check if the second decision is true. If they are both true, then do an action, otherwise, because one or both decisions are false, do something else.

onClick: function () {
  if (invoiceidDiv.style.display === "block") {
    invoiceidError.style.visibility = "visible";
  }} else {
    invoiceidError.style.visibility = "hidden";
  }
 

Of course there were probably other solutions possible, but this was the relatively easiest one for the WordPress and the PayPal Smart button code at hand.

So, with that problem fixed I continued to find out what happened to past payments and what more needed to be done to receive payments properly. But that is another story.

Summary and closing

In this post, I shared why I wanted to receive a credit card payment online, then what resources I had to receive the payment and the two issues that arose from trying to do so.

The first issue was specific to the PayPal Smart buttons and WordPress platforms I used and, consequently, I explained how I found the cause of the problem and fixed it.

If all has gone well, this post has reminded you, or taught you, to check for differences between the source code of a draft and published web page as one way to solve this type of issue, and better yet, a current issue.

If you do solve a current issue this way, or solved other PayPal and WordPress issues, or thought you might have solved this differently, then feel free to leave a comment.

In addition, if you would want to contact me to try and help solve issues others find hard to solve then I’d be happy for you to contact me and discuss how I can help.