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. 

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 at cardpointesupport@cardconnect.com or by phone at 877.828.0720 > option 1 > option 1.

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. 
    • Line Items 
      Enable the ability for your customers to select which line item they would like to pay for on their bill. 

    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 Screen

    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. Re-order those elements on the by dragging and dropping. 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 trashcan 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.
    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).

    Configure the email 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

    You use the Display and Deployment Options page to configure the deployment options for your HPP, depending on your business need. 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.

    Auto Notifications

    The Auto Notifications section allows you to send custom email receipts to your customers for each transaction. To enable email receipts, select the Always send to customers checkbox. 

    The following fields are available for customization:

    • "From" Email Name: The name that will appear in the From field of the email.
    • "From" Email Address: The email address that the email be sent from.
    • "To" Email Address: The email address that will receive each email notification per each transaction.
    • Return to Website URL: This adds a "Return to Homepage" button to your confirmation page.
    • 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). 

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

    Viewing and Managing Transactions

    To view your transaction history, navigate to the Transactions 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 Transactions List

    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 Transactiontypes

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

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

    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 Usertypes

    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

      To add multiple merchant IDs, click the plus sign adjacent to the Merchant ID field. 
      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.
      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.

    Line Items

    Set the Make line items selectable option to 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.

    Additional Options

    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.  

    To hide these, set the Hide pre-populated fields option to Yes. By default, this option is set to No. 

    Support

    For questions or support for your HPP, contact our CardPointe Support team by email at cardpointesupport@cardconnect.com or by phone at 877.828.0720 > option 1 > option 1.

    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?

    A hosted payments 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. 

    CardConnect's 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 third party gateway, like CardConnect, to host your payments page 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 a programmer to implement CardPointe HPP?

    Not at all! Rather than receiving a long, technical document to hand-off to a programmer to develop, CardPointe HPP's design engine allows you to design an online, custom pay page in minutes. You can easily upload your logo, choose colors, fonts, layout and add custom fields -- all without a programmer.

    Check out the Design your HPP section of the CardPointe HPP guide to see what you can do!

    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 date from CardPointe HPP is included in the CardPointe Platform -- 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 web hooks - what are the options and how do I use them?

    When a transaction occurs, CardPointe HPP can send an email to a user at your company which contains the details of the transaction. Web hooks 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 web hooks can be triggered.

    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?

    There are benefits of not having a programmer to design your payment page. For example, you can make changes quickly and directly to your HPP, saving you time and money. You have complete control over the look and feel of your HPP, and can change or update it at any time. 

    What is the cost of the HPP?

    If you are a gateway customer of CardConnect, 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 opt 1 > opt 1) to learn more!

    Downloadable Materials