Customizing Worldpay Hosted Checkout Page

From Rts
Revision as of 20:07, 13 November 2020 by JacobS (talk | contribs) (Option 2: Upload Your Own Style Sheet)
Jump to: navigation, search

The following wiki describes how to edit the styling of the hosted checkout page when using Worldpay E2E online processing. This is the page customers are directed to input credit card information when completing online purchases.

Making Changes

To edit this page, navigate to Setup -> Credit Card, then select "Configure Credentials" under "Internet Account Setup". Next, select "Setup Custom CSS". This will open the form where the changes will be made. On this form, there are 2 methods for styling the hosted checkout page:

  1. Fill in preconfigured properties
  2. Upload your own stylesheet

Option 1: Edit Preconfigured Properties

This option is considered easiest and acts as a "fill in the blank" method. Simply fill out any desired settings on the form on the "Init Method" tab.

Init Method.png

Property Description
Background Color Specifies the background color of the page. Format is hexadecimal (e.g. #FFF) or a standard named color (e.g. white).
Button Background Color Specifies the background color of the buttons on the page. Format is hexadecimal (e.g. #FFF) or a standard named color (e.g. white).
Button Text Color Specifies the text color of buttons of the page. Format is hexadecimal (e.g. #FFF) or a standard named color (e.g. white).
Cancel Button Text Defines custom text for the [Cancel] button. Default value is 'Cancel'.
Font Color Specifies the color for the labels on the page. Format is hexadecimal (e.g. #FFF) or a standard named color (e.g. white).
Font Family Defines the font family to be used for the labels on the page. Default is Arial. There are 3 pre-defined font-family values that may be used: FontFamily1, FontFamily2, FontFamily3. The pre-defined font families are defined as follows:
  • FontFamily1: Arial, Verdana, Geneva, Helvetica, sans-serif
  • FontFamily2: Georgia, Times New Roman, Times, serif
  • FontFamily3: Courier New, Courier, monospace

A custom font family may also be specified using comma-delimited string of fonts. Example: ‘Comic Sans MS, Arial, sans-serif’

Font Size Specifies the font size. Default is 'Medium'. Options are Small, Medium, Large.
Logo Url Specifies the URL of the logo to display at the top of the page. Default is no logo. The logo should be located on the Merchant’s eCommerce web site at a public URL.
Page Title The html title of the page that the browser will display in the title bar. Default value is ‘Mercury Secure Checkout’.
Submit Button Text Defines custom text for the [Submit] button. Default value is 'Submit Payment'.

Option 2: Upload Your Own Style Sheet

If you would like to make more advanced changes to your hosted checkout page, you can upload your own stylesheet to be linked to your Worldpay merchant account. This is done by selecting "Upload" on the "Upload CSS Method" tab and selecting the file for upload.

If you have an existing CSS file, you can also download this to your disk using the "Download" button.

Uploadhccss.png

Below are the following IDs and Classes available for use when styling the hosted checkout page with a custom style sheet:

IDs:


#bodyCheckout
#btnCancel
  #btnCancel:hover
  #btnCancel:active
  #btnCancel:disabled
  #btnCancel:first-child
#btnClose
#btnPayment
  #btnHiddenTimeout
  #btnPayment:hover
  #btnPayment:active
  #btnPayment:disabled
  #btnPayment:first-child
#cfvAddress
#cfvCardNumber
#cfvCreditCardSecurityCode
#cfvExpiration 
#cfvNameOnCard
#cfvZip
#cssAlerts
#cssDefault
#customStyleInjection
#divAddress
#divAmex
#divButtons
#divCSCHelpText
#divCUP
#divCVV
#divDiners
#divDiscover
#divFooter
#divHeaderImage
#divHeaderLine
#divHelpButton
#divHelpPopup
#divJCB
#divLogoContainer
#divMain
#divProgress
#divProgressImage
#divProgressOverlay
#divProgressText
#divSummaryError
#divTermsOfUse
#divTermsOfUseContainer
#divTimer
#divUserInput
#divValidateAddress
#divValidateCVV
#divValidateCardNumber
#divValidateExpDate
#divValidateName
#divValidateZip
#divZip
#frmCheckout
#hdnAllowCanadianZip
#hdnCardTypes
#hdnRes
#hdnTimeoutDuration
#hdnTimeoutStartSeconds
#hdnX
#hdnY
#ibtnCSCHelp
#imgAmex
#imgHeader
#imgMercurySecureLogo
#imgProgress
#lblAddress
#lblCSC
#lblCreditCardNumber
#lblEnterCardInfo
#lblExpirationDate
#lblFooter
#lblFooter2
#lblNameOnCard
#lblProgress
#lblZip
#rfvCardNumber
#rfvCreditCardSecurityCode
#rfvExpDate
#rfvNameOnCard
#txtAddress
#txtCSCValue
#txtCardNumber
#txtExpirationDate
#txtNameOnCard
#txtZip
#uctlTermsOfUse_divText


Classes:


.aspNetHidden
.bodyECommRedirect
.btnCSCHelp
.btnDialog
.btnMercury
.divCSCHelpDialog
.divHR
.divHeaderText
.divLabel
.divLine
.divLogo
.divSecurityLogo
.divTextBox
.divValidators
.imgCardLogo
.lblDefault
.lblFooter
.lblHeader
.txtMercury


Note: If you have uploaded a custom stylesheet, it may override properties set on the "Init Method" tab used in Option 1 above.


Cssoverride.png

Applying Your Changes

Once you have finished making changes, press the "Save" button. The changes will be posted right away.

Additional Resources

Customizing your RTN Website
CSS Information