The payment method list asks the customer to choose how they want to pay for their order. It offers a list of selectable options.
Checkout page billing step (by default)
It is possible to have 0 available payment methods in some rare circumstances, such as a misconfiguration. Most of the time, there will be at least one method to select from.
<aside> ℹ️ Usually, styling this element takes from-to**: 2-4h**
</aside>
Designs should represent each method selected since there can be expandable content with inputs for card details, or purchase order fields.
Each method should represent the selected/default state and additionally if the place order button has to be disabled until the payment step is not finalized it should be logically represented in the designs.
The CheckoutPayments component is responsible for rendering the payment methods.
The CheckoutPayment component is responsible for rendering each payment method.
Each payment is usually rendered as a button with a disabled checkbox. It can be changed to a radio input just by changing the field type on the render() method to FIELD_TYPE.radio.
The input is disabled by default in order to skip direct clicks on the checkbox/radio and handle clicks on the entire button instead. Is best to avoid changing this behavior. Try keeping it as default and style the input as disabled.
<aside> ➡️ Don’t forget to implement the hover effects and animations.
</aside>