CardPointe QUICK TIP – Add HTML, Text, Terms & Conditions Checkbox to HPP

by Feb 7, 2019

Featured Video

Welcome to another CardPointe “quick tips” training video. This is Brian Manning and today we’re gonna talk about a couple very specific customizations that you can make to the hosted payments page.

If you haven’t seen the introduction to the CardPointe Hosted Payment page editor video yet, check the links in the description to see it.

The customizations we’re going to review today are:

#1– is the addition of special text on the page and we’ll cover placement and reordering the page fields as well.

#2 – is the addition of a HTML section that holds a terms and conditions page hyperlink to your company website so you can properly inform your customers of your company policies

In addition, In this section, I’ll show you how to format the text that you add to custom font size, font color, and how to make some of the text bold to match and layout that you need.

And #3 is the addition of a Terms and Conditions agreement box, which is accomplished by using the dropdown section under the Optional Input Fields.

Number 1

So we’ll start by clicking and dragging the paragraph section into the page section that we want. When you drag to a certain section and release the paragraph section is placed.

If you want to relocate it with another section, just click and drag to re-order different elements.

In order to edit your text, just hover your mouse over the default words and click, and the lightbox will come up for you to type your text in.

It’s important to note that this paragraph box will accept code so if you know basic programming you can add it here. However, if you place special code in this box, like making a certain word or string of words, bold for example, and choose to edit that text box later, you’ll have to re-insert that same code and basically start all over because the text box strips the code after it’s saved.

Number 2

So if you want to be able to change and modify the text easily, if you’re going to customize it, you should use the HTML editor which will cover in a minute.

Use the paragraph Design Element for situations where you simply want to add basic text with no formating.

In order to add specific text color, font weight, and size codes that you CAN edit at any point and make modifications to, you should use the HTML box which is what is used to produce this Payment Terms section shown here.

You’ll notice that on the live payment page, the Terms and Conditions, as well as the Privacy Policy, are both hyperlinks that when clicked, take a customer to a specific website page of your choosing.

Here’s how that’s done.

First we drag the HTML box onto the page section and place it where we want the text to show up.

In order to get the hyperlinks you have to attached some special code that I referred to earlier. This code can be obtained by simply googling HTML hyperlink code, OR you can just check the link in the description to get the exact code that I am using here and use it on your page.

7

Here's the HTML code #1

<h1><strong>Payment Terms</strong></h1>

By making this payment, you agree to the <a href=”https://www.yourdomainname.com/terms-conditions”>terms and conditions</a> of YourDomainName.com. To view our terms and conditions click here.&nbsp; Our <a href=”https://www.yourdomainname.com/privacy-policy”>privacy policy</a> is found here.

So within this code, the H1 tag adds the bold font and sizes it appropriately. This code here is the hyperlink code.

So once the code is in there, just click to save the box, and you’re all set!

Similarly for this payment security notice that I have showing up right above the payment button, you’ll see that there is a font size, font weight and color code that can be changed and modified to your liking.

So if you want to change the size of the text, you click here and change the font size. Click save and you’ll see that the whole box has changed size.

If you want to change the color, you can insert a different HEX color code here and that section will be changed.

7

Here's the HTML code #2

<h4><strong>Payment Security</strong></h4>

<span style=”font-size: 8pt;”>This payment page is powered by CardPointe and CardSecure technology. Please <strong>make your payment confidently</strong> knowing that your payment information will be safe and secure. You will receive an  <span style=”color: #993300;”>email confirmation</span> upon successful payment! If you have any questions, please send us an email at: <a href=”mailto:email@yourdomainname.com”>email@yourdomainname.com</a></span>

Number 3

Last is the term and conditions box.

If it’s your company policy to require customers to agree to your terms and conditions while making a payment then this is one way to do it.

We’ll drag in the Dropdown box under the Optional Input fields and this lighbox will pop up for you to configure it.

Just add YES as the only option value and click ADD OPTION and type in the question under the field name here, and finally make sure to click the green update field button.

Last, just set this field to be a required field so the payment cannot be made unless an option is selected.

SO there are 3 different customization that you can make to your own Hosted Payment page by CardPointe and you can have these changes made in a matter of minutes.

Brian is the founder of BancardSales.

In Closing

For more CardPointe tutorials, merchant account trainings and payment page tutorials just like this one, be sure to CLICK that subscribe button because I will be covering other payment page options that allow you to further customize your payment collection software.

When you subscribe you receive notifications when future videos are posted.

Share it with your friends and colleagues, and comment below if you have questions about the code or the tips shared here.

I’m Brian Manning and thanks for watching.