feat: add locale props for stripe initialization (#87)

* feat: add locale props for stripe initialization * feat: locale property documentation * feat: add tests for locale property Co-authored-by: Lucas Robin <lucas@wearestudium.com>
bennypowers · Jun 21, 2022 · 44317a4 · 44317a4
1 parent 536ad46
commit 44317a4
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 2 deletions.
diff --git a/custom-elements.json b/custom-elements.json
@@ -317,6 +317,17 @@
               "attribute": "invalid",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "locale",
+              "type": {
+                "text": "Stripe.StripeElementLocale"
+              },
+              "default": "auto",
+              "description": "Stripe locale to use (use browser locale by default)",
+              "attribute": "locale",
+              "reflects": true
+            },
             {
               "kind": "method",
               "name": "createPaymentMethod",

diff --git a/src/StripeBase.ts b/src/StripeBase.ts
@@ -14,6 +14,7 @@ import { BreadcrumbController } from './breadcrumb-controller.js';
 import { readonly } from './lib/read-only.js';
 import { notify } from './lib/notify.js';
 import { loadStripe } from '@stripe/stripe-js/pure.js';
+import { StripeElementLocale } from '@stripe/stripe-js';
 
 export const enum SlotName {
   'stripe-elements' = 'stripe-elements-slot',
@@ -143,6 +144,10 @@ export class StripeBase extends LitElement {
   @property({ type: String, attribute: 'stripe-account' })
   stripeAccount: string;
 
+  /** Stripe locale to use */
+  @property({ type: String, attribute: 'locale' })
+    locale: StripeElementLocale = 'auto';
+
   /* READ-ONLY FIELDS */
 
   /* PAYMENT REPRESENTATIONS */
@@ -392,12 +397,12 @@ export class StripeBase extends LitElement {
    * Initializes Stripe and elements.
    */
   private async initStripe(): Promise<void> {
-    const { publishableKey, stripeAccount } = this;
+    const { publishableKey, stripeAccount, locale } = this;
     if (!publishableKey)
       readonly.set<StripeBase>(this, { elements: null, element: null, stripe: null });
     else {
       try {
-        const options = { stripeAccount };
+        const options = { stripeAccount, locale };
         const stripe =
           (window.Stripe) ? window.Stripe(publishableKey, options) : await loadStripe(publishableKey, options);
         const elements = stripe?.elements();

diff --git a/test/stripe-elements.test.ts b/test/stripe-elements.test.ts
@@ -920,6 +920,20 @@ describe('<stripe-elements>', function() {
             });
           });
         });
+
+        describe('with no `locale` property set', function() {
+          it('should have `auto` by default', function() {
+            expect(element.locale).to.be.equal('auto');
+          });
+        });
+
+        describe('with `locale` property set', function() {
+          const LOCALE = 'en';
+          beforeEach(Helpers.setProps({ locale: LOCALE }));
+          it(`should have ${LOCALE}`, function() {
+            expect(element.locale).to.be.equal('en');
+          });
+        });
       });
 
       describe('with a card that will be declined', function() {

diff --git a/test/test-helpers.ts b/test/test-helpers.ts
@@ -135,6 +135,7 @@ export const BASE_DEFAULT_PROPS = Object.freeze({
   source: null,
   stripe: null,
   token: null,
+  locale: 'auto',
 });
 
 export const BASE_READ_ONLY_PROPS = Object.freeze([