@designcrowd/library.brand-page 6.2.4 → 6.2.5

package/src/brand-page/components/payment/RequestPaymentStripe.vue.test.ts

@@ -0,0 +1,644 @@
+import { enableAutoUnmount, flushPromises, mount } from '@vue/test-utils';
+import type { DOMWrapper, VueWrapper } from '@vue/test-utils';
+import { AxiosError, AxiosHeaders } from 'axios';
+import i18next from 'i18next';
+import { TextInput } from '@designcrowd/fe-shared-lib';
+import {
+  setLocaleAsync,
+  supportedLocales,
+  type LocaleTypes,
+} from '@src/composables/useTranslate';
+import brandPageClient from '../../clients/brand-page.client';
+import {
+  ButtonStyles,
+  type BrandPagePaymentConfig,
+  type CreateCartResult,
+  type StripePaymentIntent,
+} from '../../models';
+import RequestPaymentStripe from './RequestPaymentStripe.vue';
+import en from './i18n/request-payment-stripe.json';
+import deDE from './i18n/request-payment-stripe.de-DE.json';
+import esES from './i18n/request-payment-stripe.es-ES.json';
+import frCA from './i18n/request-payment-stripe.fr-CA.json';
+import frFR from './i18n/request-payment-stripe.fr-FR.json';
+import ptBR from './i18n/request-payment-stripe.pt-BR.json';
+import ptPT from './i18n/request-payment-stripe.pt-PT.json';
+
+vi.mock('../../clients/brand-page.client', () => ({
+  default: { createStripePaymentIntent: vi.fn() },
+}));
+
+enableAutoUnmount(afterEach);
+
+// Expected values come from the locale files, not literals, so Smartling's
+// rewrite of the wording can't turn these tests red.
+const localeFiles: Record<LocaleTypes, typeof en> = {
+  'en-US': en,
+  'de-DE': deDE,
+  'es-ES': esES,
+  'fr-CA': frCA,
+  'fr-FR': frFR,
+  'pt-BR': ptBR,
+  'pt-PT': ptPT,
+};
+
+const stringsFor = (locale: LocaleTypes): (typeof en)['requestPaymentStripe'] =>
+  localeFiles[locale].requestPaymentStripe;
+
+const NON_ENGLISH_LOCALES = supportedLocales.filter(
+  (locale) => locale !== 'en-US',
+);
+
+// R2 and R3 keep today's English word for word, so these stay literal.
+const ENGLISH_HINTS = {
+  cardNumber: 'Credit Card Number',
+  cardExpiry: 'Expiry',
+  cardCvc: 'CVV',
+};
+const ENGLISH_FAILURE_MESSAGE =
+  'Unable to create payment intent. Please try again.';
+
+const CARD_FORM_KEYS = [
+  'cardNumberPlaceholder',
+  'cardExpiryPlaceholder',
+  'cardCvcPlaceholder',
+  'paymentIntentErrorMessage',
+] as const;
+
+// See RecaptchaDisclosure.vue.test.ts: the shared i18next singleton only takes
+// the language from `setLocaleAsync` on its first call.
+const useLocale = async (locale: string): Promise<void> => {
+  await setLocaleAsync(locale as LocaleTypes);
+  await i18next.changeLanguage(locale);
+};
+
+type ChangeListener = (response: {
+  elementType: string;
+  complete: boolean;
+}) => void;
+
+interface FakeElement {
+  type: string;
+  options: { placeholder?: string };
+  mount: ReturnType<typeof vi.fn>;
+  addEventListener: (event: string, listener: ChangeListener) => void;
+  change?: ChangeListener;
+}
+
+interface FakeStripe {
+  Stripe: ReturnType<typeof vi.fn>;
+  elements: Record<string, FakeElement>;
+  confirmCardPayment: ReturnType<typeof vi.fn>;
+}
+
+const createFakeStripe = (): FakeStripe => {
+  const elements: Record<string, FakeElement> = {};
+  const confirmCardPayment = vi.fn();
+
+  const Stripe = vi.fn(() => ({
+    elements: () => ({
+      create: (type: string, options: FakeElement['options']): FakeElement => {
+        const element: FakeElement = {
+          type,
+          options,
+          mount: vi.fn(),
+          addEventListener: (event: string, listener: ChangeListener): void => {
+            if (event === 'change') {
+              element.change = listener;
+            }
+          },
+        };
+
+        elements[type] = element;
+
+        return element;
+      },
+    }),
+    confirmCardPayment,
+  }));
+
+  return { Stripe, elements, confirmCardPayment };
+};
+
+let fakeStripe: FakeStripe;
+
+const setWindowStripe = (value?: unknown): void => {
+  (window as { Stripe?: unknown }).Stripe = value;
+};
+
+const errorHandler = vi.fn();
+const createStripePaymentIntent = vi.mocked(
+  brandPageClient.createStripePaymentIntent,
+);
+
+const baseProps = {
+  cart: {
+    cartId: 'cart-1',
+    paymentProviderName: 'Stripe',
+    paymentProviderExternalId: 'acct_test',
+    totalAmount: 2500,
+  } as CreateCartResult<StripePaymentIntent>,
+  checkoutInformation: {},
+  buttonStyles: new ButtonStyles(),
+  paymentConfig: {
+    defaultCurrency: 'USD',
+    defaultCurrencySymbol: '$',
+  } as BrandPagePaymentConfig,
+  stripePublishableKey: 'pk_test_123',
+};
+
+const consumerProps = {
+  Payment: { isShop: false, productName: 'Logo design' },
+  Tipping: { isShop: false },
+  Store: { isShop: true, isShippingEnabled: true },
+};
+
+const mountForm = (
+  props: Partial<{
+    productName: string;
+    isShop: boolean;
+    isShippingEnabled: boolean;
+  }> = {},
+): VueWrapper =>
+  mount(RequestPaymentStripe, {
+    props: { ...baseProps, ...props },
+    global: { config: { errorHandler } },
+  });
+
+const hints = (): Record<string, string | undefined> => ({
+  cardNumber: fakeStripe.elements.cardNumber?.options.placeholder,
+  cardExpiry: fakeStripe.elements.cardExpiry?.options.placeholder,
+  cardCvc: fakeStripe.elements.cardCvc?.options.placeholder,
+});
+
+const hintsFor = (locale: LocaleTypes): Record<string, string> => ({
+  cardNumber: stringsFor(locale).cardNumberPlaceholder,
+  cardExpiry: stringsFor(locale).cardExpiryPlaceholder,
+  cardCvc: stringsFor(locale).cardCvcPlaceholder,
+});
+
+const payButton = (wrapper: VueWrapper): DOMWrapper<Element> =>
+  wrapper.find('.bp-style-wrapper button');
+
+const formErrors = (wrapper: VueWrapper): string[] =>
+  wrapper.findAll('.form-error').map((error) => error.text());
+
+const completeForm = async (wrapper: VueWrapper): Promise<void> => {
+  Object.values(fakeStripe.elements).forEach((element) => {
+    element.change?.({ elementType: element.type, complete: true });
+  });
+  await wrapper
+    .findComponent(TextInput)
+    .find('input')
+    .setValue('visitor@example.com');
+  await flushPromises();
+};
+
+const clickPay = async (wrapper: VueWrapper): Promise<void> => {
+  expect(payButton(wrapper).attributes('disabled')).toBeUndefined();
+  await payButton(wrapper).trigger('click');
+  await flushPromises();
+};
+
+const paymentIntent = {
+  paymentIntent: { client_secret: 'pi_test_secret' } as StripePaymentIntent,
+};
+
+const httpError = (status: number): AxiosError =>
+  new AxiosError(
+    `Request failed with status code ${status}`,
+    status >= 500 ? AxiosError.ERR_BAD_RESPONSE : AxiosError.ERR_BAD_REQUEST,
+    undefined,
+    undefined,
+    {
+      status,
+      statusText: '',
+      data: {},
+      headers: {},
+      config: { headers: new AxiosHeaders() },
+    },
+  );
+
+const networkError = (): AxiosError =>
+  new AxiosError('Network Error', AxiosError.ERR_NETWORK);
+
+const FAILED_REQUESTS: [string, () => AxiosError][] = [
+  ['refused (HTTP 400)', () => httpError(400)],
+  ['server error (HTTP 500)', () => httpError(500)],
+  ['no connection', networkError],
+];
+
+// Stripe writes its own decline text; the form shows it as given.
+const STRIPE_DECLINE = {
+  type: 'card_error',
+  code: 'card_declined',
+  decline_code: 'generic_decline',
+  message: 'Your card was declined.',
+};
+
+const FAILED_INTENT_STEPS: [string, () => void][] = [
+  [
+    'no payment details',
+    () => createStripePaymentIntent.mockResolvedValueOnce(null),
+  ],
+  [
+    'a failed request (HTTP 500)',
+    () => createStripePaymentIntent.mockRejectedValueOnce(httpError(500)),
+  ],
+];
+
+describe('RequestPaymentStripe', () => {
+  beforeEach(() => {
+    fakeStripe = createFakeStripe();
+    setWindowStripe(fakeStripe.Stripe);
+    errorHandler.mockReset();
+    createStripePaymentIntent.mockReset();
+    vi.spyOn(console, 'error').mockImplementation(() => undefined);
+  });
+
+  afterEach(() => {
+    setWindowStripe(undefined);
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+  });
+
+  describe('card-field hints', () => {
+    test.each(NON_ENGLISH_LOCALES)(
+      'card-field hints use the %s locale file',
+      async (locale) => {
+        await useLocale(locale);
+
+        mountForm(consumerProps.Payment);
+
+        expect(hints()).toEqual(hintsFor(locale));
+        expect(hints().cardNumber).not.toBe(
+          en.requestPaymentStripe.cardNumberPlaceholder,
+        );
+        expect(hints().cardExpiry).not.toBe(
+          en.requestPaymentStripe.cardExpiryPlaceholder,
+        );
+        Object.values(hints()).forEach((hint) => {
+          expect(hint).not.toMatch(/^requestPaymentStripe\./);
+        });
+      },
+    );
+
+    // A key missing from one locale file renders as its key path on the site;
+    // the shared test singleton would hide it behind the en-US fallback.
+    test.each(supportedLocales)(
+      'every locale file defines the card-form keys: %s',
+      (locale) => {
+        CARD_FORM_KEYS.forEach((key) => {
+          const value: unknown = stringsFor(locale)[key];
+
+          expect(typeof value, `${locale} › ${key}`).toBe('string');
+          expect((value as string).trim(), `${locale} › ${key}`).not.toBe('');
+        });
+      },
+    );
+
+    test.each(Object.keys(consumerProps) as (keyof typeof consumerProps)[])(
+      'hints are translated when opened from %s',
+      async (consumer) => {
+        await useLocale('de-DE');
+
+        const wrapper = mountForm(consumerProps[consumer]);
+
+        expect(hints()).toEqual(hintsFor('de-DE'));
+
+        if (consumer === 'Store') {
+          expect(
+            wrapper
+              .find('[data-component="payment-shipping-address"]')
+              .exists(),
+          ).toBe(true);
+        }
+      },
+    );
+
+    test('hints are translated when Stripe loads after mount', async () => {
+      await useLocale('de-DE');
+      setWindowStripe(undefined);
+      vi.useFakeTimers();
+
+      mountForm(consumerProps.Payment);
+
+      expect(fakeStripe.elements.cardNumber).toBeUndefined();
+
+      setWindowStripe(fakeStripe.Stripe);
+      vi.advanceTimersByTime(250);
+
+      expect(hints()).toEqual(hintsFor('de-DE'));
+    });
+
+    test.each([
+      ['de-DE', 'en-US', hintsFor('de-DE')],
+      ['en-US', 'de-DE', ENGLISH_HINTS],
+    ] as [LocaleTypes, string, Record<string, string>][])(
+      'hints follow the site language, not the browser language: site %s, browser %s',
+      async (siteLocale, browserLocale, expected) => {
+        vi.spyOn(window.navigator, 'language', 'get').mockReturnValue(
+          browserLocale,
+        );
+        vi.spyOn(window.navigator, 'languages', 'get').mockReturnValue([
+          browserLocale,
+        ]);
+        await useLocale(siteLocale);
+
+        mountForm(consumerProps.Payment);
+
+        expect(hints()).toEqual(expected);
+      },
+    );
+
+    test('English site keeps the current hints word for word', async () => {
+      await useLocale('en-US');
+
+      const wrapper = mountForm(consumerProps.Payment);
+
+      expect(hints()).toEqual(ENGLISH_HINTS);
+      expect(wrapper.findAll('p.tw-font-bold').map((p) => p.text())).toContain(
+        'Card Number',
+      );
+    });
+  });
+
+  // `setLocaleAsync` falls back to en-US for a language it doesn't support.
+  test.each(FAILED_INTENT_STEPS)(
+    'unsupported site language falls back to English: %s',
+    async (_outcome, failIntentStep) => {
+      await useLocale('it-IT');
+
+      const wrapper = mountForm(consumerProps.Payment);
+
+      expect(hints()).toEqual(ENGLISH_HINTS);
+
+      await completeForm(wrapper);
+      failIntentStep();
+      await clickPay(wrapper);
+
+      expect(formErrors(wrapper)).toEqual([ENGLISH_FAILURE_MESSAGE]);
+    },
+  );
+
+  describe('payment-failure message', () => {
+    test.each(NON_ENGLISH_LOCALES)(
+      'payment-failure message uses the %s locale file',
+      async (locale) => {
+        await useLocale(locale);
+
+        const wrapper = mountForm(consumerProps.Payment);
+
+        await completeForm(wrapper);
+        createStripePaymentIntent.mockResolvedValueOnce(null);
+        await clickPay(wrapper);
+
+        expect(formErrors(wrapper)).toEqual([
+          stringsFor(locale).paymentIntentErrorMessage,
+        ]);
+        expect(formErrors(wrapper)[0]).not.toBe(
+          en.requestPaymentStripe.paymentIntentErrorMessage,
+        );
+      },
+    );
+
+    test.each(FAILED_INTENT_STEPS)(
+      'English site shows the payment-failure message word for word: %s',
+      async (_outcome, failIntentStep) => {
+        await useLocale('en-US');
+
+        const wrapper = mountForm(consumerProps.Payment);
+
+        await completeForm(wrapper);
+        failIntentStep();
+        await clickPay(wrapper);
+
+        expect(formErrors(wrapper)).toEqual([ENGLISH_FAILURE_MESSAGE]);
+      },
+    );
+
+    test.each(
+      NON_ENGLISH_LOCALES.flatMap((locale) =>
+        FAILED_REQUESTS.map(([kind, error]) => [locale, kind, error] as const),
+      ),
+    )(
+      'a failed intent request shows the translated message: %s, %s',
+      async (locale, _kind, error) => {
+        const failure = error();
+
+        await useLocale(locale);
+
+        const wrapper = mountForm(consumerProps.Payment);
+
+        await completeForm(wrapper);
+        createStripePaymentIntent.mockRejectedValueOnce(failure);
+        await clickPay(wrapper);
+
+        expect
+          .soft(formErrors(wrapper))
+          .toEqual([stringsFor(locale).paymentIntentErrorMessage]);
+        expect.soft(payButton(wrapper).attributes('disabled')).toBeUndefined();
+        expect.soft(fakeStripe.confirmCardPayment).not.toHaveBeenCalled();
+        expect.soft(errorHandler).not.toHaveBeenCalled();
+        expect.soft(console.error).toHaveBeenCalledWith(failure);
+      },
+    );
+
+    // The card may already be charged once the intent exists, so a "try again"
+    // message there could invite a second payment.
+    test('a failure after the intent step shows no retry message', async () => {
+      const stripeFailure = new Error('confirmCardPayment failed');
+
+      await useLocale('de-DE');
+
+      const wrapper = mountForm(consumerProps.Payment);
+
+      await completeForm(wrapper);
+      createStripePaymentIntent.mockResolvedValueOnce(paymentIntent);
+      fakeStripe.confirmCardPayment.mockRejectedValueOnce(stripeFailure);
+      await clickPay(wrapper);
+
+      expect(formErrors(wrapper)).toEqual([]);
+      expect(payButton(wrapper).attributes('disabled')).toBeUndefined();
+      expect(errorHandler).toHaveBeenCalledTimes(1);
+      expect(errorHandler.mock.calls[0][0]).toBe(stripeFailure);
+    });
+
+    test('a failure after the intent step clears the earlier retry message', async () => {
+      const stripeFailure = new Error('confirmCardPayment failed');
+
+      await useLocale('de-DE');
+
+      const wrapper = mountForm(consumerProps.Payment);
+
+      await completeForm(wrapper);
+      createStripePaymentIntent.mockRejectedValueOnce(httpError(500));
+      await clickPay(wrapper);
+
+      expect(formErrors(wrapper)).toEqual([
+        stringsFor('de-DE').paymentIntentErrorMessage,
+      ]);
+
+      createStripePaymentIntent.mockResolvedValueOnce(paymentIntent);
+      fakeStripe.confirmCardPayment.mockRejectedValueOnce(stripeFailure);
+      await clickPay(wrapper);
+
+      expect(formErrors(wrapper)).toEqual([]);
+      expect(payButton(wrapper).attributes('disabled')).toBeUndefined();
+      expect(errorHandler).toHaveBeenCalledTimes(1);
+      expect(errorHandler.mock.calls[0][0]).toBe(stripeFailure);
+    });
+
+    test('retry after the payment-failure message: failing again keeps one message', async () => {
+      await useLocale('de-DE');
+
+      const wrapper = mountForm(consumerProps.Payment);
+
+      await completeForm(wrapper);
+      createStripePaymentIntent.mockRejectedValueOnce(httpError(500));
+      await clickPay(wrapper);
+
+      expect(formErrors(wrapper)).toEqual([
+        stringsFor('de-DE').paymentIntentErrorMessage,
+      ]);
+
+      createStripePaymentIntent.mockRejectedValueOnce(httpError(500));
+      await clickPay(wrapper);
+
+      expect(createStripePaymentIntent).toHaveBeenCalledTimes(2);
+      expect(formErrors(wrapper)).toEqual([
+        stringsFor('de-DE').paymentIntentErrorMessage,
+      ]);
+    });
+
+    test('retry after the payment-failure message: succeeding emits success', async () => {
+      await useLocale('de-DE');
+
+      const wrapper = mountForm(consumerProps.Payment);
+
+      await completeForm(wrapper);
+      createStripePaymentIntent.mockRejectedValueOnce(httpError(500));
+      await clickPay(wrapper);
+
+      expect(formErrors(wrapper)).toEqual([
+        stringsFor('de-DE').paymentIntentErrorMessage,
+      ]);
+
+      const confirmed = { paymentIntent: { status: 'succeeded' } };
+
+      createStripePaymentIntent.mockResolvedValueOnce(paymentIntent);
+      fakeStripe.confirmCardPayment.mockResolvedValueOnce(confirmed);
+      await clickPay(wrapper);
+
+      expect(wrapper.emitted('success')).toEqual([[{ result: confirmed }]]);
+      expect(errorHandler).not.toHaveBeenCalled();
+    });
+
+    test('a successful payment emits success and shows no message', async () => {
+      await useLocale('de-DE');
+
+      const wrapper = mountForm(consumerProps.Payment);
+
+      await completeForm(wrapper);
+
+      const confirmed = { paymentIntent: { status: 'succeeded' } };
+
+      createStripePaymentIntent.mockResolvedValueOnce(paymentIntent);
+      fakeStripe.confirmCardPayment.mockResolvedValueOnce(confirmed);
+      await clickPay(wrapper);
+
+      expect(wrapper.emitted('success')).toEqual([[{ result: confirmed }]]);
+      expect(formErrors(wrapper)).toEqual([]);
+      expect(errorHandler).not.toHaveBeenCalled();
+    });
+
+    test("Stripe's decline text shows word for word, not ours", async () => {
+      await useLocale('de-DE');
+
+      const wrapper = mountForm(consumerProps.Payment);
+
+      await completeForm(wrapper);
+      createStripePaymentIntent.mockResolvedValueOnce(paymentIntent);
+      fakeStripe.confirmCardPayment.mockResolvedValueOnce({
+        error: STRIPE_DECLINE,
+      });
+      await clickPay(wrapper);
+
+      expect(formErrors(wrapper)).toEqual([STRIPE_DECLINE.message]);
+      expect(payButton(wrapper).attributes('disabled')).toBeUndefined();
+      expect(wrapper.emitted('success')).toBeUndefined();
+      expect(errorHandler).not.toHaveBeenCalled();
+    });
+
+    test("Stripe's decline text clears on the next Pay click and shows again if declined again", async () => {
+      await useLocale('de-DE');
+
+      const wrapper = mountForm(consumerProps.Payment);
+
+      await completeForm(wrapper);
+      createStripePaymentIntent.mockResolvedValueOnce(paymentIntent);
+      fakeStripe.confirmCardPayment.mockResolvedValueOnce({
+        error: STRIPE_DECLINE,
+      });
+      await clickPay(wrapper);
+
+      expect(formErrors(wrapper)).toEqual([STRIPE_DECLINE.message]);
+
+      let answerIntent: (response: typeof paymentIntent) => void = () =>
+        undefined;
+
+      createStripePaymentIntent.mockReturnValueOnce(
+        new Promise((resolve) => {
+          answerIntent = resolve;
+        }),
+      );
+      fakeStripe.confirmCardPayment.mockResolvedValueOnce({
+        error: STRIPE_DECLINE,
+      });
+      await clickPay(wrapper);
+
+      expect(formErrors(wrapper)).toEqual([]);
+
+      answerIntent(paymentIntent);
+      await flushPromises();
+
+      expect(fakeStripe.confirmCardPayment).toHaveBeenCalledTimes(2);
+      expect(formErrors(wrapper)).toEqual([STRIPE_DECLINE.message]);
+    });
+
+    // Both clicks land before Vue re-renders the button as disabled, so the
+    // second one reaches the handler and only its guard stops it.
+    test('Pay clicked twice before the first request answers sends one request', async () => {
+      await useLocale('de-DE');
+
+      const wrapper = mountForm(consumerProps.Payment);
+
+      await completeForm(wrapper);
+
+      let failIntent: (error: AxiosError) => void = () => undefined;
+
+      createStripePaymentIntent.mockReturnValueOnce(
+        new Promise((_resolve, reject) => {
+          failIntent = reject;
+        }),
+      );
+      await Promise.all([
+        payButton(wrapper).trigger('click'),
+        payButton(wrapper).trigger('click'),
+      ]);
+
+      expect(createStripePaymentIntent).toHaveBeenCalledTimes(1);
+      expect(console.error).toHaveBeenCalledWith(
+        'onSubmitPaymentClick: invalid operation',
+      );
+
+      failIntent(httpError(500));
+      await flushPromises();
+
+      expect(createStripePaymentIntent).toHaveBeenCalledTimes(1);
+      expect(formErrors(wrapper)).toEqual([
+        stringsFor('de-DE').paymentIntentErrorMessage,
+      ]);
+    });
+  });
+});

package/src/brand-page/components/payment/i18n/request-payment-stripe.de-DE.json

@@ -1,6 +1,9 @@
 {
   "requestPaymentStripe" : {
     "cardNumber" : "Kartennummer",
+    "cardNumberPlaceholder" : "Kreditkartennummer",
+    "cardExpiryPlaceholder" : "Ablaufdatum",
+    "cardCvcPlaceholder" : "Prüfnummer",
     "emailAddress" : "E-Mail-Adresse",
     "emailAddressPlaceholder" : "E-Mail-Adresse",
     "proceedToPayment" : "Weiter zur Zahlung {{CURRENCY_SYMBOL}}{{AMOUNT}} ({{CURRENCY_CODE}})",
@@ -9,6 +12,7 @@
     "termsLinkText" : "Nutzungsbedingungen von BrandCrowd",
     "termsDisclaimer" : "Die Zahlung wird an den Eigentümer der Webseite geleistet. BrandCrowd ist für diese Transaktion nicht haftbar.",
     "poweredBy" : "Powered by",
-    "invalidEmailMessage" : "Bitte geben Sie eine gültige E-Mail-Adresse ein"
+    "invalidEmailMessage" : "Bitte geben Sie eine gültige E-Mail-Adresse ein",
+    "paymentIntentErrorMessage" : "Die Zahlung konnte nicht erstellt werden. Bitte versuchen Sie es erneut."
   }
 }

