Add title, description and gatewayId to the express payment method

[alexflorisca]

This PR ads title, description and gatewayId props to express payment methods to be displayed in the editor. These are used to display the available express payment methods to a merchant, once they click on the express checkout block.

This is parallel work with woocommerce/woocommerce#50791 and the feature/express-payment-improvements branch should be used to test. However this should also work with the current release of WC, and can be safely merged and released before the work in Core is released.

If these props are no provided, the name is used instead and the list will look like this:

After this PR, the list should look like this:

The link for the Square payment method should take you to the Square payment settings.

Testing instructions

1. Visit the checkout page in the editor
2. Click on the express payment block
3. See on the right hand sidebar that the list of Express Payment methods shows, and that the Square method have a title, description and the link goes to the Square payment settings page.
4. Smoke test with current WC version and make sure the express method still works as expected.

Changelog entry

Add - Title, Description, and Gateway ID props to the express payment method.

[qasumitbagthariya]

QA Update ⚠️

---

@alexflorisca Thanks for the PR

I have verified the PR on the add/title-description-gatewayid branch and encountered an issue. The Express Checkout button is not appearing on the frontend as expected.

Testing Environment

• WordPress: 6.6.1
• Theme: Twenty Twenty-Four 1.2
• WooCommerce - feature/express-payment-improvements branch
• PHP: 8.0.30
• Web Server: Nginx 1.20.2
• Browser: Chrome
• OS: macOS Ventura 13.3
• Branch: add/title-description-gaetwayid

[alexflorisca]

@qasumitbagthariya Hmm, could you double check this or narrow it down a bit? Is it appearing with the latest version of WC? Is it appearing with the feature branch in Woo and with trunk checked out in WooCommerce Square?

I can't reproduce this, and there's no code changes that should interfere with the rendering of the button here. If you could take another look and narrow it down a little, I would very much appreciate it 🙏

[qasumitbagthariya]

@alexflorisca

I tried to test the latest WooCommerce Version 9.2.3 with PR but Can't find the latest changes. Can you please cross check from your end?

Testing Environment

• WordPress: 6.6.1
• Theme: Twenty Twenty-Four 1.2
• WooCommerce - 9.2.3
• PHP: 8.0.30
• Web Server: Nginx 1.20.2
• Browser: Chrome
• OS: macOS Ventura 13.3
• Branch: add/title-description-gaetwayid

[alexflorisca]

Hi @qasumitbagthariya, the work hasn't been released yet so it won't be on WC 9.2.3 yet. I suggested you check with this version to see if there is something else going on other than this branch.

Can you please confirm:

• Does the same problem exist when you test with WC 9.2.3?
• Does the same problem exist when you test with the trunk version of WooCommerce Square?
• Is there anything in your local environment that could be causing this?

I've tried to reproduce this locally but I can't, the square button shows for me. If the problem still exists after you've confirmed the above, can you share more details about your setup? Have you changed any square settings? Enabled any flags?

[qasumitbagthariya]

@alexflorisca

I meant, I'm unable to see the changes from this PR with WooCommerce versions 9.2.3, Nightly, and 9.3.0-rc1.

[alexflorisca]

I meant, I'm unable to see the changes from this PR with WooCommerce versions 9.2.3, Nightly, and 9.3.0-rc1.

Yes, as I've said, these changes won't be in any WC release yet, it lives only on the feature/express-payment-improvements branch. Please see my last comment, it would be great if you could narrow down this issue 🙏

[qasumitbagthariya]

QA Update ✅

---

I have verified this PR in the add/title-description-gaetwayid branch which has been fixed and is functioning as intended.

I tested the following on this branch:

• Ttitle, description of square express payment method
• Check out with google pay

Testing Environment

• WordPress: 6.6.2
• Theme: Twenty Twenty-Four 1.2
• WooCommerce - 9.4.0-dev [Feature] Express Checkout Improvements woocommerce#50791
• PHP: 8.0.30
• Web Server: Nginx 1.20.2
• Browser: Chrome
• OS: macOS Ventura 13.3
• Branch: add/title-description-gaetwayid

Screen.Recording.2024-09-16.at.10.55.58.PM.mov

Steps to Test- As mentioned in the PR description.
Test Results - It is working as expected.
Functional Demo / Screencast -
Special Notes - Ready for code review (Woo)
Testing Document status:
Cases related to this Issue/PR are added to the Critical Flow Wiki pages:

• Yes
• Not Required/Applicable for this PR

---

[vikrampm1]

@diegocurbelo this PR is ready for your review!

[diegocurbelo]

Code changes look good to me, and it tests well 🚢

[alexflorisca]

This iready to merge

[qasumitbagthariya]

@alexflorisca

Specifically in your PR description screenshot of the content inside "Express payment method. It looks broken and appears to include some unexpected data.

Could you clarify why this is showing up on your end? Is this related to testing data or a specific setup during development? Additionally, could you confirm if this is something users might encounter in a real environment?