Fixed payment method sort order not respected when added to checkout after initial render

[BastiaanvdT]

Description (*)

Magento_Checkout/js/view/payment/list.js#createRenderer inserts newly added payment method renderers via layout() without specifying a sortOrder on the node. Magento_Ui's layout.addChild() uses child.sortOrder as the insertion position in the parent's internal _elems collection; without it, the position defaults to -1 (append at the end), regardless of the method's actual order in the paymentMethods() list.

This means a payment method whose availability depends on dynamic conditions (e.g. restricted to specific countries, so it's added to paymentMethods() only after a shipping address change) always renders last, even if its configured sort order says otherwise.

The fix passes the method's index in the current paymentMethods() list as sortOrder on the renderer node, so Magento_Ui's existing ordered-insertion mechanism (the same one used for all statically XML-declared children) places it correctly — no custom sorting/reordering logic needed.

Changed files:

• app/code/Magento/Checkout/view/frontend/web/js/view/payment/list.js

Related Pull Requests

None.

Fixed Issues (if relevant)

1. Fixes Payment method renderer ignores sort order when added to checkout after initial page load #41127

Manual testing scenarios (*)

1. Configure two offline payment methods with different Sort Order values, one restricted to a specific country (see linked issue for exact steps).
2. Start checkout with a country where only the non-restricted method is available.
3. Change the shipping country so the second method becomes available.
4. Verify the second method is inserted in the position matching its configured sort order, not appended after all other methods.
5. Regression check: reload checkout with both methods available from the start — order must remain unchanged.
6. Regression check: remove a method (e.g. by changing country back) and re-add it — order must still be correct.

Contribution checklist (*)

• Pull request has a meaningful description of its purpose
• All commits are accompanied by meaningful commit messages
• All new or changed code is covered with unit/integration tests (if applicable)
• README.md files for modified modules are updated and included in the pull request if any README.md predefined sections require an update
• All automated tests passed successfully (all builds are green)

[m2-assistant]

Hi @BastiaanvdT. Thank you for your contribution!
Here are some useful tips on how you can test your changes using Magento test environment.
❗ Automated tests can be triggered manually with an appropriate comment:

• @magento run all tests - run or re-run all required tests against the PR changes
• @magento run <test-build(s)> - run or re-run specific test build(s)
  For example: @magento run Unit Tests

<test-build(s)> is a comma-separated list of build names.

Allowed build names are:

1. Database Compare
2. Functional Tests CE
3. Functional Tests EE
4. Functional Tests B2B
5. Integration Tests
6. Magento Health Index
7. Sample Data Tests CE
8. Sample Data Tests EE
9. Sample Data Tests B2B
10. Static Tests
11. Unit Tests
12. WebAPI Tests
13. Semantic Version Checker

You can find more information about the builds here
ℹ️ Run only required test builds during development. Run all test builds before sending your pull request for review.

---

For more details, review the Code Contributions documentation.
Join Magento Community Engineering Slack and ask your questions in #github channel.

[BastiaanvdT]

@magento run all tests

[BastiaanvdT]

@magento run Functional Tests CE, Functional Tests B2B, Functional Tests EE

[BastiaanvdT]

@engcom-Bravo Kindly review this PR as all tests are completed and functional tests fails are not related to this PR