Topic Doc: CardConnect Hosted Payment Page for WebTrac
RecTrac 3.1
Table of Contents
Document Summary
CardConnect's Hosted Payment Page allows your patrons to complete credit card transactions in WebTrac.
Setup Steps
This document will walk you through the basic steps required to create your Hosted Payment Page on the CardConnect portal. It will also walk you through the basic steps for editing the Credit Card profile linked to your 'WWW' User ID in RecTrac profile management to ensure WebTrac payments are possible.
If you have additional questions about the CardConnect Hosted Payment Page setup and processing after reading this document, please contact Vermont Systems Customer Service by phone at 887-883-8757 or generate a Support Case through the Customer portal of the Vermont Systems website using your Customer ID and password.
Before You Proceed
This document is written with the following assumptions. If any of the items listed is NOT true, contact Vermont Systems Support prior to continuing.
- Your organization is running RecTrac 3.1.09.02 or greater.
- You have purchased the WebTrac module, have WebTrac running on your system and allow your patron to make purchases online using WebTrac.
- You use CardConnect as your credit card gateway.
CardConnect Portal Setup
Obtain Login Credentials from CardConnect
- Contact CardConnect and obtain the following information.
- Portal URL
- User Name
- Password
Log Into the CardConnect Portal
- From a workstation with access to the Internet, go to the portal URL given to you by CardConnect.
- Enter your User ID and Password, as given to you by CardConnect.
- Click Sign In. You will continue to a page that looks similar to the image below.
Setup Tab
The steps in this section will guide you through the various menu items (Merchant Account, Payment Types, etc…) that appear on the left-hand panel of the screen when you are dwelling on the Setup tab.
Merchant Account
- Click Add a Logo and browse to the logo you wish you to use on your Payment Pages.
- Enter your Company Name as agreed upon by you and CardConnect.
- Enter your Merchant ID as given to you by CardConnect.
- Enter your User Name as given to you by CardConnect.
- Enter your Password as given to you by CardConnect.
- Enter "vsi" (no quotation marks) in the Gateway URL field (unless CardConnect instructs you differently). This field is case-sensitive.
- Expand the Drop-down list for Transaction Type and select "Authorize and Capture."
- Expand the Drop-down list for Status and select "Live."
Payment Types
- Select the types of credit card(s) you accept.
- Allow customers to store cards on file = No.
- Allow Payment Links to be encrypted = No.
- E-Check = No.
Payment Limits Min/Max
- Accept the default value (recommended) for Max Declined Payment or overwrite with an alternative value, if desired.
- Set the Velocity Attack Threshold to '400.' CardConnect recommends this value. See Velocity Limit Information below.
- Set the Velocity Attack Threshold Method to "IP Address Based. This option traces any fraudulent activity back to the direct IP base and blocks it. (The "All Transactions" option would block all IP addresses, which could result in legitimate transactions being blocked.)
- Enter '$1.00' as your Min Payment Amount OR the lowest fee you have online, whichever is lower.
Note: Golf tee times and Installment Billing use $1.00. Do not enter a value that exceeds $1.00 in this field.
- Accept the default value ($ 0.00) for Max Payment Amount.
Velocity Limit Information
The Velocity Limit is the number of times your Merchant ID can attempt a transaction over a 30-minute period. This is important because eCommerce environments are often subject to attack by cyber criminals. The Velocity Attack Threshold ensures your payment page is not subject to what the industry calls a "carding" event.
"Carding" is also known as "fraud," "credit card stuffing," or "verification." It happens when cyber criminals attempt to make small purchases with large volumes of stolen credit card numbers on one eCommerce platform.
You can read more about Carding and ways to protect against an attack at:
https://cardconnect.com/launchpointe/payment-security/stay-protected-against-carding
Changing the Velocity Limit for Known Periods where Heavy Traffic is Expected
Changes can be made to the Velocity Attack Threshold for known instances, such as an upcoming large registration period. A few days before your opening period, simply get in touch with CardPointe Support (877.828.0720). They will help you adjust the Velocity Threshold on your account. They will also advise you as to when it's safe to set it back.
Recurring Billing Plans
- Allow recurring billing = No.
Additional Options
- Make line items selectable = No.
- Hide pre-populated fields = No.
- Click Save and Continue on the lower right-hand corner of the screen.
- Click the Design Tab and continue to the next section.
Design Tab
The steps in this section will guide you through the various menu items (Payment Page, Confirmation Pages, Email Receipt, and Custom CSS) that appear as Tabs in the middle center panel of the screen when you are dwelling on the Design tab.
Note: The Payment Page design is customizable. The following provides the basic steps needed to configure the Payment Page for use with WebTrac. The images provided in this document may not look the same as the pages you see in your browser. The background color, text color, rows and column layout, etc… can (and most likely will) vary. Work with CardConnect to resolve any questions you have on the "look" or design of your payment page.
The screens in this section use "Drag and Drop" functionality. Generally speaking, it is intuitive.
Note: The ReCaptcha field cannot be removed. This field is not visible from Design, but you will see it in Preview and Test modes, as well as in production.
Payment Page Tab
By default, the Payment Page Tab is subdivided into three (3) rows, though you can add or remove rows, if desired. This section will discuss each row in turn.
Row 1
- The Drop-down list for Columns is set to "2."
- On the left-hand panel, click on Logo, then "drag and drop" into the right-hand column of the row, as shown above.
Row 2
- The Drop-down list for Columns is set to "1."
- You MUSTadd the following Data Fields. Locate each, in turn, in the Data Fields row on the left-hand panel and "drag and drop" into the column, as shown above:
- Total Amount Due
- Invoice Number
- Customer #
- You MUST add an Optional Input Field. Locate the Hidden Fieldin the Optional Input Fields group on the left-hand panel, then "drag and drop" into the column, as shown above.
- Field Name = "sessionid" (no quotation marks). This is case-sensitive.
- Leave the Field Value field blank.
- Click Add Field.
- Add text to indicate your time-out value.
- Design Elements HTML. "Drag and drop" a box and center it under your logo.
- Add in text that is X minutes less than your Session Cleaner setting. For example, if Session Cleaner is set to 30 minutes, then suggest 25 minutes.
- Add text similar to this: <p><font size="3" color="red">Please complete this form within 25 minutes or risk charging your card without items remaining in the cart.</font></p>
- Add a reminder in the same area telling customers to review their billing address, including zip-code, to ensure it matches the one on the credit card billing statement.
- Add text similar to this: <p><font size="3">Confirm billing address including zip-code and country, if applicable.</font></p>
Row 3
- The Drop-down list for Columns is set to "2."
- Verify that the Billing Info fields (Name, Address, and Country) are present and accurate. Add them using "drag and drop" if they are not.
Miscellaneous Information
- Locate and delete the following fields:
- Location
- List of line Items (Drop-down field)/li>
- User Login form
- (Optional) Click Preview to preview your page design. The preview will open in a new browser window.
- Click Save.
- Click the Confirmation Pages tab and continue to the next section.
Confirmation Pages Tab
The Payment Page Tab is subdivided into two (2) sub-tabs. This section will discuss each sub-tab in turn.
Payment Approved
- Click the Confirmation Pages Tab and select "Payment Approved."
- Ensure the Drop-down list for Columns on Row 1 is set to "2."
- On the left-hand panel, click on Logo, then "drag and drop" into the right-hand column of the row, as you did previously.
- In the Design Elements Group on the left-hand panel, click on New Row, then "drag and drop" into right-hand panel. Place the New Row under the "Payment Accepted" row and above the "Transaction ID" row.
- Ensure the Drop-down list for Columns for this row is set to "1."
- Add the following html text.
<p><strong>YOUR CREDIT CARD WAS AUTHORIZED.</strong></p>
<p><strong>PLEASE WAIT WHILE THIS PAGE REDIRECTS.</strong></p>
- (Optional) Click Preview to preview your page design. The preview will open in a new browser window.
- Click Save.
Payment Declined
- Click the Confirmation Pages Tab and select "Payment Declined."
- Edit this page as needed.
- (Optional) Click Preview when done to preview your page design. The preview will open in a new browser window.
- Click Save.
Email Receipt Tab
- This field is optional and should be addressed only if you wish to send patrons an additional email (beyond the one sent via RecTrac/WebTrac) upon completing a transaction.
- Click the Email Receipt Tab.
- Edit this page as needed.
- (Optional) Click Preview when done to preview your page design. The preview will open in a new browser window.
- Click Save.
Custom CSS Tab
- Click the Custom CSS Tab.
- Edit this page as needed. Work with CardConnect to resolve any questions you have on the "look" or design of your payment page.
- (Optional) Click Preview when done to preview your page design. The preview will open in a new browser window.
- Click Save. Click the Connect Tab and continue to the next section.
Connect Tab
The steps in this section will guide you through the two (2) menu items (Build Your Pay Components and Notifications)that appear on the left-hand panel of the screen when you are dwelling on the Connect tab.
Build Your Pay Components
- Amount = 0.00
- Invoice # = <blank>
- Customer ID = <blank>
- Click Build Your Links/Button on the lower right-hand corner of the screen. You will proceed to the For a website or ERP panel.
- Form Type = Full.
- Pay Link = This field will be populated automatically. DO NOT change the settings.
- Copy the above URL to Notepad or some other text program. It will be needed for your the Payment URL field on your Credit Card profile in RecTrac.
- Iframe = This field will be populated automatically. DO NOT change the settings.
- Review your settings and click Notifications on the left-hand panel when ready. Then proceed to the next section.
Notifications
- Leave the Always send to customers option de-selected and leave the three (3) Email Address fields blank.
-
REQUIRED Return to Website URL = <Your WebTrac Base Href>/paymentsuccess.html?Action=returntowebsite
For Example: https://parksdepartment.net:8443/wbwsc/webtrac.wsc/paymentsuccess.html?Action=returntowebsite- If you have multiple WebTrac Interfaces (i.e. one Interface for Recreation and a second Interface for Golf), then the "Return to Website URL" must include your specific Interface parameter AFTER the "Action=returntowebsite."
For Example:
Interface Parameter 1 = WebTrac_Recreation: Return to Website URL: https://parksdepartment.net:8443/wbwsc/webtrac.wsc/paymentsuccess.html?Action=returntowebsite&InterfaceParameter=WebTrac_Recreation
Interface Parameter 2 = WebTrac_Golf: Return to Website URL: https://parksdepartment.net:8443/wbwsc/webtrac.wsc/paymentsuccess.html?Action=returntowebsite&InterfaceParameter=WebTrac_Golf
- If you have multiple WebTrac Interfaces (i.e. one Interface for Recreation and a second Interface for Golf), then the "Return to Website URL" must include your specific Interface parameter AFTER the "Action=returntowebsite."
- OPTIIONAL Auto Redirect to the above URL - Determine whether you wish to "Enable" or "Disable" this option. Vermont Systems highly recommends enabling this option.
-
REQUIRED Webhook URL = <Your WebTrac Base Href>/webcardconnectwebhook.r
For Example: https://parksdepartment.net:8443/wbwsc/webtrac.wsc/webcardconnectwebhook.r- If you have multiple WebTrac Interfaces (i.e. one Interface for Recreation and a second Interface for Golf), then the "Webhook URL" must include your specific Interface parameter.
For Example:
Interface Parameter 1 = WebTrac_Recreation: Return to Webhook URL: https://parksdepartment.net:8443/wbwsc/webtrac.wsc/webcardconnectwebhook.r?InterfaceParameter=WebTrac_Recreation
Interface Parameter 2 = WebTrac_Golf: Return to Webhook URL: https://parksdepartment.net:8443/wbwsc/webtrac.wsc/webcardconnectwebhook.r?InterfaceParameter=WebTrac_Golf
- If you have multiple WebTrac Interfaces (i.e. one Interface for Recreation and a second Interface for Golf), then the "Webhook URL" must include your specific Interface parameter.
Notes: This field says "(Optional)" on the screen, but it is REQUIRED for Vermont Systems customers.Your WebTrac Base Href can be found in Interface Parameters Management in RecTrac.
If you have multiple WebTrac Interface parameter records AND the base Href values reference different domains, then you will need to contact CardConnect and arrange for multiple CardConnect Portal logins to handle the WebHook URL and the Return To Website URL.
If you are using multiple WebTrac Interfaces (i.e. one Interface for Recreation and a second Interface for Golf), then you should ask Contact CardConnect whether multiple Merchant IDs (MIDs) are required.
Final Steps
- Click Test. You should see the following:
- If your test is NOT successful, then work with CardConnect until it is successful, and then continue to the next step.
- Once your test is successful, remove "web" from the Webhook URL field, so that it reads <Your Base Href>/cardconnectwebhook.r.
For Example: You would change "https://parksdepartment.net:8443/wbwsc/webtrac.wsc/webcardconnectwebhook.r" to "https://parksdepartment.net:8443/wbwsc/webtrac.wsc/cardconnectwebhook.r."- If you have multiple WebTrac Interfaces, then be sure to remove "web" from the "Webhook URL" for all interface parameters.
For Example:
Interface Parameter 1 = WebTrac_Recreation: Return to Webhook URL: https://parksdepartment.net:8443/wbwsc/webtrac.wsc/cardconnectwebhook.r?InterfaceParameter=WebTrac_Recreation
Interface Parameter 2 = WebTrac_Golf: Return to Webhook URL: https://parksdepartment.net:8443/wbwsc/webtrac.wsc/cardconnectwebhook.r?InterfaceParameter=WebTrac_Golf
- If you have multiple WebTrac Interfaces, then be sure to remove "web" from the "Webhook URL" for all interface parameters.
- Click Save notification settings.
- Click Logout on the upper right-hand corner of the browser.
This completes the CardConnect setup.
RecTrac Setup
Credit Card Profile
- In RecTrac, search for and go to Profile Management.
- Highlight/select the CardConnect profile that is linked to your 'WWW' User ID and click Change.
You will proceed to the Profile Update screen.Note: In the event, you do not have a Credit Card profile set up for taking web payments, then create one as you normally would. Use the "i" Information icons for field definitions and other information as needed.
- In the Hosted Payment Page Version field, select "Hosted Payments V2."
- In the Payment URL field, enter the URL you copied to Notepad earlier in this process.
- Select the address fields that you want to have pre-filled Vermont Systems recommends accepting the default values.
- Click Save. You will return to Profile Management.
-
Note: In the event you are creating a new Credit Card profile, then go to Profile Assignments and link it to your 'WWW' User ID at the User level of Profile Hierarchy.
Perform a Test Transaction
- Process a test transaction in WebTrac.
- Use the Credit Card History Inquiry program to take a look at the details of the response of this test sale.
- A successful test should look similar to the following. In this event, your Hosted Payment Page is set up correctly and you may begin processing transactions in WebTrac.
- In the event you get a "blank" response similar to the following, then something is set up incorrectly, and it must be fixed.
- This indicates an issue with the definition of the webhook or a firewall issue. Work with CardConnect to resolve this issue. An email will be sent to the email addresses in the Admin Email Address field, located on the Organization Address group of your Static Parameters profile.