Change language dynamically

[benjaminmilcic]

I want to change language of the payment ui dynamically. I use ngx-translate.

I used the provided example on your website to integrate stripe. It works fine.

Now I have:

<ngx-stripe-elements [stripe]="stripe" [elementsOptions]="elementsOptions"> <ngx-stripe-payment [options]="paymentElementOptions" /> </ngx-stripe-elements>

`elementsOptions: StripeElementsOptions = {
locale: this.translate.currentLang,
clientSecret: null,
appearance: {
theme: 'flat',
},
};

paymentElementOptions: StripePaymentElementOptions = {
layout: {
type: 'tabs',
defaultCollapsed: false,
radios: false,
spacedAccordionItems: false,
},
};

stripe = injectStripe(
{{api_Key}}
);

constructor(
private translate: TranslateService,
) {} `

I try the following:

ngOnInit() { this.translate.onLangChange.subscribe((res) => { this.elementsOptions.locale = <StripeElementLocale>res.lang; ); }); }

But the language of the payment layout do not change.

You have any suggestion how to do that?

[benjaminmilcic]

Oh my god, sorry for starting an issue so fast.
I get it to work now.

I added

@ViewChild(StripeElementsDirective) elements!: StripeElementsDirective;

and then

this.translate.onLangChange.subscribe((lang) => { this.elementsOptions.locale = <StripeElementLocale>lang.lang; this.elements.update(this.elementsOptions); });

Sorry again, for starting this issue!!!

[richnologies]

No worries. Congrats on finding the answer