Customisation

Introduction

Like most contemporary software products, Payment Page is constantly evolving, and its user interface and internal operation make use of the new technologies, innovations, and trends of the online payment industry. At the same time, merchants need the payment form that is reliable—the form that is invoked and functions failure-free (which includes the way it is embedded into interfaces and the operation of the web service). To combine the advantages of dynamic growth and reliable operation while also ensuring flexibility in design options and capabilities of implementation, ecommpay develops new generations of the Payment Page design that seamlessly follow one another but also work simultaneously. Along with that, each subsequent Payment Page generation comes with the significant improvements of reliability, processing speed, interface, and functionality.

In addition, the 4th and 5th generations of the payment form support customisation with the use of specialised designer tools embedded in the Dashboard interface (in case of previous generations, even the most minimal changes had to be agreed upon with the account manager and required time for implementation).

This article covers the information about customising the Payment Page design and using different design options when working with the payment form of the 4th and 5th generations. It also describes how to transfer the styles already in use when you switch from the 4th generation Payment Page to the 5th generation.

Overview

Tools

When merchants work with Payment Page, they can use the standard design of the payment form, which is available by default. At the same time, when working with the payment form of the 4th and 5th generations, merchants can customise its appearance to meet the specific needs of their web services using the Payment Page Designer in Dashboard. There is a separate designer tool available for each Payment Page generation.

The following are the examples of the 4th generation Payment Page design.

And these are the examples of the 5th generation Payment Page design.

In order to use the Payment Page Designer, you need to have a Dashboard user account with the appropriate permissions (learn more). If you have any questions or suggestions regarding the use of the Payment Page Designer, contact your ecommpay account manager.

Capabilities

Working with the Payment Page design options can require different procedures:

If you need to make simple modifications within one project, you can use the single style setup.
If you need to fine-tune the design with various styles that determine the look and feel of the form within one or several projects, then you can configure multiple styles (in case of the 4th generation Payment Page, using different terminals, and in case of the 5th generation Payment Page, using different styles).

Each of these options is described in the sections that follow. Below you can find the table with the list of capabilities available for configuration of the Payment Page design in generation-specific versions of the Payment Page Designer.


Capabilities	Payment Page generation
Capabilities	4th	5th
Adding a logo (or any other header image)	+	+
Customising the placement of the logo	+	+
Adding a background colour or image to the payment information panel	−	+
Changing the colour of main elements	+	+
Setting the visibility of the payment information panel for different options of invoking the form	−	+
Adding a background colour or image to the payment form	−	+
Customising the design style of the payment form elements with the built-in CSS editor	−	+
Adding a background image that will be shown outside of the payment form when it is opened in a separate browser tab	+	−
Emulating the work of different pages of the payment form when different options of invoking the form are used	+	+

Notice: Keep in mind that when the Payment Page design is customised, the responsibility for the potential negative effect of the introduced changes on the conversion rate is placed on the merchant. Therefore, you should carefully prepare and analyse any changes and, if necessary, revert the design style to the tested basic options.

Transferring styles to the 5th generation

At the moment, there are several generations of the Payment Page design available for the clients of ecommpay. For newly onboarded clients, as a rule, we offer the 5th generation of the payment form design for use in their projects. For projects configured with the use of earlier Payment Page generations, there is a gradual process of transition to the payment form with the 5th generation design. If the merchant is ready to be upgraded, they are advised to contact the ecommpay technical support. Otherwise, they can wait till they are contacted by ecommpay and agree on the convenient timeframe for the upgrade.

If you are ready to start working with the 5th generation Payment Page, you should:

Agree on the transition roadmap with the ecommpay specialists.
If the standard design of the payment form is used in your projects, then you need to agree only on the timeline for testing and the actual upgrade.
If customised design styles are used in your projects, then you also need to agree on the following:
- If a specific project is configured to utilise one version of the customised design, which is also developed on the basis of the standard design, then you need to compare the form's appearance in the previous and the new iterations and address any issues that come up with the ecommpay specialists
- If a specific project is configured to utilise different versions of the customised design with the use of terminals, then you need to compare the form's appearance for each version in the previous and the new iterations and address any issues that come up with the ecommpay specialists.
  In addition, you need to coordinate and agree on mapping of the terminals identifiers (terminal_id) used for working with the 4th generation of the payment form design and the style identifiers (style_id) used for working with the 5th generation of the payment form design.
- If a specific project is configured to utilise other design versions (not developed on the basis of the standard design), you also need to coordinate further actions to be taken.
If testing was agreed upon as part of the transition roadmap, the ecommpay specialists will notify you when it is going to be available. Then you can test whether the 5th generation of the payment form design works with the use of the styles that you need and notify ecommpay that you are ready to go live with the upgraded design. If relevant, your web service can also notify your customers about the upcoming changes in the appearance of the payment form.

If you have any questions regarding the use of the 5th generation Payment Page, contact your ecommpay account manager and the ecommpay technical support.

Single style setup

Working with the 4th generation payment form

To configure a single style on the basis of the standard Payment Page design for a specific project, you should:

Open the designer in the Projects section.
In Dashboard, open the Projects section, select the project you need, and switch to the Payment Page Designer tab.
Create a design style by clicking .
To add a style, click on the right of the field that says Default Style, name the new style in the dialogue box that opens, and click Continue.
Configure design settings.
Use the tools located under the Payment Step drop-down list on the tools panel of the designer.
Figure 9. Designer interface: 1—tools panel; 2—form preview area
Preview the design of the payment form by emulating the Payment Page behaviour.
For this, emulate the Payment Page behaviour in different situations: use the Payment method and Payment Step drop-down lists to select various payment methods and pages of the payment form and switch between different Payment Page display modes with the corresponding buttons (Redirect, Popup, iFrame, and Mobile).
Apply design style settings by clicking Continue at the bottom of the tools panel and saving the new design style.
To achieve this:
1. Click Continue at the bottom of the tools panel.
2. Click Save Only (if you only need to save new style settings) or Save & Set Active (if you also need to apply the new style settings) in the dialogue box that opens.
3. Make sure you can see the notification that informs you that the design style has been saved (and applied to the selected project, if relevant) for this project.

Once the changes have been applied, the new design style will be used for all Payment Page sessions of the target project. You can further modify or switch it to a different one using these instructions.

Working with the 5th generation payment form

To configure a single style on the basis of the standard Payment Page design for a specific project, you should:

Open the designer in the Projects section.
In Dashboard, open the Projects section, select the project you need, and switch to the Payment Page Designer tab.
Create a design style by clicking .
To add a style, click in the top left corner, name the new style in the dialogue box that opens, and click Create.
Configure design settings.
Use the tools located on the tools panel on the left side of the designer.
Figure 10. Designer interface: 1—tools panel; 2—form preview area
Preview the design of the payment form by emulating the Payment Page behaviour.
For this, emulate the Payment Page behaviour in different situations: use the Preview layout drop-down list to select pages of the payment form and switch between different Payment Page display modes with the corresponding buttons (Redirect, Popup, iFrame, and Mobile).
Save or apply design style settings by clicking Save style at the top of the tools panel or Save and apply at the bottom.
To achieve this:
1. Click Save style at the top of the tools panel (if you only need to save new style settings) or Save and apply at the bottom of the tools panel (if you also need to apply the new style settings).
2. Make sure you can see the notification that informs you that the design style has been saved (and applied, if relevant) for this project.

Multiple styles setup

When you need to set up and use different design styles of the payment form for different scenarios within one or several projects, you can use the capabilities of configuring terminals, interface models, and styles. To do so effectively, you need to understand what the Payment Page design involves in case of different generations and what you can do with its separate elements.

Each version of the Payment Page design is based on the combination of an interface model and a style. The interface model specifies the composition, size, placement, and colours of various elements while the style can additionally determine the look of certain images and colours used on the form. Only one interface model and one style can be applied to the opening of the payment form at a time.

If simultaneous support of different design styles is needed for different situations, you can configure each version and specify it when invoking the payment form. If you are working with the 4th generation Payment Page, you can use terminals (and their identifiers—terminal_id) for this purpose, and with the 5th generation—styles (and their identifiers—style_id). Note that one terminal can be used for different projects while each style can be used for only one project in which it was created.

Overall, to configure multiple styles of the Payment Page design, the merchant can do the following:

Arrange and use the combination of projects and terminals that the merchant needs.
All actions to set up this combination in the payment platform are carried out by the ecommpay specialists in accordance with the merchant's requirements.
Coordinate the use of the necessary interface models for specific projects and, if relevant, terminals.
As a rule, the Payment Page design is based on the most recent version of the basic interface model developed by ecommpay (which is used as a standard design style). At the same time, it is possible to coordinate with the ecommpay account manager the use of other interface models for specific cases.
Create, set up, and apply required design styles to specific projects and, if relevant, terminals.
These capabilities are fully available when the merchant works with the most recent version of the basic interface model developed by ecommpay and can be partially or fully unavailable when the merchant works with other interface models. Working with design styles is described in the section that follows.

Working with design styles

Overview

You can work with the design styles of the 4th and 5th generation Payment Page using the generation-specific versions of the Payment Page Designer. Which version of the designer is available for specific projects depends on which generation of Payment Page is configured for those projects. Moreover, since modifying the design styles can significantly influence the user experience and payment processing, you can work with the Payment Page Designer only if you have a user account in Dashboard with the appropriate permissions (learn more).

To open the specific designer version, go to the Projects section of the Dashboard interface, select the project you need and switch to the Payment Page Designer tab. If you need to work with several design styles, you can open and use several designer versions in several browser tabs.

Warning: The Payment Page Designer does not support simultaneous work on the same design styles. Therefore, in order to prevent conflicts and the loss of unsaved changes, avoid situations when changes are made to the same style at the same time on different devices.

Working with the 4th generation payment form

Special aspects

If you work with more than one project or use terminals, then you may need to select specific projects and terminals using the Projects and Terminal drop-down lists on the tools panel (these drop-down lists are not shown if selection is unavailable).

If you work with more than one project or use terminals, then you may need to select specific projects and terminals first. You can do so when you open the designer, and also when you work with it, by using the Projects and Terminal drop-down lists on the tools panel. Keep in mind that if a certain style is applied to several projects (or terminals), its modification will apply all to of these projects (or terminals) as well.

Note: When selecting projects or terminals is not needed, the corresponding drop-down lists are not shown in the designer interface. At the same time, certain terminals can be unavailable in the designer, and certain terminals with custom interface models can be available to be selected, but unavailable to be changed. If you have any questions related to projects and terminals, contact the ecommpay technical support.

Adding a style

To add a design style:

Select the style whose settings need to be inherited in the Style drop-down list.
Click on the right of the selected style's name.
Name the new style in the dialogue box that opens.
Click Continue to confirm the creation of the new style.
Make sure that the designer interface shows the page of the created style and its name is specified in the Style drop-down list.

Making changes to the style

To introduce changes to a design style:

Select the style you need in the Style drop-down list .
Make changes using the tools located under the Payment Step drop-down list on the tools panel of the designer.
If necessary, preview the style to check that the introduced changes are accurate and consistent.
Save the style by clicking Continue and selecting one of the suggested options.
To achieve this:
1. Click Continue at the bottom of the tools panel.
2. Use one of the two saving options in the dialogue box that opens:
  - To save and apply the style, click Save & Set Active;
  - To save the style without applying the changes, click Save Only.
3. Make sure you can see the notification that the style has been saved.

If the same style is used for several terminals, then when the changes are saved for one terminal, these changes will be applied and displayed for other terminals as well.

To undo changes that have been made to the style, you can use one of the following options:

To undo all changes that were made but not saved since the most recent save, refresh the browser tab currently in use.
To undo all changes that were made to the style and revert it back to the default style settings, click the link Reset to default at the bottom of the tools panel and confirm the reset in the dialogue box that opens.

Previewing the style

To preview how the payment form is going to be displayed with the specific design style applied in various scenarios, select the style you need in the Style drop-down list and emulate the required Payment Page behaviour. For this, you can use:

Payment method drop-down list—to select a payment method.
Payment Step drop-down list—to select the page of the payment form.
Redirect, Popup, iFrame, and Mobile buttons—to switch between Payment Page display modes.
Specific page of the payment form—to check that the fields can be filled in as expected.

Keep in mind that not all payment methods and pages of the payment form can be available for the preview mode, while the Payment Page behaviour can be emulated only for certain elements on the pages that can be previewed.

Applying the style

To ensure that a certain style is used for the specific project or terminal, you should:

If necessary, select the project, terminal, and style from the corresponding drop-down lists.
Click Continue at the bottom of the tools panel.
Click Save & Set Active to apply the style.
Make sure you can see the notification that the style has been applied.

Note: When you need to apply one style to several terminals, repeat these steps for each terminal. If you select a terminal, and the required style is not available in the Style drop-down list, make sure that the same interface model is used for this terminal as for other terminals.

Deleting the style

To delete a design style, you should:

Select this style in the Style drop-down list.
Click on the right of the Style.
Confirm by clicking Delete in the dialogue box that opens.
Make sure you can see the notification that the style has been deleted.

Keep in mind that when you delete the style currently in use (which is indicated by the active sign next to the style's name), the Payment Page design will be reverted to default style which cannot be modified or deleted for all terminals the current style was applied to.

Working with the 5th generation payment form

Special aspects

If the you use more than one project of interaction with the payment platform, keep in mind the following special aspects of working with the Payment Page Designer:

A custom design style can be used only within one project.
To apply the same design style to different projects, you need to create and configure a style for each project individually.
The Payment Page Designer does not allow switching between projects in the process of configuration.
To modify design styles for specific projects, you have to open the designer for each project individually (via the Projects section).

Adding a style

To add a design style,

Click in the top left corner of the designer.
Name the new style in the dialogue box that opens and, if you need to apply the style when saving it, enable Apply after saving.
Confirm the creation of the new style by clicking Create.
Make sure that the designer interface shows the page of the created style and its name is specified in the Choose style drop-down list.

Making changes to the style

To introduce changes to a design style:

Select the style you need in the Choose style drop-down list .
Make changes using the tools located on the tools panel of the designer.
For instance, you can use the built-in CSS editor to fine-tune the design of individual elements of the payment form. To determine the names of HTML elements and their attributes, you can use the developer tools built into the browser. However, when configuring CSS properties, keep in mind that their support may vary across different browsers and their versions. Below is an example of adding a border to the payment information panel using the CSS editor.
```
.pp-info-subcontainer {
  border: 10px solid #ef6301;
}
```
If necessary, preview the style to check that the introduced changes are accurate and consistent.
Save or apply design style settings by clicking Save style at the top of the tools panel or Save and apply at the bottom.
To achieve this:
1. Use one of the two saving options listed in the dialogue box that opens:
  - To save the new style settings without applying—click Save style at the top of the tools panel.
  - To save and apply the new style settings—click Save and apply at the bottom of the tools panel.
2. Make sure you can see the notification that informs you that the design style has been saved.

To undo changes that have been made to the style, you can use one of the following options:

To undo all changes that were made but not saved since the most recent save, close the designer window by clicking Back to Dashboard in the top right corner or refresh the browser tab currently in use.
To undo all changes that were made to the style and revert it back to the default style settings, click the link Reset to defaults located under the drop-down list with all styles.
Note: When the style is being reset, you will not be asked to confirm it. Hence, if you need to cancel the reset, close the designer window without saving any changes that were made.

Previewing the style

To preview how the payment form is going to be displayed with the specific design style applied in various scenarios, select the style you need in the Choose style drop-down list and emulate the required Payment Page behaviour. For this, you can use:

Preview layout drop-down list—to select the page of the payment form.
Redirect, Popup, iFrame, and Mobile buttons—to switch between the Payment Page display modes.
Specific page of the payment form—to check that the fields can be filled in as expected.

Applying the style

To ensure that a certain style is used for the specific project, you should:

Select the style you need from the drop-down list.
Click Save and apply at the bottom of the tools panel.
Make sure you can see the notification that the style has been applied.

Note: When you need to use multiple styles within one project in addition to the style that is set as default, each request for opening Payment Page with an additional style must contain the identifier of this style in the style_id parameter. The style identifier is a number and is put on the right of the style name after the # character, for example Custom_red_style #6123.

Deleting the style

To delete a design style, you should:

Select this style in the Choose style drop-down list.
Click on the right of the style name.
Confirm by clicking Delete in the dialogue box that opens.
Make sure you can see the notification that the style has been deleted.

Keep in mind that when you delete the style currently in use as default for the specific project (which is indicated by the current sign next to the style's name), the next design style on the list will be set as default. If there are no other styles on the list, the Payment Page design will be reverted to the standard style. In this case, if you need to set another style as default, you need to apply it for this project.