Arabic checkout: card number and expiry render right-to-left on mobile

Summary

On a checkout with force_language: "ar", the numeric card fields are mirrored along with the rest of the page. Card number groups and the expiry date render right-to-left, which makes them read incorrectly to the customer.

Numeric input such as card numbers, expiry dates and CVC should stay left-to-right even inside an RTL layout. This is standard RTL practice and every other checkout handles it this way.

Impact

Reported by Eytan Fishman (withyouchat.com), using the Overlay SDK on mobile.

Payments do process successfully, so this is visual only, but it is not cosmetic. The expiry field renders as 31 / 04 where the customer entered 04 / 31. That is not a valid MM/YY value, so the customer is shown what looks like an invalid date on a field they just filled in correctly. On a payment form that directly undermines trust at the point of payment.

The card number is affected the same way, with the groups reversed so the last block appears first.

Reproduction

1. Create a checkout session with customization.force_language set to "ar".
2. Open it on a mobile device using the Overlay SDK.
3. Enter a card number and an expiry date.
4. Observe that both render reversed.

Expected

The page mirrors for Arabic, but the card number, expiry and CVC inputs keep left-to-right direction and ordering.

Actual

Card number groups and the expiry date are mirrored along with the layout. Entering 04 / 31 displays as 31 / 04.

Note

The merchant was initially asked to raise this on the feature requests board, but could not post there ("You don't have access to post on this board"), and reasonably pushed back that this is a bug rather than a feature request. Filing it on their behalf.