Customisation

When merchants work with Payment Page, they can use the standard design of the payment form developed and maintained by the ecommpay specialists with the consideration of the most recent requirements and trends of the electronic payments industry. At the same time, each merchant can customise the appearance of the payment form to meet the specific needs of their projects using the Payment Page Designer in Dashboard.

Figure: Standard design

Figure: Customised design (1)

Figure: Customised design (2)

Figure: Designer interface

In order to use the Payment Page Designer, you need to have a Dashboard user account with the permissions that allow you to configure projects' settings.

• If you need to make simple modifications within one project, then 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 using different terminals for different cases.

Each of these options is described in the sections that follow. When using either one of them, you can:

• Add a logo or any other header image and customise its placement on the form.
• Change colours of the main elements on the form.
• Add a background image that will be used when the form is opened in a separate browser tab.

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, any changes should be accurately prepared and analysed and, if necessary, reverted to the tested basic options.

If you have any questions or suggestions regarding the use of the Payment Page Designer, contact your ecommpay account manager.

To configure a single style of the Payment Page design for one project, you should:

1. Open the designer.

   In Dashboard, open the Projects section, select the project you need, and switch to the Payment Page Designer tab.

2. Create a design style.

   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.

3. Configure design settings.

   Use the tools located under the Payment stages drop-down list on the tools panel of the designer.

   Figure: Designer interface: 1—tools panel; 2—form preview area

   
   
   

4. Preview the design of the payment form.

   For this, emulate the Payment Page behaviour in different situations: use the Payment methods and Payment stages 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).

5. Apply design style settings.

   To achieve this:

   1. Click Continue at the bottom of the tools panel.
   2. Click Save & Set Active 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.

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.

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 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, the corresponding interface models and styles should be applied to the required number of projects and terminals within separate projects.

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. To use the project and the terminal that the merchant needs in specific situations, the merchant has to provide the IDs of those in the requests to open Payment Page (in the project_id and terminal_id parameters respectively).

• Coordinate the use of the necessary interface models for specific projects and terminals.

  As a rule, the Payment Page design is based on the most recent version of the basic interface model developed by ecommpay. At the same time, it is possible to coordinate with the ecommpay account manager the use of other interface models for specific projects and terminals.

• Create, set up, and apply required design styles to specific projects and 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 following section.

Overview

You can add, change, apply, and delete styles of the Payment Page design using the Payment Page Designer. 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 permissions to configure projects' settings.

To open the designer, 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 use the designer in several browser tabs.

If you work with more than one project or use terminals, then you may need to select projects and terminals that you need. 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), then its modification will apply all to of these projects (or terminals) as well.

Adding a style

To add a design style:

1. Select the style whose settings need to be inherited in the Style drop-down list.
2. Click on the right of the selected style's name.
3. Name the new style in the dialogue box that opens.
4. Click Continue to confirm the creation of the new style.
5. 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:

1. Select the style you need in the Style drop-down list .
2. Make changes using the tools located under the Payment stages drop-down list on the tools panel of the designer.
3. If necessary, preview the style to check that the introduced changes are accurate and consistent.
4. Save the style.

   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 methods drop-down list—to select a payment method.
• Payment stages drop-down list—to select the page of the payment form.
• Redirect, Popup, iFrame, amd Mobile buttons—to switch between Payment Page display modes.
• Page of the payment form that is being previewed—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 make sure that a certain style is used for the specific project or terminal, you should:

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

Deleting the style

To delete a design style, you should:

1. Select this style in the Style drop-down list.
2. Click on the right of the Style.
3. Confirm by clicking Delete in the dialogue box that opens.
4. 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 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.