package/src/brand-page/components/payment/i18n/request-payment-stripe.es-ES.json

@@ -1,6 +1,9 @@
 {
   "requestPaymentStripe" : {
     "cardNumber" : "Número de tarjeta",
+    "cardNumberPlaceholder" : "Número de tarjeta de crédito",
+    "cardExpiryPlaceholder" : "Caducidad",
+    "cardCvcPlaceholder" : "CVV",
     "emailAddress" : "Dirección de correo electrónico",
     "emailAddressPlaceholder" : "Dirección de correo electrónico",
     "proceedToPayment" : "Procede al pago {{CURRENCY_SYMBOL}}{{AMOUNT}} ({{CURRENCY_CODE}})",
@@ -9,6 +12,7 @@
     "termsLinkText" : "Términos y condiciones de BrandCrowd",
     "termsDisclaimer" : "El pago se hará al propietario de la página web. BrandCrowd no es responsable de esta transacción.",
     "poweredBy" : "Desarrollado por",
-    "invalidEmailMessage" : "Introduce una dirección de correo electrónico válida"
+    "invalidEmailMessage" : "Introduce una dirección de correo electrónico válida",
+    "paymentIntentErrorMessage" : "No se ha podido crear el pago. Inténtalo de nuevo."
   }
 }

package/src/brand-page/components/payment/i18n/request-payment-stripe.fr-CA.json

@@ -1,6 +1,9 @@
 {
   "requestPaymentStripe" : {
     "cardNumber" : "Numéro de carte",
+    "cardNumberPlaceholder" : "Numéro de carte de crédit",
+    "cardExpiryPlaceholder" : "Expiration",
+    "cardCvcPlaceholder" : "CVV",
     "emailAddress" : "Adresse courriel",
     "emailAddressPlaceholder" : "Adresse courriel",
     "proceedToPayment" : "Procédez au paiement {{CURRENCY_SYMBOL}}{{AMOUNT}} ({{CURRENCY_CODE}})",
@@ -9,6 +12,7 @@
     "termsLinkText" : "Conditions générales de BrandCrowd",
     "termsDisclaimer" : "Le paiement sera envoyé au propriétaire de la page Web. BrandCrowd n'est pas responsable de cette transaction.",
     "poweredBy" : "Alimenté par",
-    "invalidEmailMessage" : "Veuillez entrer une adresse e-mail valide"
+    "invalidEmailMessage" : "Veuillez entrer une adresse e-mail valide",
+    "paymentIntentErrorMessage" : "Impossible de créer le paiement. Veuillez réessayer."
   }
 }