feat(vue-starter-template): checkout flow

[Maciej D (mdanilowicz)]

closes #2699

This pull request improves the registration and checkout experience by ensuring the cart is refreshed after user registration, aligning it with login and logout behaviors. It also enhances accessibility and error handling in the checkout flow, and updates button labeling for better user feedback during guest registration. Below are the most important changes:

Cart Refresh and Registration Logic:

• The useUser().register() method now calls refreshCart() after updating the session context, ensuring cart totals reflect the correct tax rates, shipping surcharges, and customer-group prices immediately after registration. [1] [2]
• Corresponding unit tests updated to verify both refreshSessionContext and refreshCart are called after registration.

Checkout Flow and Error Handling:

• The guest registration step in the checkout process was refactored: form validation is more granular (separating email and billing address), error handling is improved with persistent error notifications, and focus management ensures accessibility by focusing the first invalid field or restoring focus after errors. [1] [2] [3] [4]
• The guest registration button now shows a loading state and dynamic label while registration is processing, providing better feedback to users. [1] [2] [3] [4] [5]

Accessibility Improvements:

• The InputField.vue component now associates error messages with inputs using aria-describedby and aria-invalid, improving screen reader support for form validation errors. [1] [2]

UI and Notification Enhancements:

• The checkout layout now includes a LayoutNotifications component to display notifications to users.

Minor Fixes:

• Conditional rendering in the CustomerAddressChosen.vue component ensures the country name is only displayed if available.
• Code cleanup in useApiErrorsResolver.ts removes an unused variable.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
frontends-starter-template-extended	Ready	Preview	Sep 10, 2026 1:18pm UTC
frontends-vue-starter-template	Ready	Preview	Sep 10, 2026 1:18pm UTC

[Copilot]

🟡 Changes recommended

The checkout registration flow still hardcodes guest: true (so “Create customer account” remains broken) and InputField.vue contains malformed <span> markup that will break template parsing.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

This PR targets the Shopware Frontends monorepo by improving the vue-starter-template checkout registration UX (validation, notifications, and a loading button label) and aligning useUser().register() behavior with other auth flows by refreshing the cart after registration.

Changes:

• Update useUser().register() to refresh the cart after refreshing the session context, and adjust unit tests + changeset accordingly.
• Refactor the checkout guest-registration step to validate email/billing address separately, improve error handling, and add a guest-registration loading label/state.
• Improve form-field accessibility by wiring input errors via aria-invalid / aria-describedby, and surface notifications in the checkout layout.

File summaries

File	Description
templates/vue-starter-template/i18n/pl-PL/checkout.json	Renames/introduces guest registration button/label translations.
templates/vue-starter-template/i18n/en-GB/checkout.json	Renames/introduces guest registration button/label translations.
templates/vue-starter-template/i18n/de-DE/checkout.json	Renames/introduces guest registration button/label translations.
templates/vue-starter-template/app/pages/checkout/index.vue	Refactors guest registration + adds focus/error handling and button loading state; adds place-order error handling hooks.
templates/vue-starter-template/app/layouts/checkout.vue	Adds notifications rendering to the checkout layout.
templates/vue-starter-template/app/composables/useApiErrorsResolver.ts	Removes unused variable in API error handling.
templates/vue-starter-template/app/components/form/InputField.vue	Adds ARIA wiring for validation errors (but currently introduces malformed template markup).
templates/vue-starter-template/app/components/checkout/CustomerAddressChosen.vue	Avoids rendering country name when unavailable.
packages/composables/src/useUser/useUser.ts	Refreshes cart after registration (currently not awaited).
packages/composables/src/useUser/useUser.test.ts	Updates tests to assert session/cart refresh calls after register.
.changeset/lucky-carrots-refresh.md	Adds changeset documenting the cart refresh behavior change in @shopware/composables.

Review details

Suppressed comments (1)

templates/vue-starter-template/app/pages/checkout/index.vue:124

• This registration payload still hardcodes guest: true, so even when the shopper chooses “Create customer account” and enters a password, the request will create a guest customer and discard the password (the original bug from #2699). This also means password validation/account-mode switching can't be enforced here.

      email: customerBaseInfo.value.email,
      password: customerBaseInfo.value.password,
      guest: true,
      billingAddress: {

• Files reviewed: 11/11 changed files
• Comments generated: 2
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[Patryk Tomczyk (patzick)]

Changes requested. CI checks reported by GitHub are passing; I did not run local checks.

[cursor]

Stale comment

Security review

No medium, high, or critical vulnerabilities in this update.

Reviewed the checkout registration/place-order paths, useUser().register() cart refresh, API error → notification rendering, and InputField error markup. Attacker-controlled form and API error strings are interpolated with Vue text bindings ({{ }}); notifications have no v-html. refreshCart() after registration uses the current session context. No new dependencies or secret leakage.

There were no prior automation security-finding threads to re-validate. The hardcoded guest: true payload is a functional gap already tracked on this PR, not an authz bypass.

  

_{Sent by Cursor Automation: Review pull requests for exploitable security issues and flag only validated findings before merge}

[cursor]

Security review

No medium, high, or critical vulnerabilities in this update.

Re-reviewed after feat: changes after CR (2b737a57). Prior automation run had no finding threads. Traced checkout register/place-order, useUser().register() cart refresh, API error → notification rendering, and InputField errors. Form and API error strings use Vue text bindings ({{ }}); notifications have no v-html. refreshCart() after registration stays on the current session. guest: !createAccount.value is the intended account-creation path, not an authz bypass. No new dependencies or secret leakage.

  

_{Sent by Cursor Automation: Review pull requests for exploitable security issues and flag only validated findings before merge}

[Patryk Tomczyk (patzick)]

Rechecked current head 2b737a5. The previous registration blocker is fixed: checkout now sends guest: !createAccount.value and validates the password only in account mode. I am not carrying forward the InputField tag-formatting note; CI accepts it and it is valid tag-closing whitespace. GitHub CI checks are passing; no local checks run.