@designcrowd/library.brand-page 5.17.3 → 5.17.4

package/lib/src/shared/content-settings/components/content-settings/ContentSettings.mixin.d.ts

@@ -783,6 +783,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         toggleLogoBackground(): Promise<any>;
     }>;
     eventTracker: {
+        sendShippingToggleEvent: (isEnabled: boolean) => void;
         sendSaveContactEvent: () => void;
         sendStartForFreeEvent: () => void;
         sendFooterLinkClickEvent: (linkType: "watermark_logo" | "create_your_website") => void;

package/lib/src/shared/content-settings/components/content-settings/ReplaceImageSettingsForContent.mixin.d.ts

@@ -731,6 +731,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         toggleShouldPlayVideo(): void;
     }>;
     bpEventTracker: {
+        sendShippingToggleEvent: (isEnabled: boolean) => void;
         sendSaveContactEvent: () => void;
         sendStartForFreeEvent: () => void;
         sendFooterLinkClickEvent: (linkType: "watermark_logo" | "create_your_website") => void;

package/lib/src/shared/content-settings/components/content-settings-item/ContentSettingsItem.mixin.d.ts

@@ -475,6 +475,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         clearAiTextEditContext(): void;
     }>;
     eventTracker: {
+        sendShippingToggleEvent: (isEnabled: boolean) => void;
         sendSaveContactEvent: () => void;
         sendStartForFreeEvent: () => void;
         sendFooterLinkClickEvent: (linkType: "watermark_logo" | "create_your_website") => void;

package/lib/src/shared/content-settings/components/payment-config-field/payment-toggle-field/PaymentToggleField.mixin.d.ts

@@ -21,6 +21,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: PropType<RequestPaymentConfig>;
         required: true;
     };
