Overview

The CardPointe Hosted Payment Page (HPP) is a secure, online checkout page for businesses to collect credit card and E-Check payments online. It includes a customizable Pay/Buy or Donate button that links to a secure, PCI-compliant page, complete with your company's logo and brand imaging. You can create an HPP in minutes, with no programming required.

The CardPointe HPP is directly integrated with the CardPointe Gateway and is a standard, complimentary feature of the CardPointe platform.

HPP w re CAPTCHA v3

What's New?

Date Updated 11/22/2021

The CardPointe HPP now uses reCAPTCHAv3 to authenticate your customer's payment attempts. reCAPTCHAv3 uses enhanced risk analytics to validate the authenticity of your users while they interact with the payment form. Unlike previous versions of reCAPTCHA, no direct user interaction is required, improving the checkout experience.

Features

The CardPointe HPP comes with the ability to easily customize your online checkout pages and use them in your invoicing, on your website or on a mobile device. You can:

  • Customize design options with fonts, colors and logos to match company branding
  • Add custom fields, user-defined fields, and drop-down fields 
  • Create a customized Pay button (Pay Now, Buy Now, and Donate buttons)
  • Include reCAPTCHA verification, which verifies that the consumer is a human and not a bot when completing the payment form
  • Customize a payment confirmation page and receipt
  • Enable Recurring Billing Plans
  • Use multiple merchant IDs (MIDs) on one hosted plan (helpful for businesses with multiple cost centers)
  • Display line item details and allow customers to choose a line item on their invoice to pay
  • Send notifications such as email payment confirmations to an unlimited number of internal users and webhooks to auto-feed internal accounting or other systems
  • Manage advanced settings such as:
    • Maximum number of declined payments 
    • Minimum and maximum payment amounts

Why Use the CardPointe HPP? 

  • Reduce PCI-DSS scope
    Sensitive payment data will never reside in your system, thus reducing your PCI scope.
  • Access to CardPointe’s Advanced Security Features
    Access includes tokenization and double-encryption of credentials. Our customer login feature allows consumers to enter payment information and have a token stored securely on their profile, which can be used for future payments.
  • Mobile-Friendly User Interface
    The CardPointe HPP is a responsive form that scales to fit any display, making it easy for your customers to pay on-the-go using their phones and tablets.

Signing Up for an HPP

If you're an existing CardPointe user and you want to add an HPP to your services, you can create a CardPointe Support ticket. Select Hosted Payment Page Inquiry from the list of reasons.

For additional assistance, contact CardPointe Support.

Setting up your HPP 

When you sign up, you'll receive a Welcome email that provides your credentials and URL to get started.

