I have a site that is translated into 4 languages.
We accept credit card information via an iframe (because we don't want to deal with PCI compliance, so we're letting a 3rd party receive and store the data).
The iframe is styled to look pretty similar to our site (same colors, etc).
Unfortunately, it doesn't support anything other than English.
If a non-English user is looking at our credit card form, he just sees this mess of confusing English. And he'll probably be nervous about providing his payment information when he can't even understand the fields.
I've thought of a few options:
- Use relative positioning to overlay translated text on top of the English
- A popup that has a screenshot of the English iframe but then has relatively positioned translations overlaid on top... and this example will tell the user how to use the form even though the real form is in English.
- Same as #2 but just show it below the real form instead of in a popup
- Same as #2 but in a large tooltip that follows the mouse whenever it's hovering anywhere over the iframe.
Option 1 didn't work because different browser/OS/language permutations were unpredictable with how positioning worked.
Recommendations and other thoughts?
There is very little room to the left or right of the iframe (for a typical user's window size).