+    placeholder: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
 }>, {}, {}, {
     toggleState: {
         get(): boolean;
@@ -47,7 +52,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: PropType<RequestPaymentConfig>;
         required: true;
     };
+    placeholder: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}>, {
+    placeholder: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/lib/src/shared/content-settings/components/payment-config-field/payment-toggle-field/PaymentToggleField.mixin.js

@@ -1,4 +1,5 @@
 import { defineComponent } from 'vue';
+import { useEventTracker } from '../../../../../brand-page-maker/composables/useEventTracker';
 export default defineComponent({
     props: {
         id: {
@@ -21,6 +22,11 @@ export default defineComponent({
             type: Object,
             required: true,
         },
+        placeholder: {
+            type: String,
+            required: false,
+            default: '',
+        },
     },
     emits: ['update:modelValue'],
     computed: {
@@ -38,6 +44,10 @@ export default defineComponent({
                     name: this.name,
                     value,
                 };
+                if (this.settingsName === 'isShippingEnabled') {
+                    const eventTracker = useEventTracker();
+                    eventTracker.sendShippingToggleEvent(newVal);
+                }
                 this.$emit('update:modelValue', payload);
             },
         },

package/lib/src/shared/logo-settings/components/EditLogoSettings.mixin.d.ts

@@ -208,7 +208,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             searchTerm: string | undefined;
         }): void;
         _setSelectedTab({ tabName }: {
-            tabName: "all" | "AI" | "categories";
+            tabName: "AI" | "all" | "categories";
         }): void;
         _setSelectedCategory({ categoryName, }: {
             categoryName: string | undefined;
@@ -242,6 +242,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         setupLogoChangeWatcher(): void;
     }>;
     eventTracker: {
+        sendShippingToggleEvent: (isEnabled: boolean) => void;
         sendSaveContactEvent: () => void;
         sendStartForFreeEvent: () => void;
         sendFooterLinkClickEvent: (linkType: "watermark_logo" | "create_your_website") => void;

package/lib/src/shared/page-settings/components/page-settings/PageSettings.mixin.d.ts

@@ -4725,6 +4725,7 @@ declare const _default: import("vue").DefineComponent<{}, {
     onDraggingStart: () => void;
     onDraggingEnd: (ev?: any, routeId?: string, previousParentRouteId?: string) => void;
     eventTracker: {
+        sendShippingToggleEvent: (isEnabled: boolean) => void;
         sendSaveContactEvent: () => void;
         sendStartForFreeEvent: () => void;
         sendFooterLinkClickEvent: (linkType: "watermark_logo" | "create_your_website") => void;

package/lib/src/shared/publish-brand-page-with-state/PublishBrandPageModalWithState.mixin.d.ts

@@ -431,6 +431,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         }): Promise<void>;
     }>;
     eventTracker: {
+        sendShippingToggleEvent: (isEnabled: boolean) => void;
         sendSaveContactEvent: () => void;
         sendStartForFreeEvent: () => void;
         sendFooterLinkClickEvent: (linkType: "watermark_logo" | "create_your_website") => void;

package/lib/src/shared/side-bar/components/SideBarTabButton.mixin.d.ts

@@ -18,6 +18,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     }>;
     isDesignCom: import("vue").ComputedRef<boolean>;
     eventTracker: {
+        sendShippingToggleEvent: (isEnabled: boolean) => void;
         sendSaveContactEvent: () => void;
         sendStartForFreeEvent: () => void;
         sendFooterLinkClickEvent: (linkType: "watermark_logo" | "create_your_website") => void;

package/lib/src/shared/style-settings/components/StyleSettings.mixin.d.ts

@@ -876,6 +876,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         removeBackgroundVideo(): void;
     }>;
     eventTracker: {
+        sendShippingToggleEvent: (isEnabled: boolean) => void;
         sendSaveContactEvent: () => void;
         sendStartForFreeEvent: () => void;
         sendFooterLinkClickEvent: (linkType: "watermark_logo" | "create_your_website") => void;

package/lib/src/shared/template-settings/components/TemplatesSettings.mixin.d.ts

@@ -489,7 +489,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             searchTerm: string | undefined;
         }): void;
         _setSelectedTab({ tabName }: {
-            tabName: "all" | "AI" | "categories";
+            tabName: "AI" | "all" | "categories";
         }): void;
         _setSelectedCategory({ categoryName, }: {
             categoryName: string | undefined;
@@ -562,6 +562,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     }>;
     isDesignCom: import("vue").ComputedRef<boolean>;
     eventTracker: {
+        sendShippingToggleEvent: (isEnabled: boolean) => void;
         sendSaveContactEvent: () => void;
         sendStartForFreeEvent: () => void;
         sendFooterLinkClickEvent: (linkType: "watermark_logo" | "create_your_website") => void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "5.17.3",
+  "version": "5.17.4",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",

package/src/brand-page/clients/brand-page.client.ts

@@ -3,6 +3,7 @@ import * as constants from '../constants';
 import type {
   CreateCartResult,
   CreateStripePaymentIntentResponse,
+  StripeShippingDetails,
 } from '../models';
 import * as csrfUtil from '../utils/csrf.util';
 
@@ -171,6 +172,7 @@ const createStripePaymentIntent = async (request: {
   customerEmail: string;
   customerRequestDetails?: string;
   customerMessage?: string;
+  shippingDetails?: StripeShippingDetails;
 }): Promise<CreateStripePaymentIntentResponse | null> => {
   const csrfToken = csrfUtil.getCsrfTokenFromMetaHeader();
 
@@ -181,6 +183,7 @@ const createStripePaymentIntent = async (request: {
       customerEmail: request.customerEmail,
       customerRequestDetails: request.customerRequestDetails,
       customerMessage: request.customerMessage,
+      shipping: request.shippingDetails,
     },
     {
       headers: {

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

@@ -1,17 +1,17 @@
 <template>
   <div data-component="request-payment-stripe" :style="containerStyle">
-    <div class="tw-relative tw-my-2 tw-justify-center">
+    <div class="tw-relative tw-my-2">
       <button
-        class="tw-bg-transparent tw-border-none tw-top-0 tw-left-0 hover:tw-cursor-pointer"
+        class="tw-bg-transparent tw-border-none tw-absolute tw-left-0 tw-top-1/2 -tw-translate-y-1/2 hover:tw-cursor-pointer"
         @click="onBackClick"
       >
         <Icon name="chevron-left" size="sm" :style="arrowStyle" />
       </button>
-      <div v-if="!isShop" class="tw-w-full tw-flex tw-justify-center">
+      <div class="tw-w-full tw-flex tw-justify-center">
         <span class="tw-text-center">
           {{ currencySymbol }}{{ amount }} ({{ currencyCode }})
           {{
-            productName
+            !isShop && productName
               ? requestPaymentStripeTr('forProduct', {
                   PRODUCT_NAME: productName,
                 })
@@ -27,14 +27,35 @@
       <Loader />
     </div>
     <div v-show="isInitialised">
+      <PaymentShippingAddress
+        v-if="props.isShippingEnabled"
+        v-model="shippingDetails"
+        @validation-change="onShippingValidationChange"
+      />
+      <p class="tw-font-bold tw-mt-2">
+        {{ requestPaymentStripeTr('emailAddress') }}
+      </p>
+      <!-- Start Email Address -->
+      <TextInput
+        v-model="emailAddress"
+        class="tw-mt-3 tw-mb-2"
+        :placeholder="requestPaymentStripeTr('emailAddressPlaceholder')"
+        :error="Boolean(emailAddressError)"
+        @blur="onEmailAddressEvent"
+        @input="onEmailAddressEvent"
+      />
+      <p v-if="emailAddressError" class="form-error">
+        {{ emailAddressError.message }}
+      </p>
+      <!-- End Email Address -->
       <p class="tw-font-bold">{{ requestPaymentStripeTr('cardNumber') }}</p>
       <!-- Start Card Number -->
       <div
-        ref="cardNumber"
-        class="tw-border tw-border-solid tw-mb-2 tw-px-4 tw-py-1 tw-mt-3 tw-rounded tw-bg-white"
+        ref="cardNumberRef"
+        class="tw-w-full tw-border tw-border-solid tw-rounded tw-px-4 tw-py-3 tw-text-base tw-bg-white tw-mt-3 tw-mb-2"
         :class="{
           'tw-border-error-500': cardNumberElementError,
-          'tw-border-grayscale-500': !cardNumberElementError,
+          'tw-border-grayscale-300': !cardNumberElementError,
         }"
       />
       <div v-if="cardNumberElementError" class="form-error tw-pb-2">
@@ -45,19 +66,19 @@
       <!-- Start Card CVC Expiry -->
       <div class="tw-flex tw-flex-row tw-mt-3">
         <div
-          ref="cardExpiry"
-          class="tw-border tw-border-solid tw-border-grayscale-500 tw-grow tw-mb-3 tw-px-4 tw-py-1 tw-rounded tw-bg-white"
+          ref="cardExpiryRef"
+          class="tw-border tw-border-solid tw-rounded tw-px-4 tw-py-3 tw-text-base tw-bg-white tw-grow tw-mb-3"
           :class="{
             'tw-border-error-500': cardExpiryElementError,
-            'tw-border-grayscale-500': !cardExpiryElementError,
+            'tw-border-grayscale-300': !cardExpiryElementError,
           }"
         />
         <div
-          ref="cardCvc"
-          class="tw-border tw-border-solid tw-border-grayscale-500 tw-grow tw-mb-3 tw-ml-2 tw-px-4 tw-py-1 tw-rounded tw-w-1/4 tw-bg-white"
+          ref="cardCvcRef"
+          class="tw-border tw-border-solid tw-rounded tw-px-4 tw-py-3 tw-text-base tw-bg-white tw-grow tw-mb-3 tw-ml-2 tw-w-1/4"
           :class="{
             'tw-border-error-500': cardCvcElementError,
-            'tw-border-grayscale-500': !cardCvcElementError,
+            'tw-border-grayscale-300': !cardCvcElementError,
           }"
         />
       </div>
@@ -69,21 +90,6 @@
       </div>
       <!-- End Card CVC Expiry -->
 
-      <p class="tw-font-bold">{{ requestPaymentStripeTr('emailAddress') }}</p>
-      <!-- Start Email Address -->
-      <TextInput
-        v-model="emailAddress"
-        class="tw-mt-3 tw-mb-2"
-        :placeholder="requestPaymentStripeTr('emailAddressPlaceholder')"
-        :error="Boolean(emailAddressError)"
-        @blur="onEmailAddressEvent"
-        @input="onEmailAddressEvent"
-      />
-      <p v-if="emailAddressError" class="form-error">
-        {{ emailAddressError.message }}
-      </p>
-      <!-- End Email Address -->
-
       <!-- Start Error Message -->
       <p v-if="submitError" class="form-error tw-mt-2">
         {{ submitError.message }}
@@ -134,28 +140,359 @@
     </div>
   </div>
 </template>
-<script>
+<script setup lang="ts">
+import type { StyleValue } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { Icon, TextInput, Loader } from '@designcrowd/fe-shared-lib';
+import validator from 'validator';
 import IconStripe from '../icon/IconStripe.vue';
-import CheckoutStripeMixin from './RequestPaymentStripe.mixin.ts';
-import { requestPaymentStripeTr } from '@src/composables/useTranslate';
-
-export default {
-  components: {
-    Icon,
-    IconStripe,
-    TextInput,
-    Loader,
-  },
-  mixins: [CheckoutStripeMixin],
-  methods: {
-    requestPaymentStripeTr,
-  },
+import PaymentShippingAddress from '../shop/PaymentShippingAddress.vue';
+import { debug, debugError } from '../../../utils/debug.util';
+import * as constants from '../../constants';
+import type {
+  BrandPagePaymentConfig,
+  ButtonStyles,
+  CheckoutInformation,
+  CreateCartResult,
+  StripePaymentIntent,
+  StripeShippingDetails,
+} from '../../models';
+import { requestPaymentStripeTr } from '../../../composables/useTranslate';
+import brandPageClient from '../../clients/brand-page.client';
+
+declare global {
+  interface Window {
+    Stripe?: stripe.StripeStatic;
+  }
+}
+
+const STRIPE_SCRIPT_URL = 'https://js.stripe.com/v3/';
+const SCRIPT_TAG_NAME = 'SCRIPT';
+
+interface Props {
+  cart: CreateCartResult<StripePaymentIntent>;
+  checkoutInformation: CheckoutInformation;
+  buttonStyles: ButtonStyles;
+  paymentConfig: BrandPagePaymentConfig;
+  stripePublishableKey: string;
+  productName?: string;
+  isShop?: boolean;
+  isShippingEnabled: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  productName: undefined,
+  isShop: false,
+  isShippingEnabled: false,
+});
+
+const emit = defineEmits<{
+  (e: 'go-to-payment-option-selection'): void;
+  (e: 'success', payload: { result: unknown }): void;
+}>();
+
+const cardNumberRef = ref<HTMLElement | null>(null);
+const cardExpiryRef = ref<HTMLElement | null>(null);
+const cardCvcRef = ref<HTMLElement | null>(null);
+
+const cardCvcElement = ref<stripe.elements.Element | undefined>(undefined);
+const cardCvcElementError = ref<stripe.Error | undefined>(undefined);
+const cardExpiryElement = ref<stripe.elements.Element | undefined>(undefined);
+const cardExpiryElementError = ref<stripe.Error | undefined>(undefined);
+const cardNumberElement = ref<stripe.elements.Element | undefined>(undefined);
+const cardNumberElementError = ref<stripe.Error | undefined>(undefined);
+const emailAddress = ref<string | undefined>(undefined);
+const emailAddressError = ref<Error | undefined>(undefined);
+const isBusy = ref(false);
+const isCardCvcValid = ref(false);
+const isCardExpiryValid = ref(false);
+const isCardNumberValid = ref(false);
+const isInitialised = ref(false);
+const stripeInstance = ref<stripe.Stripe | undefined>(undefined);
+const submitButtonMessage = ref('Pay');
+const submitError = ref<Error | stripe.Error | undefined>(undefined);
+
+const shippingDetails = ref<StripeShippingDetails>({
+  name: '',
+  line1: '',
+  line2: '',
+  city: '',
+  state: '',
+  postalCode: '',
+  country: '',
+});
+
+const isShippingValid = ref(false);
+
+const amount = computed((): string => {
+  return (props.cart.totalAmount / 100).toFixed(2) || '';
+});
+
+const currencyCode = computed((): string => {
+  return props.paymentConfig?.defaultCurrency || '';
+});
+
+const currencySymbol = computed((): string => {
+  return props.paymentConfig?.defaultCurrencySymbol || '$';
+});
+
+const isStripeElementFormComplete = computed((): boolean => {
+  return (
+    isCardCvcValid.value && isCardExpiryValid.value && isCardNumberValid.value
+  );
+});
+
+const isSubmitButtonEnabled = computed((): boolean => {
+  return (
+    isInitialised.value &&
+    isStripeElementFormComplete.value &&
+    Boolean(emailAddress.value) &&
+    !emailAddressError.value &&
+    !isBusy.value &&
+    (props.isShippingEnabled ? isShippingValid.value : true)
+  );
+});
+
+const arrowStyle = computed((): StyleValue => {
+  return {
+    color: props.buttonStyles.style?.color,
+  } as StyleValue;
+});
+
+const payButtonStyle = computed((): StyleValue => {
+  if (!props.buttonStyles || !props.buttonStyles.style) {
+    return { ...props.buttonStyles } as StyleValue;
+  }
+
+  return {
+    ...props.buttonStyles.style,
+    color: props.buttonStyles.style.backgroundColor,
+    backgroundColor: props.buttonStyles.style.color,
+  } as StyleValue;
+});
+
+const containerStyle = computed((): StyleValue => {
+  const buttonStyle = { ...props.buttonStyles?.style };
+
+  return {
+    color: buttonStyle.color,
+  } as StyleValue;
+});
+
+const initialiseStripeScript = (): void => {
+  debug('initialiseStripeScript: start');
+
+  const stripeScript = Array.from(document.head.children).find(
+    (child): child is HTMLScriptElement => {
+      return (
+        child.tagName.toUpperCase() === SCRIPT_TAG_NAME &&
+        child.hasAttribute('src') &&
+        child.getAttribute('src') === STRIPE_SCRIPT_URL
+      );
+    },
+  );
+
+  if (stripeScript) {
+    debug('initialiseStripeScript: script exists');
+
+    return;
+  }
+
+  const scriptElement = document.createElement(
+    SCRIPT_TAG_NAME,
+  ) as HTMLScriptElement;
+
+  scriptElement.setAttribute('src', STRIPE_SCRIPT_URL);
+  scriptElement.setAttribute('async', '');
+  scriptElement.setAttribute('defer', '');
+
+  document.head.appendChild(scriptElement);
+
+  debug('initialiseStripeScript: script injected');
+};
+
+const initStripeElements = (): void => {
+  if (!props.stripePublishableKey) {
+    debugError('initStripeElements: stripe publishable key undefined');
+
+    return;
+  }
+
+  if (typeof window.Stripe !== 'function') {
+    setTimeout(() => {
+      debug('initStripeElements: waiting for stripe script');
+      initStripeElements();
+    }, 250);
+
+    return;
+  }
+
+  debug('initStripeElements: start');
+
+  try {
+    stripeInstance.value = window.Stripe(props.stripePublishableKey, {
+      stripeAccount: props.cart.paymentProviderExternalId,
+    });
+
+    const stripeElements = stripeInstance.value.elements();
+
+    cardNumberElement.value = stripeElements.create('cardNumber', {
+      style: constants.stripeDefaultStyle,
+      placeholder: 'Credit Card Number',
+    });
+    if (cardNumberRef.value) {
+      cardNumberElement.value.mount(cardNumberRef.value);
+    }
+    cardNumberElement.value.addEventListener('change', onStripeElementChange);
+
+    cardExpiryElement.value = stripeElements.create('cardExpiry', {
+      style: constants.stripeDefaultStyle,
+      placeholder: 'Expiry',
+    });
+    if (cardExpiryRef.value) {
+      cardExpiryElement.value.mount(cardExpiryRef.value);
+    }
+    cardExpiryElement.value.addEventListener('change', onStripeElementChange);
+
+    cardCvcElement.value = stripeElements.create('cardCvc', {
+      style: constants.stripeDefaultStyle,
+      placeholder: 'CVV',
+    });
+    if (cardCvcRef.value) {
+      cardCvcElement.value.mount(cardCvcRef.value);
+    }
+    cardCvcElement.value.addEventListener('change', onStripeElementChange);
+
+    isInitialised.value = true;
+  } catch (err) {
+    console.error(err);
+  }
+
+  debug('initStripeElements: end');
+};
+
+const onBackClick = (): void => {
+  emit('go-to-payment-option-selection');
+};
+
+const onEmailAddressEvent = (): void => {
+  validateEmailAddress();
+};
+
+const onStripeElementChange = (
+  response?: stripe.elements.ElementChangeResponse,
+): void => {
+  if (!response) {
+    return;
+  }
+
+  switch (response.elementType) {
+    case 'cardCvc':
+      isCardCvcValid.value = response.complete;
+      cardCvcElementError.value = response.error;
+      break;
+    case 'cardExpiry':
+      isCardExpiryValid.value = response.complete;
+      cardExpiryElementError.value = response.error;
+      break;
+    case 'cardNumber':
+      isCardNumberValid.value = response.complete;
+      cardNumberElementError.value = response.error;
+      break;
+  }
+};
+
+const onSubmitPaymentClick = async (): Promise<void> => {
+  if (
+    !cardNumberElement.value ||
+    !isSubmitButtonEnabled.value ||
+    !stripeInstance.value ||
+    !props.stripePublishableKey ||
+    !emailAddress.value
+  ) {
+    debugError('onSubmitPaymentClick: invalid operation');
+
+    return;
+  }
+
+  isBusy.value = true;
+
+  try {
+    const paymentIntentResponse =
+      await brandPageClient.createStripePaymentIntent({
+        cartId: props.cart.cartId,
+        customerEmail: emailAddress.value,
+        customerRequestDetails:
+          props.checkoutInformation.customerRequestDetails,
+        customerMessage: props.checkoutInformation.customerMessage,
+        shippingDetails:
+          props.isShop && props.isShippingEnabled
+            ? shippingDetails.value
+            : undefined,
+      });
+
+    if (!paymentIntentResponse) {
+      submitError.value = new Error(
+        'Unable to create payment intent. Please try again.',
+      );
+
+      return;
+    }
+
+    const confirmCardPaymentResult =
+      await stripeInstance.value.confirmCardPayment(
+        paymentIntentResponse.paymentIntent.client_secret,
+        {
+          payment_method: {
+            card: cardNumberElement.value,
+          },
+        },
+      );
+
+    if (confirmCardPaymentResult.error) {
+      debugError(confirmCardPaymentResult.error);
+      submitError.value = confirmCardPaymentResult.error;
+    } else {
+      debug('onSubmitPaymentClick: payment intent success');
+      emit('success', { result: confirmCardPaymentResult });
+    }
+  } finally {
+    isBusy.value = false;
+  }
+};
+
+const validateEmailAddress = (): void => {
+  if (!emailAddress.value) {
+    emailAddressError.value = new Error(
+      requestPaymentStripeTr('invalidEmailMessage'),
+    );
+
+    return;
+  }
+
+  if (!validator.isEmail(emailAddress.value)) {
+    emailAddressError.value = new Error(
+      requestPaymentStripeTr('invalidEmailMessage'),
+    );
+
+    return;
+  }
+
+  emailAddressError.value = undefined;
 };
+
+const onShippingValidationChange = (isValid: boolean): void => {
+  isShippingValid.value = isValid;
+};
+
+onMounted(() => {
+  initialiseStripeScript();
+  initStripeElements();
+});
 </script>
 <style scoped>
 .form-error {
-  @apply tw-text-sm;
+  @apply tw-text-xs;
   color: #f21b3f;
 }
 </style>