Skip to content

Make Place order button content dynamic based upon the payment method selected #10552

@brettshumaker

Description

@brettshumaker

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

  1. Enable various payment methods from WooPayments.
  2. Enable one payment method that does not come from WooPayments.
  3. Add products to cart.
  4. Visit blocks checkout.
  5. 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.
  6. 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

No one assigned

    Labels

    focus: checkout paymentsneeds demoPR should provide screenshot or gif of changes to be reviewed by product and designneeds designThe issue requires design input/work from a designer.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions