Documentation

Customize the First Data Connect payment page

If you have managed to use our First Data Connect for WooCommerce plugin on your site, your default payment page would appear like so:

You might find the need to customize your payment page form to fit your brand colors. Here’s how you can change it:

1. Log in to your First Data Connect back-office account.

2. From your back-office account > click Customization > Customize the design of your hosted payment forms.

3. From this page, you can choose to set the background color, and font sizes used by your form.

Classic form Tab

Combined Page Tab (this is what our plugin uses, and we recommend that you make changes to this tab)

4. You can click on the ‘Preview style’ or the ‘Mobile Preview Style’ button to see how your changes would look on a desktop or mobile, respectively.

5. Once you are happy with your changes, you can click the ‘Save Style’ button to apply your changes.

Here’s the payment page before and after applying our customizations:

Before

After

Voila! as you can see from the comparison between the two screenshots, the payment page form is customized to fit the brand colors of We are AG, which is much better than the plain old black-and-white form.