How Our Hosted Payments Page Is Different

Hosted Payment Page 1

Generally, a hosted payments page is a web page your payments provider hosts for you. They aren’t hosting your payments page but rather a generic payments page that your website will use for the payments processing of your eCommerce store, shopping cart, or checkout page. In this case, your customers will come to your website, add products to their shopping cart, pay for their goods and get a confirmation of the completed sale and pending shipment.

The image below shows the typical flow when using a hosted payments page.

Hosted Payments Page Flow

There are many benefits to using a hosted payments page:

  • Reduced PCI scope
    • Because you are not sending financial data to your server your PCI scope is greatly reduced.
  • Ease of implementation
    • Hosted payments pages generally offer much less coding and development time to start accepting payments. This allows you to start accepting payments much faster.
  • Reduced development costs
    • Because development and implementation time is reduced, so is the cost associated with developing a payments solution.

But not all hosted payments pages are created equal. There are also some downsides with using typical hosted payments solutions:

  • Secure, but doesn’t always seem secure to user
    • Your customers are taken to a webpage on your payments provider’s website. Generally, this page looks nothing like the look and feel of your website. While this webpage may be perfectly secure, to the end user the experience looks suddenly different. At best, this is a confusing experience for the user – at worst, it may look like a phishing attempt and cause the use to abandon the purchase.
  • Very limited customization / difficult to customize
    • Many payments providers offer little or no configuration options on their hosted payments page. You may see input fields that don’t apply to your situation or the layout of the page may be completely different than the layout of your website. Branding is often challenging or non-existent. In these situations, you are not in control of the user’s end-to-end experience
  • Often doesn’t work on mobile
    • Even today many hosted payments page solutions are designed with full websites in mind and don’t scale correctly on mobile devices. This makes the process difficult for your customers to complete their purchases.

We have already told you that our hosted payment solution is different, so what is so great about our solution?

Well, we listened to our customers and addressed their concerns with our hosted payments page:

  • You told us you wanted a solution that was easy to implement.
  • You told us you wanted a secure solution but you don’t want to deal with the costs, efforts, and headaches involved with PCI compliance.
  • Finally, you told us you wanted to your customers to have a seamless experience on your website. Brand was important to you and you wanted a hosted payments solution that integrated with the look and feel of your website.

Our solution generates a form on your website. Your customers still see your website in the background of the form and the customer never leaves your website to complete their purchase.

Hosted Payment Page Flow 2

Easy to implement, how does one line of code sound?

<script type=”text/JavaScript” id=”clearent-hpp” src=”clearent.js”></script>


// Contact your Clearent representative for your sandbox public key


“pk”: “your public key goes here”,

“amount”: “9.99”




Yes, it really is that easy to add payments to your website! That code snippet produces a Pay Now button on your webpage.

Pay Now Button

When the user clicks the Pay Now button they are presented with the basic payments form show below.

Hosted Payment Page 1

. . . and the form scales based the device so it looks great on mobile too!

Hosted Payment Page 2

We have also made it easy to style the form, change label text, fonts, and colors to match your website.

Hosted Payment Page 3

This is just a simple example, but we even created a live demo page for you to experiment ( and more information is located on our GitHub help pages