Skip to content

Conversation

@Mayisha
Copy link
Contributor

@Mayisha Mayisha commented Jun 4, 2024

Fixes #2993

In legacy experience, merchants can customize the title and description of the payment methods and they are also reflected on the checkout page. This feature was missing from the new checkout experience. In this PR, I have added the ability to customize the title and description of the payment methods when UPE is enabled.

Changes proposed in this Pull Request:

  • In legacy experience, the settings for each method are saved in their own individual options, like woocommerce_stripe_ideal_settings, woocommerce_stripe_eps_settings etc.
  • For UPE (new checkout experience) I am using the same option to keep the title and description of a payment method. By using the same option, we can ensure the data persists when a merchant moves to the new checkout experience.

Testing instructions

  • Go to the Stripe settings page and disable the legacy experience (enable UPE).
  • Check the payment methods list. in develop branch, there is no Customize button beside the payment methods. In this branch, you should see a Customize button beside each payment method.
  • Click the Customize button of a payment method and confirm that it has a title and description populated which was saved as part of the legacy experience. (This is true for the payment method existing in legacy experience, not for the new methods like klarna or afterpay)
  • Change the title and description of a method and click Save changes. Reload the page and confirm that the changes persist.

settings

  • Enable a few payment methods.
  • As a shopper add a product to the cart and go to the checkout page. Confirm that the payment methods are showing the saved title and description. Check on both shortcode and block checkout pages.

Shortcode
sc title desc

Block

block title desc

@Mayisha Mayisha marked this pull request as draft June 4, 2024 17:32
@Mayisha Mayisha marked this pull request as ready for review June 5, 2024 21:29
@Mayisha Mayisha requested review from a team and diegocurbelo and removed request for a team June 5, 2024 21:30
Copy link
Member

@diegocurbelo diegocurbelo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for working on this @Mayisha.

The code looks good, I think we should check if UPE is enabled server-side it would make the code cleaner.

It works great in the new checkout experience:
image

It also works with empty titles/description:
image copy

The only detail is the position of the customize button with payment methods with short descriptions like Klarna... we need to align the button to the right.

Screenshot 2024-06-06 at 4 23 35 PM

@Mayisha
Copy link
Contributor Author

Mayisha commented Jun 7, 2024

Thanks @diegocurbelo 🚀

I have fixed the button in 0efdc2d and now I am checking the UPE status on the server side which is fixed in 048c2f4.

@Mayisha Mayisha requested a review from diegocurbelo June 7, 2024 15:29
Copy link
Member

@diegocurbelo diegocurbelo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for making the changes @Mayisha!

Looks great now! 🚢

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[UPE] Allow customizing the label and description of the payment methods

3 participants