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 displayed to your customer after they initiate checkout on your site. The WPF Designer lets you customise every aspect of your WPF, helping you create 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 redirecting the entire checkout page to emerchantpay’s servers.

Access your WPF settings

To customise your WPF:

Log in to the Gateway Console.
In the navigation menu, go to Configuration > Web Payment Forms.
Select the name of the WPF you want to customise. You can have more than one WPF, depending on how your account is set up.
The Web Payment Form Details screen displays a summary of configured settings on the left and expandable fields on the right that you can use 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 which supported online banking platforms you want to display in your WPF as individual payment fields.
Logo	Your logo will appear in the upper-left corner 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, are displayed. 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 appear as links. The link targets are specified in the Terms & Conditions and Privacy Policy fields below.
Terms & Conditions	Add your Terms and Conditions as a PDF file or web address. If you specify both a web address and a PDF file, only the web address is displayed.
Privacy Policy	Add your Privacy Policy as a PDF file or web address. If you specify both a web address and a PDF file, only the web address is displayed.
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 is displayed 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, including 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.