Add payment methods list box in settings screen

[Ferdev]

Implement in the new WooCommerce Payments settings screen, a new info box with a list of all the supported payment methods: Credit card, SEPA, GiroPay and Sofort.

Screen elements

Header

• Box title: Payment methods
• Box description: Increase your store’s conversion by offering your customers preferred and convenient payment methods. Drag and drop to reorder on checkout.

Body

First section

• Between horizontal separators, a button too add new payment methods. Copy: Add payment method
• Icons representing additional payment methods.
• Should be hidden if all payment methods are already added to the list.

Second section

• List with all added payment methods. For each payment method:
  • Handle to sort the payment method in the list. Its functionality will be implemented in another issue.
  • Payment method's icon.
  • Payment method's name.
  • Payment method's description, below the name.
  • Link to edit the payment method info. Copy: Manage.
  • Button to remove the payment method.

Payment methods names & descriptions

• Name: Credit card / debit card - Description: Let your customers pay with major credit and debit cards without leaving your store.
• Name: giropay - Description: Expand your business with giropay — Germany’s second most popular payment system.
• Name: Sofort - Description: Accept secure bank transfers from Austria, Belgium, Germany, Italy, and Netherlands.
• Name: Direct debit payment - Description: Reach 500 million customers and over 20 million businesses across the European Union.

Screenshot

[waclawjacek]

I have extracted smaller issues from this one, each implementing a standalone (where possible) bit of work:

• The list (<ul> element) front-end. Implement payment method list front-end #1524 The list is now being implemented as part of this issue.
  • Sorting the list. Implement sorting mechanism for the payments method list in settings #1504.
  • The Manage button. Implement empty payment method edit screen #1507
• The modal displayed after clicking Add payment method. Add "Add payment methods" modal #1554.
  • The checkbox list in the modal. Add multi-checkbox component for use in "Add payment methods" modal #1552

After these are implemented, this issue should focus on just adding the Payment methods card and linking the above together.

Implementing the Express checkout card might be easier once all that is in place so for now, I am not extracting smaller issues from that one.

[waclawjacek]

Mobile design screenshot: