Custom Hosted Payment Page


DPS has now introduced a service which allows merchants to maintain a consistent look and feel between their website and the Hosted Payment Page. Using a wizard, merchants can select one of a number of preset styles and apply images and logos, colours, buttons and dynamically populated fields to the payment page.

Technical Specifications/Features:

  • Change footer, header and button images
  • Implement your colour scheme to the payment page
  • Styles support Card Verification Code 2 & 3D Authentication
  • Add credit card and 3D secure brand logos for the card types you accept

 

Requirements:


Custom Hosted Menu


Some properties may not show up when you preview your custom hosted payments page, because these options are not available for the style you have chosen.

Field Description
User PXPay ID Your unique user ID that DPS has created for your account. You will need to quote this PXPay ID when requesting for your custom hosted payments page to go live.
Page Style Select a payment page style that best fits your requirements from the drop down list.
Main Title The title of your custom hosted payments page (e.g. “Company Name’s Payment Page”)
Page 1 Title The title that is displayed to your customer on the main checkout window.
Page 2 Title The title that is displayed to your customer once the transaction has been processed. This is displayed on the confirmation page.
Field 1 Text Title for the TxnData1 field. This is an optional field and will only appear if this field has a title. Otherwise it will be hidden.
Field 2 Text Title for the TxnData2 field. This is an optional field and will only appear if this field has a title. Otherwise it will be hidden.
Field 3 Text Title for the TxnData3 field. This is an optional field and will only appear if this field has a title. Otherwise it will be hidden.
   
Frame Colour Colour of the frame around the main payment table.
Title Text Colour Colour of the 'Title' text.
Title Background Colour Colour of the 'Title' area.
Body Text Colour Colour of the main text to be formatted.
Body Background Colour Background of the main payment table.
Page Background Colour Background colour of the payment page if you aren't using an image.
DPS Background Colour Colour of the background for the area around the DPS logo.
    
Merchant Logo Top An image to appear at the top of the payment form.
Merchant Logo Bottom An image to appear at the bottom of the payment form. The image must be no more than 43px in height and will only be displayed if Style 5 is selected.
Background Image You can specify an image to tile for the background.
Page 1 Continue Button An image to replace the default continue button on the 1st page.
Show Back Button The default is not to have a 'back' button, but you can add one with this option.
Back Button An image to replace the default continue button on the 1st page if you have selected it to be show.
Show Cancel Button The cancel button allows the user to navigate back to the previous page in the their browser history.
Back Button Image Image for the cancel button.
Page 2 Button An image to replace the default 'next' button on the 2nd page.
Page 2 Retry Button If configured a button will be displayed in the event of a failed transaction which, if clicked, will allow the user to attempt another transaction.
    
Hide Page 2 Do not skip - A page will be displayed which outlines the outcome of the transaction. The user must click 'next' to proceed to the merchant website. 
Skip Page 2, HTTP Redirect - Does not display an intermediary transaction result page and redirects immediately to the merchant website. Use if the success/fail page is accessed using HTTPS. 
Skip Page 2, JavaScript - Does not display an intermediary transaction result page and redirects immediately to the merchant website. Use if the success/fail page is accessed using HTTP.
   
Link 1 Text: Title of the 1st link you wish to use.
Link 1 URL: The URL for the 1st link you wish to use.
Link 2 Text: Title of the 2nd link you wish to use.
Link 2 URL: The URL for the 2nd link you wish to use.
Link 3 Text: Title of the 3rd link you wish to use.
Link 3 URL: The URL for the 3rd link you wish to use.
   
Visa Logo Enable the Visa logo on the payment page to show that you support that card type.
Verified by Visa Logo Enable the Verified by Visa logo on the payment page to show that you support that type of authentication.
MasterCard Logo Enable the MasterCard logo on the payment page to show that you support that card type.
MC SecureCode Logo Enable the MasterCard SecureCode logo on the payment page to show that you support that type of authentication.
Amex Logo Enable the Amex logo on the payment page to show that you support that card type.
Diners Logo Enable the Diners logo on the payment page to show that you support that card type.
    
Custom logo 1: Image to display across the bottom of the payment page. 
Typically used for card scheme logos.
Custom logo 2: Image to display across the bottom of the payment page. 
Typically used for card scheme logos.
Custom logo 3: Image to display across the bottom of the payment page. 
Typically used for card scheme logos.
Custom logo 4: Image to display across the bottom of the payment page. 
Typically used for card scheme logos.
   
Require Security Code Imbed JavaScript validation on the payment page that ensures that a card security code is entered before allowing the transaction to proceed.
Hide Security Code Remove the security code field from the payment page.
Show Security Code Help Displays a helpful pop-up when the text cursor is positioned in the security code field.
Show Issue Number Displays a field where issue number can be accepted. Some Switch, Maestro and Solo cards have issue numbers.
Minimum Card Digits Minimum number of card number digits accepted on the payment page.
Maximum Card Digits Maximum number of card number digits accepted on the payment page.
Language The Language used on the payment page.

Depending on the style you have selected you can configure each of the various colour properties. Please note that the colours you select must be web colours only and does not need a preceding ‘#’ symbol entered. Once you have selected the colours you want, click on ‘Preview’ to view the sample output.

You can simulate a test transaction by using test credit card credentials (credit card number: 4111111111111111, using any expiry date in the future. To save changes you have made click ‘Save’.

To activate the customised hosted payments page that you have just created or upload a merchant logo and background image please email support@paymentexpress.com quoting your PXPay ID in the email. Please send image files in web format only (.jpg, .jpeg, .gif, .png).