Add ach payment method

[pbennett1-godaddy]

Summary

Add ACH Payment Method, Tips in Totals, and Checkout Bug Fixes

Summary

Adds ACH (bank account) as a new payment method for GoDaddy Payments, includes tips in the displayed order total, rewrites the custom tip input for better multi-currency UX, and fixes several checkout
bugs.

Packages affected: @godaddy/react (patch), @godaddy/localizations (patch)

────────────────────────────────────────────────────────────────────────────────

🆕 ACH Payment Method

Adds full support for ACH (bank account) payments via GoDaddy Payments:

• New components:
  • GoDaddyACHForm — Collect iframe for bank account input (account holder name/type, routing number, account number) with custom CSS matching the checkout theme
  • ACHCheckoutButton — submit button that triggers nonce collection and form validation
• New provider: PoyntACHCollectProvider — dedicated React context for ACH collect instance and nonce loading state, separate from the credit card collect provider
• Payment registry: ACH registered in lazyPaymentComponentRegistry with lazy-loaded form and button components
• Payment form UI: Added Landmark icon and label/description resolution for the ACH tab
• Conditional wiring: ConditionalPaymentProviders wraps children in the ACH provider only when GoDaddy Payments is configured and session.paymentMethods.ach.processor === 'godaddy'
• GraphQL: Updated CreateCheckoutSessionMutation, GetCheckoutSessionQuery, and the introspection schema to include ach { processor, checkoutTypes }
• Types: Added PaymentMethodType.ACH = 'ach'
• Example: Next.js example app updated with ach and express payment method config

💰 Tips Included in Total

The displayed order total now includes the tip amount (total + tip) so customers see the true amount they'll be charged.

✏️ Custom Tip Input Rewrite

Replaced with a polished currency input using the "format on blur" pattern (same UX as Stripe, Square, Shopify):

• While focused: raw text editing with sanitization (digits + single decimal only); intermediate states like "10." or "" preserved for natural editing
• On blur: parses input, converts to minor units, syncs to form state, and reformats display (e.g. "10.5" → "10.50")
• Debounced sync: after 1.5s of inactivity while focused, form state and totals update automatically
• Multi-currency: respects per-currency precision (0 decimals for JPY/KRW, 3 for KWD/BHD, etc.) and symbol placement (prefix $ vs suffix €)
• convertMajorToMinorUnits hardened: now returns 0 for NaN, negative, or otherwise invalid input
• Responsive: tip button grids stack on small screens (grid-cols-1 sm:grid-cols-3)

🐛 Bug Fixes

• $0 line items: Changed item.originalPrice && → item.originalPrice != null && so items with a 0 original price correctly render the price column instead of being falsy-skipped
• Local pickup day rollover: Added a midnight overflow guard to break time slot generation when slots roll past the selected date, preventing infinite loops or incorrect slots
• Duplicate DOM IDs: Express checkout, Paze, and credit card collect components now use React useId() to generate unique element IDs, preventing conflicts when multiple payment components mount on the
  same page

🌐 Localizations

• Added ach payment method name ("Bank Account" / localized equivalents) and description across all 20 locales
• Added AUTHORIZATION_FAILED error message ("Failed to authorize payment" / localized equivalents) across all 20 locales

Changeset

• Changeset added (docs)

Test Plan

[changeset-bot]

🦋 Changeset detected

Latest commit: 01dc436

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@godaddy/localizations	Patch
@godaddy/react	Patch
nextjs	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR