Hosted Payment Page Quick Reference Guide
This quick reference guide will show you the steps required (For items not referenced in this guide please see the Hosted Payment Pages Integration Manual) in order to create your own Hosted Payment Page along with the most basic settings required to allow you to easily and quickly create a Pay Now or Donate Now button to add to your website.
When you first log into your account, click on the Payment Pages tab located along the top of the page. Here, you will see listed any existing payment pages you have already created (if any). To setup a new page, click on the link Create a New Payment Page highlighted below.
If you want your payment page to be viewable on mobile devices, check the “Mobile Style Enabled” box and click the “Save” button prior to creating your payment page. This step can also be done after the payment page is created.
You will now be presented a page (General Page Setup) that will ask you for three pieces of information as discussed below.
After you have entered the above information, click on option ‘4: Receipt Page’ located on the left hand side of the page. You will now be prompted to enter the additional pieces of information described below.
Once you have completed the above, click on the Create button located in the bottom right corner of the page. You will now see your new Payment Page listed (similar to the example below). You can preview your page by clicking on the Preview option located on the right side of your page row.
If you want to use the HTML code generator to create a Pay Now or Donate Now button to place on your web site then continue with the steps listed below.
Click on the Payment Page that you just created; this will take you to the General Settings Page for your new Payment Page (see below).
Once you are in General Settings, click on the ‘3. Pay Now/Donate Now’ option presentedon the left hand side of the page. The Page shown below will then be displayed.
1 – Amount: If you have a set dollar amount for a specific product or service, you can enter this amount here. When the customer clicks the button this is the amount that will be charged.
If you would like the customer to enter their own amount for a donation as an example, you would leave this blank and they would be prompted (see 2 below) for an amount to donate.
2 – Donation Prompt: If you left the Amount field (1 above) blank, you can enter a message to your customers here. For example, “Please enter the amount you would like to donate”.
3 – Appearance: These settings allow you to change the look of the button you will be putting on your page. Here you can change the Display Text, Button Width, as well as the color of the button, its border and the font color, style and size.
4 – Refresh: Once you have made the above changes, click the Refresh button. The Button Preview will update with the Appearance and Display Text settings you applied.
5 – Button HTML: Once you have made all of your changes and clicked on the Refresh button, you can copy the actual code generated to put on your site. Click on the Copy to Clipboard button, the text to be copied will be highlighed (selected) and you will be presented with the instructions for copying the text into your clipboard for either a PC or Apple system. Right click the selected text and choose Copy.
You can now paste this code into the appropriate page on your website and create a pay button for your customers. If you ever need to make any changes to your button, or want to create additonal buttons, you can go back to the above page and generate as many HTML buttons