-
Notifications
You must be signed in to change notification settings - Fork 73
Open
Labels
focus: checkout paymentsneeds demoPR should provide screenshot or gif of changes to be reviewed by product and designPR should provide screenshot or gif of changes to be reviewed by product and designneeds designThe issue requires design input/work from a designer.The issue requires design input/work from a designer.
Description
Description
We would like to make the content of the "Place order" button at checkout dynamic depending on the payment method selected. This issue is only for the blocks checkout - the legacy checkout will be done in a separate issue.
Acceptance criteria
- Payment method title
- E.g. "Pay with {{ payment method title }}"
- Payment method icon
- For credit cards, the more card-related information that we are able to display, the better. This may have to be delayed until after payment information has been entered, but we should try to use the EPM button display as a precendent here.
- When a WooPayments payment method is not selected, the button should return to displaying its default text.
Designs
Needs design
Testing instructions
- Enable various payment methods from WooPayments.
- Enable one payment method that does not come from WooPayments.
- Add products to cart.
Visit blocks checkout.Click on the various available payment methods. If the payment method is from WooPayments, the "Place Order" button should show the correct button label from the design.When a non-WooPayments payment method is selected, the "Place Order" button goes back to the default label.
Dev notes
This feature was spiked in #10384 and some example code was given there. You do not need to use that code as-written but it could be a good starting point. The placeOrderButtonLabel checkout filter is certainly the filter to use to update the label text and provides the default label text as an argument that gets passed into the filter callback function.
Metadata
Metadata
Assignees
Labels
focus: checkout paymentsneeds demoPR should provide screenshot or gif of changes to be reviewed by product and designPR should provide screenshot or gif of changes to be reviewed by product and designneeds designThe issue requires design input/work from a designer.The issue requires design input/work from a designer.