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.

You can display the WPF in an iFrame on a self-hosted checkout page without having to redirect the entire checkout page to the emerchantpay servers.

Access your WPF

You can have more than one WPF depending on how your merchant account is set up.

Log in to Genesis with your merchant account.

If you do not have access to the emerchantpay Genesis payment gateway, see WPF first steps to set up your Merchant account with emerchantpay.
In the navigation menu, go to Configuration > Web Payment Forms.
Select the name of the WPF you want to customise.
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 fields that are required to complete the transaction and are not sent as part of the transaction request will be displayed even if toggled off.
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. Add custom text for any of the supported WPF languages and specify which language to display by default. 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. If you specify a web address and a PDF file, only the web address will display.
Privacy Policy	Add your Privacy Policy as a PDF file or web address. If you specify a web address and a PDF file, only the web address will display.
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. Add custom text for any of the supported WPF languages and specify which language to display by default.
WPF Purchase Summary	Add custom text for the order summary of the amount your customer will be charged. Add custom text for any of the supported WPF languages and specify which language to display by default.