Tipsi-stripe: How to change language?

[diego-caceres]

Hi, I'm using the paymentRequestWithCardForm method to show the Stripe pop up so that the user can enter his credit card information in order to get the Token.
The problem I have is that even though the device language is in Spanish, the title and buttons are in english ("Enter your card" in android, and "Add a card" in iOS). I can see that the project has Localizable.strings but I'm missing if there's a way to set the language. In my case, all the users will be spanish speakers (Almost 100%)

Thanks for any guidance.

[isnifer]

Hi @diego-caceres, good question! We didn't add l10n into the component yet. Need time to investigate.

[RiusmaX]

+1 for i18n support, need to translate in 12 langages, maybe adding some props or some options with texts and labels ?

Thanks for your work !

[isnifer]

@RiusmaX PRs welcome!

[diego-caceres]

Hi @isnifer ! I'm willing to try to add this feature, but do you have some guidance? The thing is that I have downloaded the project and I don't seem to find where the "texts" are. So far I have only found the ones in the strings.xml of the android project (which I'm not sure are all of them), but none on the iOS one. Do you hace any idea what I might be missing?

Thanks

[isnifer]

Hi, @diego-caceres currently there is no place for that. I will investigate how to do it better today. Stay tuned!

[jbouaziz]

Hey! Have you guys made any progress on this particular issue?

[isnifer]

@jbouaziz sadly, but we don't have much free time for that.

[syzer]

👍

[cauboy]

👍

[melvinxie]

👍

[juergengunz]

👍

[isnifer]

@syzer @cauboy @melvinxie @juergengunz PRs are welcome!

[syzer]

We decided to re-due whole screen... to match our new UX guidelines.. so not time,
Maybe on http://hackergarten.net/ we can do it.. but since its missing ios ppl, chances are low.

[xenobarbital]

Commenting here to avoid duplicating. Is the localization implemented yet?

[cybergrind]

@xenobarbital there are no ongoing PR's with that

[yassinecc]

Hi @diego-caceres, here is how to add language support:

• iOS:
  paymentRequestWithCardForm uses the native modal provided in the Stripe iOS SDK which support a number of languages out of the box, you will just need to set up your app to support internationalization.

  In the Info tab of your XCode project, make sure you have checked the "Base Internationalization" box in the "Loclizations" sections (1), and add the languages you want to support to the Languages list (2) cf. screenshot

  

  In case your language is not fully supported by Stripe, you can refer to stripe/stripe-ios#915 for guidance on how to improve localization.

• Android:
  paymentRequestWithCardForm uses a 3rd party card entry library which needs specific locale resources.

  • First open a pull request on https://github.com/tipsi/CreditCardEntry like this one with the language you want to have support of instead of French.
  • Then open another one on this repo like #395 with your language of choice

[acro5piano]

@yassinecc
Thank you for your suggestion. That's very helpful!

In Android, we can add our own launguage support without creating Pull Requests by adding our original strings file to android/app/src/main/res/values-**/strings.xml. For example, if you want to add Japanese support then create android/app/src/main/res/values-ja/strings.xml with the following XML file, and build RN app. It will be translated.

<resources>

  <string name="gettipsi_card_number">カード番号</string>
  <string name="gettipsi_save">保存</string>
  <string name="gettipsi_card_cvc">確認番号（CVC）</string>
  <string name="gettipsi_google_pay_unavaliable">この端末では、 Google Pay はご利用になれません。</string>
  <string name="gettipsi_user_cancel_dialog">キャンセルしました。カードは追加されていません。</string>
  <string name="gettipsi_card_enter_dialog_title">カード番号を入力して下さい</string>
  <string name="gettipsi_card_enter_dialog_positive_button">完了</string>
  <string name="gettipsi_card_enter_dialog_negative_button">キャンセル</string>
  <string name="gettipsi_card_number_label">カード</string>

  <string-array name="gettipsi_currency_array">
    <item>通貨 (任意)</item>
    <item>指定しない</item>
    <item>円</item>
  </string-array>
</resources>

In this way, we don't have to wait a new version of tipsi-stripe, and customize strings as much as we want.

However, out-of-box solution is better for developers, so I will try to create PR as @yassinecc suggested.

[filipepiresg]

for me, this @acro5piano solution worked, just the "Expiration date" field that I didn't find where to switch.

Thank you

[JB-CHAUVIN]

I didn't get how to translate Stripe's API responses ?

[LokmaneKrizou]

@filipepiresg same with me, did you have any chance to solve it?

[badpenguin]

Anybody knows the android's string for the "expiration date" ?

[badpenguin]

Ok got it! Those works for android! https://github.com/tipsi/CreditCardEntry/blob/master/CreditCardEntry/res/values/strings.xml