You can configure the following settings for your HPP:

    Your user type determines which HPP settings you have access to. If you don't have access to the Setup tab, contact CardPointe Support or your HPP administrator for assistance configuring the following settings for your HPP.

    • Merchant Account 
      Configure your credentials, upload your logo and configure the transaction type (authorization or capture). 
    • Payment Types
      Configure which payment types you would like to accept (for example, credit cards and checks).  
    • Payment Limits Min/Max
      Set the limits for transactions amounts, the number of declines allowed, and your velocity threshold. 
    • Recurring Billing Plans
      Create billing plans to provide for your customers to pay daily, weekly, or monthly. 
    • Recurring Billing Plans allow you to setup payment plans for your customers with a customized schedule and amount.
      Additionally customers can create profiles to manage their cards on file and see billing history. When recurring billing is enabled and plans have been created, a drop-down of the existing plans will display on the HPP for the customer to choose from. 
    • Additional Options
      Set additional options to control what information the HPP presents to your customers. 

    If you are a Super User, see Advanced Configuration for more information.

    After your HPP is configured as necessary for your business, you can customize the look and feel on the Design tab.

    Designing your HPP

    Design your HPP to mimic your company's branding for a truly unique shopping experience for your customers.

    HPP Design Page

    The Design tab allows you to customize your customer-facing pages as well as customize your CSS. Each tab at the top opens the design module for that page.

    PageDescription
    Payment PageThis is the page that displays to your customers to input payment information.
    Confirmation PagesPayment Approved: The page the customer sees when their payment is approved. 

    Payment Declined: The page the customer sees when their payment is declined. 
    Email ReceiptThe receipt that is emailed to the customer
    Custom CSSThis module allows you to implement your own CSS design for your site.

    Adding Fields and Columns to Your Payment Page

    Each page in the Design tab (Payment Page, Confirmation Pages, and Email Receipts) can be modified by dragging and dropping elements. You can pull elements from the left pane (in dark blue) and drop them anywhere you like on the page, as well move existing elements around on the page. 

    1. Select a page to work on. 
    2. Drag and drop Elements, Fields and Optional Input Fields from the left pane onto your page, then rearrange the elements by dragging and dropping them in place. 

      To drag and drop

      1. Click and hold the element you want to move.
      2. Drag the element to the desired location.  
      3. Let go of the mouse. The element drops.  

    3. To add columns:
      1. Click the columns dropdown. 
      2. Select a number.

    Delete Items and Preview Your Payment Page

    1. To delete items, click the red trash can icon.
    2. To update the background or the text style, click the Design Settings button (upper right hand corner of the screen). The design window opens.
      1. To change the color of the text or the background, click the square next to the label and choose a color from the color picker.  
      2. To select a new font or font size, make a selection from the dropdown.
      3. Click Save.
    3. To see what your page will look to customers, click the Preview button in the right hand corner.
    4. Once you are satisfied, click Save. Click Save All to save all of your pages.  

    Integrating your HPP

    You use the Connect page to configure the the payment details and the links and buttons that you need to integrate the HPP with your site or invoice.

    Build Your Pay Components

    You use the Build Your Pay Components page to configure the payment details that appear on your site or invoice.

    After you configure the payment details as described below, click Build your links/button to access the Display and Deployment Options page.

    Payment Info

    In the Payment Info section, you can configure the following options:

    FieldDescription
    AmountYou can use this field to manually specify a fixed amount.

    If you are using Line Items, this field is automatically populated using the line item details. See Line Items for more information.
    Invoice #Enter an invoice number here to track the invoice.
    Default payment typeYou can select Credit Card or E-Check.

    Alternatively, you can specify this option in the URL by setting the paymentType parameter to cc for Credit Card or ach for E-Check.

    Customer Info

    Enter a unique Customer ID in the Customer ID field.

    Line Items

    Configure the Line Item details that will be included on your page or invoice. For example:

    Click Add New Column to add line item details, as needed.

    Click Add New Item to add new rows.

    Notifications

    You use the Notifications page to configure custom email receipts to your customers for each transaction. To enable email receipts, select the Always send to customers checkbox.

    Auto Notifications

    In the Auto Notifications section, you can configure the following options:

    FieldDescription
    Email ReceiptsSelect the Always send to customers checkbox to enable email receipts.
    "From" Email NameThe name that will appear in the From field of the email.
    "From" Email AddressThe email address that the email be sent from.
    "To" Email AddressThe email address that will receive each email notification per each transaction.
    Return to Website URLThis adds a "Return to Homepage" button to your confirmation page. To automatically redirect the user to this URL, enable the Auto Redirect to the above URL option.
    Auto Redirect to the above URLEnable this option to automatically redirect the user to the URL specified in the Return to Website URL field.

    Note: If you are using an optional webhook to retrieve the payment response data, the webhook is processed before the user is redirected.
    Webhook URL (optional)Provides other applications with real-time information (approved payments only) from your HPP. 

    For example, you can use a webhook URL to send payment details to your accounting software (if it supports webhooks).

    As an alternative to using webhooks, if you include an Invoice ID in your HPP transactions, you can use the CardPointe Gateway API inquireByOrderid request to retrieve the transaction details instead. 

    Configure the settings as desired, then click Save to save your changes.

    Click Build your links/button to access the Display and Deployment Options page.

    Display and Deployment Options

    Use the Connect tab to configure the deployment options for your HPP, depending on your business needs. For example, you can include a customizable Pay Now button in an email or invoice, or embed the page within a website or Enterprise Resource Planning ERP) tool, like Oracle or SAP.

    To access this page, click the Build your links/button button on the Build Your Pay Components page or on the Notifications page. The Display and Deployment Options Page displays, and is added to the navigation in the left column. If you navigate to a different tab (for example, the Design tab) you might need to click the Build your links/button button again to access this page.

    For a Website or ERP

    On this page, you can copy the custom URL or iFrame code for your HPP payment form. The form is populated with the design and payment information that you configured.

    To generate the payment form, do the following:

    1. Select one of the following Form types:
      • Select the Mini form type if you only need to request the customer's payment card data.
      • Select the Full form type  if you also need to capture the customer's billing information.
    2. Click the Copy URL to clipboard button (on the right) to copy the URL for the payment form.

    For an Invoice or Email

    On this page, you can configure a custom button to deploy the payment form. 

    To generate the payment form, do the following:

    1. Select one of the following Form types:
      • Select the Mini form type if you only need to request the customer's payment card data.
      • Select the Full form type  if you also need to capture the customer's billing information.
    2. Click the Copy URL to clipboard button (on the right) to copy the URL for the payment form.

    To generate a pay button, do the following:

    1. Click Customize button design/text to open the button design menu:
    2. Customize the button design settings as desired, then click Save.
    3. Click the Copy URL to clipboard button (on the left) to copy html embed code for the button.

    Send Payment Request

    You can use the Send Payment Request page to email custom payment requests directly to your customers.

    Payment Info

    In the Payment Info section, you can configure the following settings:

    FieldDescription
    Email ToThe email address to send the payment request to.
    AmountThe amount of the payment that you are requesting.
    Customer NameOptionally enter the customer's name to personalize the email.
    Custom FieldsThe custom fields that display in the payment request email are inherited from the custom fields that you add on to the HPP on the Design tab.

    You can specify values for each field, or delete fields that you do not want to include in the request.
    Form TypeSelect one of the following Form types:
    • Select the Mini form type if you only need to request the customer's payment card data.
    • Select the Full form type  if you also need to capture the customer's billing information.

    When you're finished, click the Send Payment Request button to send the payment request email to the address that you specified.

    Viewing and Managing Payments

    To view your transaction history, navigate to the Payments tab. This page displays information for all transactions processed using your HPP. 

    You can sort each column by ascending or descending order by clicking the header label for a column.

    HPP Payments Page Sort

    Voiding and Refunding Transactions

    To void or refund a transaction, do the following:

    1. Click the pencil icon in the row for the transaction. 
    2. A pop-up displays the Void and Refund buttons as well as the transaction details.
    3. Click Void to void the transaction, or click Refund to refund the transaction.
    HPP Void Refund

    Searching for Transactions

    To search for a particular transaction, use the search bar and enter any qualifying information about the transaction. You can also filter transactions based on dates using the Filter by Date block. 

    HPP Payments Page Search

    Exporting Transactions

    To export transactions, for bookkeeping purposes or general reporting, click the Export to CSV button. An Excel spreadsheet with records of each transaction will download.

    HPP Payments Page Export

    Adding and Managing Users

    The Users tab contains a list of all HPP users for your account, including their username, first and last name, email address and access level (L=Limited User or S=Super User). Only Super Users have access to the Users tab. 

    Limited User vs. Super User

    The main difference between a Limited User and a Super User is that Limited Users do not have access to the Users tab or Setup tab. Super Users dictate if a Limited User has access to the SetupDesign, and Connect tabs. When creating a Limited User, check the box next to the tab you would like an individual to have access to.

    HPP User Add

    Create an HPP User

    1. Click the Add User button.
    2. Enter the new user's information. 
    3. Select a Permission. If selecting a Limited User, check the tabs that you would like the user to have access to. 
    4. Click Save.

    Edit a User

    You can edit a particular user from the Users tab clicking the pencil icon or delete a user via the trash can icon. 

    Advanced Configuration

    If you have access to the Setup tab, you can configure advanced settings and features for your HPP.

    Setup Tab

    The Setup tab provides access to the following pages.

    Merchant Account

    On the merchant Account Page, do the following:

    1. Upload your Company Logo by clicking Upload Logo. 
    2. Complete the following fields:
      FieldDescription
      Company nameYour Company Name as you want it to display on the page that customers see. 
      Merchant IDAs provided in in the email sent after you sign-up
      Username/PasswordAs provided in in the email sent after you sign-up
      Gateway URL*As provided in in the email sent after you sign-up
      Transaction TypeSelect one of the following options: 

      Authorize & Capture
      : This checks that the payment information valid (authorizes) and initiates the transfer of funds (captures) from the customer's bank to your account.
      Authorize Only: This checks that the payment information valid.
      Authorize Only - $1
      : This checks that the payment information valid and confirms that at least $1 is available in the account.
      StatusSelect one of the following options: 

      Test Mode (Sandbox)
      : This option allows to test out your page, without making public to your clients. 
      Live: Choose this when you are ready to make your HPP public. Note that you will require different credentials than your test credentials provided when you signed up. You can reach out to CardPointe Support for this information when are ready. 

    3. Click Save and Continue.

    Payment Type

    Do the following to configure your accepted payment types:

    1. For Credit Cards, configure the following settings:
      FieldDescription
      Accepted card typesSelect the credit card brands that you accept.
      Allow customers to store cards on fileSelect whether or not you want customers to have the option to create a profile to store their billing information. This option must be set to Yes if you want to enable Recurring Billing.
      Allow payment links to be encryptedSelect whether or not you want to encrypt the payment form URL that you send, so that the payment request details cannot be modified.
    2. For Checks, select whether or not you accept E-Check (ACH) payments.
    3. Click Save and Continue.

    Payments Limit Min/Max

    Do the following to configure the minimum and maximum payment thresholds:

    1. Configure the following settings:
      FieldDescription
      Max Declined PaymentsThe number of declined payments a customer can attempt.
      Velocity Attack ThresholdThe number of transactions a customer can make (failed or successful) within 30 minutes to prevent velocity attacks.
      Velocity Attack Threshold MethodThe method for monitoring velocity to prevent a velocity attack. You can monitor velocity based on the customer's IP address, or based on the number of all transactions regardless of the source IP address. 
      Min Payment AmountThe minimum amount that a customer can spend before a payment is accepted.

      Set this value to $0.00 to not enforce a minimum amount.

      The default is $5.00.
      Max Payment AmountThe maximum amount your customer can spend on a single payment.

      Set this value to $0.00 to not enforce a maximum amount.
    2. Click Save and Continue.

    Recurring Billing Plans

    Recurring Billing Plans allow you to setup payment plans for your customers. 

    • weekly, monthly or quarterly
    • any day of the week or month 
    • a specific number of payments or indefinitely
    • set specific amounts for the plan or let the customer choose the amount (for example, for donations)

    A customer login allows customers to manage cards on file and see billing history. When recurring billing is enabled and plans have been created, a drop-down of the existing plans will display on the HPP for the customer to choose from. 

    Enable Recurring Billing

    To enable recurring billing, do the following:

    1. On the Payment Type page, ensure that Allow customers to store cards on file is set to Yes.
    2. On the Recurring Billing Plans page, set Allow recurring Billing to Yes.

    Create and Configure Billing Plans

    1. On the Recurring Billing Plans page, click Add New Plan or click the Edit button on an existing plan.
    2. The Edit screen displays.
    3. From the Edit details tab, complete the following fields:
      FieldDescription
      Plan NameThe name of the plan
      Bill EveryThe frequency the customer will be billed.
      UntilSelect one of the following options:
      • # of Payments: The plan will bill for the specified number of payments, and then stop.
      • Canceled: The plan will continue to bill until it is canceled.
      Plan AmountThe amount included on each bill. 

      If you select the Customer Specified Amount option, then the customer can specify the payment amount in the HPP.
      Scheduled Billing dayThis option only displays if you chose If you chose Month(s) for the Bill Every field. This field sets the day of the month the bill will be sent.

      Enter the day of the month to bill the customer. if you leave this field blank, then the bill will be sent monthly on the same day as the original bill.
    4. Click the Billing Schedule Preview to review the plan.
    5. Close the window. The plan automatically saves.
    6. Click Save and Continue.

    Additional Options

    The Additional Options page includes the following options:

    • Hide pre-populated fields 
      When you Design the payment page for your clients, you have the option to pre-populate some fields. You might want to hide these pre-populated fields from the payment page to make the page simpler and easier to understand for your customer.

      Select Yes to hide all pre-populated fields on the HPP. The default is No.

    • Make line items selectable
      Select Yes to allow your customers to select which line items on an invoice they pay for. If this option is set to No, the customer can only pay the amount on the bill and for a specific line item. The default is No.

    Support

    For questions or support for your HPP, contact CardPointe Support.

    FAQs

    Have questions about our Hosted Payment Page solution? We have answers! Select a question below for more information.

    What is a hosted payment page (HPP)?

    A hosted payment page (HPP) is a secure checkout page that captures payment information from a merchant’s customers. It often includes a 'Pay/Buy' button or a 'Donate' button that allows users to make payments to the merchant.

    Why do I need a HPP?

    If you would like to accept payments online, our HPP could be the solution for you. The HPP is a simple, customizable page for your customers to enter their payment information. 

    The CardPointe HPP has the following benefits:

    • Simple implementation 
    • Your pay page integrates directly with your current website
    • You can integrate the payment button with your invoicing or accounting system
    • You can accept payments from a mobile device (i.e. mobile phone or tablet)
    • Using a payment page that you do not host yourself lowers the potential for fraud, maintains PCI compliance, and reduces your exposure for PCI requirements.

    What payment types are accepted?

    The CardPointe HPP accepts credit cards and eChecks.

    Do I need to know how to program to use the CardPointe HPP?

    Not at all! CardPointe HPP's design engine allows you to design an online, custom pay page in minutes without needing any programming knowledge. You can configure your logo, colors, fonts, layout, and custom fields without programming knowledge.

    How do I set up a HPP?

    First, you'll need to let us know that you're interested in using the HPP. You can contact us by filling out this form

    From there, we will send you the information you need to setup your HPP. Full details for setting up and customizing your own page can be found in the complete guide, CardPointe HPP.

    How do I make changes to the HPP once it is set up?

    Simply contact CardPointe Support (cardpointesupport@cardconnect.com | 877.828.0720 opt 1 > opt 1) to make any desired changes.

    Are transactions processed by the HPP accounted for in CardPointe?

    Yes, transactional data from CardPointe HPP is available in the CardPointe web app -- with up to 10 custom fields that assist you in reporting and reconciliation.

    How do I connect the HPP to my website or invoicing system?

    When you save your design and custom payment buttons, the HTML code for you HPP is displayed. Simply paste the HTML code into your website and the insert the payment button code on your invoices.

    What are some examples of custom fields I can add to a form?

    By simply dragging pre-configured fields to your Hosted Payment Page, you can add:

    • Invoice number
    • Customer number
    • Line item (SKU) information

    We also have a drop-down form builder, so you may add options for billing or service locations. For example, you can add and track payments by store locations, a region or by the name of a service provider. These custom fields are sent directly into CardPointe.

    Does the HPP work on mobile devices?

    Yes! CardPointe HPP is a mobile responsive form, meaning the page automatically adjusts if the customer is using a phone or a tablet. 

    Notifications and webhooks - what are the options and how do I use them?

    When a transaction occurs, the CardPointe HPP can send an email to a user at your company which contains the details of the transaction. 

    Additionally, webhooks allow the transaction data to feed other systems, such as your accounting or billing system, saving your staff time on data entry and improving reconciliation with CardPointe. Once a payment is received, email notifications are sent and webhooks can be triggered.

    If you are integrating the CardPointe Gateway API, you can also include an Invoice ID in your HPP transactions, and you can use the CardPointe Gateway API inquireByOrderid request to retrieve the transaction details.

    Can I pass my own custom fields into CardPointe HPP?

    Yes. If you have custom data that you want to make sure is tied to a transaction, you can create hidden fields in CardPointe HPP, and those fields can then be “saved” with the payment made by the consumer. If you use our web hook service, which uses JSON, the hidden fields will be passed back with an approved transaction, so you can use them and correlate them to the payment that was just approved.

    If I already have paid a programmer for my current HPP, why would I change to CardPointe HPP?

    By switching to CardPointe HPP, you can personally make changes quickly and directly to your payment page. You have complete control over the look and feel of your HPP, and can change or update it at any time.  This will save you time and money.

    What is the cost of the HPP?

    If you are a CardPointe Gateway customer, it is included in your monthly gateway fee. 

    What if I want to integrate CardPointe HPP into my enterprise systems (Oracle, SAP, etc.) or need functionality that may not exist in the current HPP?

    Our preferred partner, CoreCommerce, offers a robust eCommerce solution that provides business owners with the ability to create and manage online stores — complete with custom features and dedicated customer support.

    Reach out to CardPointe Support (cardpointesupport@cardconnect.com | 877.828.0720) to learn more!