Payment methods

Description

In this page there are show payment methods and their modules.

Payment Methods User Interface

QA

Link to the test

Common components

• E-commerce logo.

• PrestaShop version number.

• Quick access dropdown.

• Search input - Forms input with dropdown UI kit.

• Bell icon (todo link)

• Account icon.

• Shop switcher.

• Breadcrumbs navigation - Breadcrumb UI kit.

• Heading of the page - Headings UI kit.

• Help button - Buttons outline UI kit.

Behaviors description

Title of Active payment behavior

It contains title and credit card icon.

Payment module behavior

Payment modules in this page is shown with these elements:

• Module logo - each module has its own logo on top of module block.

• Module name - is next to module logo written as black color text.

• Module version number and author - they are in grey color text on the right side from module name.

• Short module description - is written in grey color text under module name, version number and author.

• Configure button.

Configure button behavior

It is outlined CTA button (Buttons outline UI kit), once clicked redirects to that module settings page. When hover mouse pointer on it, button color changes. Cash on delivery (COD) module does not have Configure button, this module only can be enabled or disabled in Modules manager page.

Multistores functionality

Multistore dependent page.

Payment modules can be configured only in each multistore shop separately. When page opened in All shops context, appear alert notification (Alerts basics UI kit): Note that this page is available in a single shop context only. Switch context to work on it.