(888) 752-6756 info@bancardsales.com

CardPointe Hosted Payment Page – How To Add a “Pay NOW” Button To WordPress

by Mar 20, 2017CardPointe, General Merchant Account

Hey everyone, Brian Manning here.

And I’m gonna show you how to add a PAY NOW or PAY YOUR BILL button or link to your wordpress website.

This is part of an ongoing series of videos ADDING payments to your website because there is definitely not just one way to do this.

You’re gonna get the “A to Z” steps… right here in this video so I’m going to go through everything.

We’ll get into the website editor, create the button and enter the link so that your customer can click on it to pay you.

And by the end of the video you’re gonna have all of these questions answered and futhermore you should have a button or LINK like this installed on your website.

The tools needed for this are very simply:

A cardconnect merchant account and a WordPress website that is already set up and configured

The first step is to request the HOSTED payment page to be activated.  You do this by contacting your Cardpointe representative and if you’re not sure how to do that or you don’t have one check the links in the description for help

Once you have requested the hosted payment page, you will receive an email and  it will look something similar to this.

This will be unique to YOUR specific MERCHANT ID number so again this has to be requested and activated through CardConnect because again they manage this page for you.

Once the email comes, it gives you 2 options to use the hosted payment page and here is a sample of those two formats, shown live on this website page.

The first is a simple hyperlink to take and add to an image Button or add as hyperlink text option.

The 2nd in HTML code that is placed into the wordpress website editor which automatically generates a pay now button.


Both of these options take you to the same payment page, it’s just a matter of whether you want to use the link or the HTML code and I’ll give you the practical applications for each in just a minute.

So the hosted payment page that we’re setting up here has the following structure:

You have your website which in this case is WordPress.

Then you have the hosted payment page that is on CardConnect’s secure servers.

When you install a button or a link  on your website, your customer clicks on it and leaves your website to be directed straight to the hosted payment page.

So security and is handled and managed by the CardConnect.

So, let’s build a page in wordpress and install a button, a link, and the Embed Code.

Come to the wordpress dashboard and select pages.

Name your page and then come over and save the draft.

If you click preview you can see that the page has been created but nothing exists on the page yet.

So to add the payment button, you’ll need a Pay Now image of a button. With some wordpress themes there are button generators and there are even some plugins that will allow you to create a button, but since there are SO many variables to button design and page design for that matter, I’m just going to show you how to install an image and make it a clickable link.

So on your page come down to the Text editor which is right here.

This is where you will type in the text on the page and we’ll also insert the button image.

So I’ll type in some text:  Make a payment here:

Then I’ll come to the Add Media button and click on it and find the Pay Now image and insert it into the editor.

So there’s my text and there’s my button.

Now we simply take the Hosted Payment Page link that CardConnect sent you copy it to your clipboard and come back to the image and click on it so it’s highlighted.

Then come up to this figure 8 looking link, click on it and paste your link and hit enter.

Then come up and save the page and click preview.

Once you’re ready to publish your page, just click publish and your new button is ready to go.

In the same way that we just attached the hosted payment page to the button, we can attach it to a hyperlink by simply highlight text that we want as a link, and clicking the hyperlink button again and pasting the hosted payment page link.


The 2nd option is the embed option.

Within WordPress, you have a VISUAL editor which is a what you see is what you get, and you have a TEXT tab which is for HTML code.

You can see the code here from my previous images and text and Let’s say I want to start clean.

I’ll just highlight and clear everything out of my editor so I have a blank page.

Then I just need to grab the HTML code from the email that CardConnect sent and paste as is.

That’s it.

If I click back to the visual editor you can see the button and once I click update on the wordpress page, this new button is live.

One of the most common ways to use this page is for buy now buttons like i’ve just shown you but Remember, this is a stand alone payment page so if you wanted to email this page link to customers along with an invoice for example, you could do that.

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

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

Share it with your friends and comment below if you have questions.


I’m Brian Manning and thanks for watching.

Brian Manning

Bancardsales founder and 15 year payment processing veteran, Brian Manning has helped thousands of businesses streamline their electronic payment systems. With a healthy disdain for things like terminal leases and "lowest rate" guarantees he regularly advises on best practices to anyone setting up merchant account related solutions. Brian's mission and passion is to help business owners use their merchant account simply as one tool in the big picture of growing their own business and creating an experience that is positive and meaningful for their customers.


Submit a Comment

Your email address will not be published. Required fields are marked *

Get in touch

1075 Broad Ripple Ave
Suite 340
Indianapolis, IN 46220