Customise your WPF

Use the WPF Designer to customise the checkout page your customers see.

The emerchantpay Web Payment Form (WPF) is the checkout page that is displayed to your customer once they initiate the checkout process on your site. emerchantpay now offers a WPF Designer – it allows you to customise every aspect of your emerchantpay WPF, ensuring a branded checkout experience for your customers. You can upload a logo, and modify the text, fonts, colours, theme, and input size.

Access your WPF

Log in to the emerchantpay Genesis payment gateway to customise your WPF.

  1. Log in to Genesis with your merchant account.
  2. In the navigation menu, go to Configuration > Web Payment Forms.
  3. Select the name of the WPF you want to customise.
  4. The Web Payment Form Details screen displays a summary of configured settings on the left, and expandable fields on the right used to customise individual WPF elements.

The table below details the customisable WPF elements.

WPF reference chart

Name Customisation
Show WPF Fields Toggle which WPF fields are shown to your customer.
WPF Top Level Bank Codes Toggle whichever supported online banking platforms you would like to display to in your WPF as individual payment fields.
Logo Your logo will appear on the upper-left of the WPF and should have a maximum vertical size of 54px.
Terms and Policy Template Specify how your Terms and Conditions and Privacy Policy links, if enabled, will display. Use the buttons above the text window to specify where the %{terms_and_conditions} and %{privacy_policy} placeholders will appear as links. The link targets are specified in the below Terms & Conditions and Privacy Policy fields, respectively.
Terms & Conditions Add your Terms and Conditions as a PDF file or web address.
Privacy Policy Add your Privacy Policy as a PDF file or web address.
WPF Designer Use the custom CSS editor to change the appearance of the WPF by:

  • Adjusting the WPF brand colour
  • Adjusting the WPF background colour
  • Adjusting the WPF theme
  • Uploading a WPF background image and changing its position
  • Adjusting the WPF font
  • Adjusting the input size and corner radius
WPF Customer Footer Text Custom footer text that displays at the bottom of the WPF.
WPF Purchase Summary Add custom text for the order summary of the amount your customer will be charged.