基于 i18n 语言的 React Stripe Elements 占位符

Question

I want to change the placeholder of the CardElement based on i18n language. Im passing the locale as option when loading stripe

stripePromise = loadStripe(key, {   locale: i18nInstance.language })

It did work but when changing the language with the switcher it doesn't reflect on the placeholders.How can i update the options accordingly knowing that Loading Stripe in useEffect has side effects

Answer 1

Stripe also allows you to use the Elements Props to insert the locale like this:

<Elements stripe={stripePromise} options={ locale: i18nInstance.language }>

Adding the locale to options will give you more flexibility to handle this value inside the component instead of outside as they suggest for loadStripe .

I am not using the same library for i18n but here is an example with NextJs and TS

import React from 'react'
import {
  loadStripe,
  StripeElementLocale,
} from '@stripe/stripe-js'
import { Elements } from '@stripe/react-stripe-js'
import { useRouter } from 'next/router'
import Checkout from 'library/organisms/Checkout'

// Make sure to call `loadStripe` outside of a component’s render to avoid
// recreating the `Stripe` object on every render.
const stripePromise = loadStripe('ADD YOUR KEY')

const CheckoutPage = () => {
  const { locale } = useRouter()

  // The following line has been simplified to only check if the locale is 'en'
  // so TS don't complain but you could develope it for more languages.
  const stripeLocale: StripeElementLocale = locale === 'en' ? locale : 'auto'

  return (
    <Elements stripe={stripePromise} options={ locale: stripeLocale }>
      <Checkout />
    </Elements>
  )
}

export default CheckoutPage