Welcome to another CardPointe training video blog post.

The topic today is the CardPointe hosted payment page today, and I’m going to show you how to customize the page by adding some HTML code to various sections of the page.

If you haven’t seen the introduction to the CardPointe Hosted Payment page editor video yet take a minute to watch it.

This post and the video that goes along with it is part 2 in the series. 

FEATURED VIDEO

Here’s the customizations that we’re going to review. 

Number 1: Add special special text on the page, under the Logo at the top left of the page

We’ll also cover placement and reordering the page fields as well.

Number 2: Add 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.

Number 3: The addition of a Payment Security agreement box, which is accomplished by using the dropdown section under the Optional Input Fields.

We’ll take one section at a time. Let’s get started.

Number 1 – Special text on the page

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 – Terms & Conditions (Box 1) 

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

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 scroll down to the bottom of this post to get the exact code that I am using here and use it on your page.

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

This is what the HTML code for the payment terms box looks like when it’s pasted on the hosted payment page: 

HTML Box 1 (i.e. Payment Terms Box)

Payment Terms

By making this payment, you agree to the terms and conditions of YourDomainName.com. To view our terms and conditions click here.  Our privacy policy is found here.

Copy & Paste code for HTML Code Box #1 – Payment Terms & Conditions

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

Number 3 – Payment Security (Box #2)

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.

This is what the HTML code for the payment security box looks like when it’s pasted on the hosted payment page: 

HTML Box 2 code (i.e. Payment Security Box)

Payment Security

This payment page is powered by CardPointe and CardSecure technology. Please make your payment confidently knowing that your payment information will be safe and secure. You will receive an  email confirmation upon successful payment! If you have any questions, please send us an email at: email@yourdomainname.com

Copy & Paste code for HTML Code Box #2 – Payment Security

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

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.

CLOSE

For more CardPointe tutorials, merchant account trainings and payment page tutorials just like this one, be sure to click the 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.