Checkout block

[pmcpinto]

User Story

As a merchant
I want a block that allows adding an optimized checkout layout
So I can improve my checkout conversion rate and quickly change some of the cart settings

Acceptance Criteria

Restrictions

• The block is only available in the Checkout page (see Needs Decision: Should we allow cart/checkout blocks on specific pages only (and next steps). #1305) It was decided we'd allow the block to be used alongside core checkout on a different page.

Tooltip

• When the user selects the block in the block picker he should see a notification drawing his attention to the block settings (see Add api to draw attention to block settings on selecting Block #1469)

Payments

• The first version of the checkout block is only going to support Paypal and Stripe (Create Payment Methods for Stripe #1471, Create Payment Method integrations for Paypal #1473)
• The checkout displays an express checkout section If the store has a payment gateway connected with express checkout (Add payment method api and components to checkout steps #1349)
• If the store doesn't have a payment gateway installed, the user should see a message in the Payment options layout pushing the user to install and activate a payment method (Add placeholder for when no payment methods are installed and available. #1478)

Displaying products

• The checkout layout it's displayed with an existing product (Wire up checkout to display with an existing or sample product #1479) (first iteration will be sample product only which is implemented) Decision was made to use sample data.
• If the user doesn't have a product in the store he should see the checkout layout with a sample product (Wire up checkout to display with an existing or sample product #1479)

Shipping

• If the store doesn't have any shipping option configured, the user should see a message in the Shipping Options layout pushing the user to configure the shipping options (Add Checkout Form components #1351)
• The user can enable/disable using the shipping address as the billing address. Using the shipping address as the billing address is enabled by default (currently we don't provide this option on WooCommerce Settings > Shipping > Shipping options) (Checkout Block: Shipping options for block #1485)
• If the user disables it – we add a new section to the form for a custom billing address – which inherits the same fields (with settings) as the Shipping address above it (Checkout Block: Shipping options for block #1485)

Address 2 form (see #1480 for all the below items)

• The user can show/hide the Address 2 input field
• The Address 2 input field should be on by default
• The user can choose to make Address 2 a required field by selecting the checkbox (this removes the optional text on the label). The required field option should be off by default Decision made to make this optional and based on locale rather than user setting.

Company name (see #1481 for all the below items)

• The user can show/hide the Company Name input field
• The Company Name input field should be off by default
• The user can choose to make Company Name a required field by selecting the checkbox (this removes the optional text on the label). The required field option should be off by default

Phone number (see #1482 for all the below items)

• The user can show/hide the Phone Number input field
• The Phone Number input field should be off by default
• The user can choose to make Phone Number a required field by selecting the checkbox (this removes the optional text on the label). The required field option should be off by default

Order notes (it can be backlogged if we don't have enough time in this cycle) (see #1483 for the below items. I've (@nerrad) also backlogged this)

• The user can enable/disable having order notes in the checkout. Having an order notes field is enabled by default.
• Order notes are always optional and if enabled the user only sees a checkbox in the block layout. When the order notes are disabled the checkbox is removed from the block layout.

Coupons (See #1411 - components will be re-used for checkout)

• If the user has the coupons' usage disabled on WC Settings we hide it in the checkout layout (both on the block editor and in the front-end)

Legal (see #1484 for below items)

• When the user has set a Terms & Condition page in the Customizer or in the WC Settings, he should see the T&C link below the Place Order button
• When the user has set a Privacy Policy page in the Customizer he should see the PP link below the Place Order button

Feedback

• The user can give feedback about the block by clicking in the "Give feedback" section. Destination tbd (done in Add Feedback Prompt in Cart & Checkout blocks sidebar #1356)

Front-end behavior

• The order summary should be automatically updated when the shopper changes the shipping option (Checkout (frontend context): Wire up order summary to data. #1486)
• The order summary should be automatically updated when the shopper adds a valid coupon (Checkout (frontend context): Wire up order summary to data. #1486)
• The shipping options and order summary should be automatically updated when the shopper changes his shipping address (Checkout (frontend context): Wire up order summary to data. #1486)
• A shopper can select to use the shipping address as the billing address by selecting the checkbox (if the user has preferred to give their customer the option to add a custom billing address by default) (Checkout Block: Shipping options for block #1485)
• The shopper can switch between two payment gateways by clicking in the tabs with the logos (only happens when the store has Stripe and Paypal) (Add payment method api and components to checkout steps #1349)

Links

MT
Final mockups desktop
Final mockups mobile
Validation Error Indicators for fields: figma

[issue-label-bot]

Issue-Label Bot is automatically applying the label type: feature request to this issue, with a confidence of 0.94. Please mark this comment with 👍 or 👎 to give our bot feedback!

Links: app homepage, dashboard and code for this bot.

[pmcpinto]

@nerrad the acceptance criteria was difficult to digest, so I broke it down in different sections. I'm going to do the same for the Cart epic.

[nerrad]

You'll note that as of this post there are a number of items not checked off. This is because the user stories required a lot of supporting work as a part of completing them. I've gone through and linked to issues that will:

• Ensure the user story is completed (there may be pulls in progress or done that have been completed, if that's the case the issue will be closed)
• Can be used to track what is left to do (and includes the estimate in our release chart planning).
• Can be used to identify what we might want to tweak/modify for the initial iteration if we need to reduce scope to meet our cycle targets.

[nerrad]

The release of 2.6.0 fulfills the purpose of this epic (initial MVP of checkout block).