How to Create a Hosted Payments Page

Fortis Gateway

Last Updated: July 17, 2024

Introduction

Hosted Payment Pages are forms, similar to online shopping carts, that allow a merchant to accept payments using any of the following methods.  However, unlike shopping carts, there is no third-party service or integration required.

  1. Sharing a web link via email, text, or other delivery method.
  2. Incorporating an HTML button into an existing web page.
  3. Integrating the Hosted Payment Page form into the code of their website.

NOTE: Due to the length and complexity of this article, it has been laid out in multiple sections to make it easier to navigate.

Getting Started

  1. Click the link to open the Location where you want to create a Hosted Payments Page.

    15ab5fe856267a05032a905cc562eff3.png

  2. Click Settings.

    2f12788a275d6c35c7217cc81c16a39b.png

  3. Select Hosted Payment Pages in the drop-down menu.

    c829ac0b37e5831126c4168e0f6eb65b.png

  4. Any existing Hosted Payment Pages will appear here.

    90d353984df1384359b46104564ad63b.png

  5. Click the Create Hosted Payment Page button to create a new Page.

    c0a735d494252da522c45199d08ae002.png

  6. Click the appropriate button to select the Template Type you would like to use.|
    NOTE:  See the Form Template Examples section for screenshots of the form options.

    96decf26d90869e82184e01813037abb.png


Form Template Examples

Simple Payment Form (Vertical)

Simple Payment Form (Horizontal)

Payment Form with Billing Info (Vertical)

Payment Form with Billing Info (Horizontal)


Donation Form

Form Settings

  1. Click to expand the Form Settings menu.



  2. REQUIRED STEP:  Enter a Title for the new Payments Page.



  3. Enter a valid Approval Redirect URL.

    NOTE: This is a secure website the system should direct your customers to if their payment has been approved.



  4. Enter a valid Decline Redirect URL.
    NOTE:     This is a secure website the system should direct your customers to if their payment has been declined.



  5. Enter the duration of the Redirect Delay (in seconds).
    NOTE: This value should be a whole number (no decimals).



  6. Enter the Min Payment Amount  (USD)you would like to accept via your Payments Page in dollars and cents.

    NOTE: It is strongly recommended to enter an amount here to help prevent fraudulent actors from using your Page for credit card testing.



  7. Enter the Max Payment Amount  (USD) you would like to accept through your Payments Page in dollars and cents.
    NOTE: It is strongly recommended to set your Max Payment Amount to be well within your approved Monthly Volume Limits.



  8. If you would like to apply a stylesheet to your Payments Page you can enter your Stylesheet URL.



  9. If you only want your customers to see the required fields on your Payment Page, select the Hide Optional Fields checkbox.



Customize Your Hosted Payment Page
  1. Use the fields and options in the bottom panel to customize the layout and appearance of your Hosted Payments Page.



  2. The Header tab will be open to the default header layout.



  3. Drag items from the Custom Fields menu and drop them into the preview pane to add additional fields to your Page's header.



  4. Use the Delete, Settings, and View buttons to change or remove elements from your Page header.



  5. Click the Body tab to open the default body layout.



  6. Drag items from the Preset or Custom Fields menu and drop them into the preview pane to add additional fields to your Page's body.



  7. Use the Delete, Settings, and View buttons to change or remove elements from your Page body.



  8. Click the Footer tab to open the default Footer layout.



  9. Drag items from the Custom Fields menu and drop them into the preview pane to add additional fields to your Page's footer.



  10. Use the Delete, Settings, and View buttons to change or remove elements from your Page footer.



  11. Click Save when you are finished.



  12. The Form Settings for your new Hosted Payments Page will appear on the start page.



Start Using Your Hosted Payment Page

  1. Click the Actions drop-down button.

  2. Click the Use button to see the options for using your new Payments Page.



How to Use Your Hosted Payments Page

  • Option one is to use the Copy button in the As URL frame to copy the Page's URL into an email, statement document, etc.



  • Option two is to add a Payment Button to your existing website.



  • Option three is to embed your Payments Page into your application using our Advanced Development Tools.
    NOTE:  You can find additional information by clicking the Documentation link located just above the custom JSON examples.


Finding Your Hosted Payments Page ID and Encryption Key

  • Select Credit Card (if your integration requires an ACH specific ID and Encryption Key then select ACH)

  • Click the Actions drop-down button.

  • Click the Use button to see the options for using your new Payments Page.

  • Your Encryption Key and your Hosted Payment Page ID are found under Advanced.

If you need more information on Hosted Payment Pages, or if you need help with any of the steps covered in this article, please contact Support.

I found this article helpful
I did not find this article helpful