Home > Manuals > Tutorials > > Tutorials



Managing hosted payment pages advanced customization

Version: V7.2.0
Added on: 02/25/16
Difficulty:
Time: 30 min
Category: Tutorials

Managing hosted payment pages advanced customization

  1. Are you ready?

    In this tutorial, we are going to learn how to add hosted payment pages to a merchant. When adding hosted payment pages, two options are available:
    • to add default HPP templates for further downloading, customization and uploading back. This is needed when a merchant/account does not have its own payment pages;
    • to upload customized payment pages. This option is used if a merchant/account already has its own payment pages and does not need to download the templates and customize them for further uploading.

    If you want to test live HPP templates, use these files.

    We will use the following parameters:
    HPP Folder Name: 2000 (corresponds to a merchant or account ID)
    HPP Templates Names:
    paypage_card.html (used for sale, sale-auth and credit operations done with payment cards)
    tokenization_card.html (used for tokenization operations done with payment cards)
    paypage_account.html (used for sale, sale-auth and credit operations done with bank accounts)
    tokenization_account.html (used for tokenization operations done with bank accounts)
    result.html (a page shown to a user once an operation is successfully completed)
  2. Log in to the system using your Username and Password and switch to the Management => Merchant Perspective.

    Note: To learn how to log in and select perspectives, use the prerequisite tutorial Logging in and navigating the application.
  3. Select appropriate Merchant or Merchant Account in the top left section of the screen.
  4. Firstly, let's learn how to create a new HPP folder and add a set of default hosted payment page templates.
  5. Click   Resourcesbutton in the top section of the screen.
  6. Choose   Pages  menu item  from the list.
  7. Click   Create Folderbutton , enter 2000 into the textbox and press Enter button on your keyboard.
  8. Click   Modifybutton next to the folder.
  9. Choose   Copy default page's set  menu item  from the list to add default HPP templates to the merchant. At this step, the resources folder containing default scripts, images and css pages is also created.
  10. You can now download default HPP templates for subsequent customization and uploading. Let's learn how to do this.
  11. Click   Download Filebutton next to the paypage_card.html, paypage_account.html, tokenization_card.html, tokenization_account.html, result.html files to download them to your computer and customize according to your needs.
  12. Click   Upload Filebutton and select the HPP template files that have been customized to upload them and replace the default ones.
  13. Now, let's learn how to upload merchant's/account's own payment pages.
  14. Click   Create Folderbutton , enter 2000 into the textbox and press Enter button on your keyboard.
  15. Click   Upload Filebutton next to the folder to upload custom hosted payment pages from your computer.
  16. Click   Modifybutton next to the folder.
  17. Choose   Create resources folder  menu item  from the list to create a resources folder. If there are any custom scripts, images and CSS files, they are required to be uploaded to this folder.
  18. Click   Removebutton to remove the custom HPPs that are no longer needed.
  19. Finally, to verify that hosted payment pages have been copied correctly, submit the sale (via HPP) API request.
  20. Congratulations, you are done!

    You have learned how to add hosted payment page templates. Now you can do this by yourself.

Tags

Merchant perspective   Merchant  
View all available tutorials
Copyright © Constellation Payments. All Rights Reserved.
All Logos and Trademarks used or mentioned on this page are copyrighted property of their respective owners and are used for display purposes only.