@akinon/pz-saved-card 1.96.0-rc.61 → 1.96.0-rc.63

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @akinon/pz-saved-card
 
+## 1.96.0-rc.63
+
+### Minor Changes
+
+- 4ca44c7: ZERO-3634: add register_consumer_card
+- 5b50079: ZERO-3634: iyzico saved card
+
+## 1.96.0-rc.62
+
 ## 1.96.0-rc.61
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/pz-saved-card",
-  "version": "1.96.0-rc.61",
+  "version": "1.96.0-rc.63",
   "license": "MIT",
   "main": "src/index.tsx",
   "peerDependencies": {

package/src/components/agreement-and-submit.tsx

@@ -1,12 +1,14 @@
-import React, { cloneElement } from 'react';
+import { cloneElement } from 'react';
 import { Button, Icon } from '@akinon/next/components';
+import { AgreementAndSubmitProps } from '../types';
 
 export const AgreementAndSubmit = ({
   agreementCheckbox,
   control,
   errors,
-  buttonText
-}) => (
+  buttonText,
+  formError
+}: AgreementAndSubmitProps) => (
   <div className="flex flex-col text-xs pb-4 px-4 sm:px-6">
     {agreementCheckbox &&
       cloneElement(agreementCheckbox, {
@@ -14,6 +16,16 @@ export const AgreementAndSubmit = ({
         error: errors.agreement,
         fieldId: 'agreement'
       })}
+    {formError?.non_field_errors && (
+      <div className="w-full text-xs text-start px-1 mt-3 text-error">
+        {formError.non_field_errors}
+      </div>
+    )}
+    {formError?.status && (
+      <div className="w-full text-xs text-start px-1 mt-3 text-error">
+        {formError.status}
+      </div>
+    )}
     <Button
       type="submit"
       className="group uppercase mt-4 inline-flex items-center justify-center"

package/src/components/card-form-section.tsx

@@ -0,0 +1,125 @@
+import React from 'react';
+import { Input, Select, Icon, Image } from '@akinon/next/components';
+import { Control, UseFormRegister, FieldErrors } from 'react-hook-form';
+
+export interface CardFormSectionProps {
+  register: UseFormRegister<any>;
+  control: Control<any>;
+  errors: FieldErrors;
+  months: Array<{ label: string; value: string }>;
+  years: Array<{ label: string; value: string }>;
+  translations?: {
+    cardHolder?: string;
+    cardNumber?: string;
+    expiryDate?: string;
+    cvv?: string;
+    cvvTooltip?: string;
+  };
+}
+
+export const CardFormSection = ({
+  register,
+  control,
+  errors,
+  months,
+  years,
+  translations = {}
+}: CardFormSectionProps) => {
+  const defaultTranslations = {
+    cardHolder: 'Cardholder Name',
+    cardNumber: 'Card Number',
+    expiryDate: 'Expiration Date',
+    cvv: 'CVV',
+    cvvTooltip: 'CVV'
+  };
+
+  const mergedTranslations = { ...defaultTranslations, ...translations };
+
+  return (
+    <div className="w-full bg-white">
+      <div className="px-4 my-2 w-full flex justify-between flex-wrap">
+        <div className="my-2 w-full sm:px-4">
+          <Input
+            label={mergedTranslations.cardHolder}
+            {...register('card_holder')}
+            error={errors.card_holder}
+          />
+        </div>
+
+        <div className="my-2 w-full flex flex-col sm:px-4">
+          <div className="text-xs text-gray-800 mb-2 w-full flex justify-between items-center">
+            <span>{mergedTranslations.cardNumber}</span>
+          </div>
+
+          <Input
+            format="#### #### #### ####"
+            mask="_"
+            allowEmptyFormatting={true}
+            control={control}
+            {...register('card_number')}
+            error={errors.card_number}
+          />
+        </div>
+
+        <div className="w-full my-2 sm:flex">
+          <div className="sm:w-2/3 sm:px-4">
+            <label
+              className="flex w-full text-xs text-start text-black-400 mb-1.5"
+              htmlFor="card_month"
+            >
+              {mergedTranslations.expiryDate}
+            </label>
+
+            <div className="flex w-full h-10 space-x-2.5">
+              <div className="w-2/4">
+                <Select
+                  className="w-full text-xs border-gray-400 sm:text-sm"
+                  options={months}
+                  {...register('card_month')}
+                  error={errors.card_month}
+                />
+              </div>
+
+              <div className="w-2/4">
+                <Select
+                  className="w-full text-xs border-gray-400 sm:text-sm"
+                  options={years}
+                  {...register('card_year')}
+                  error={errors.card_year}
+                />
+              </div>
+            </div>
+          </div>
+
+          <div className="my-2 sm:w-1/3 sm:px-4 sm:my-0">
+            <label
+              className="flex w-full text-xs text-start text-black-400 mb-1.5"
+              htmlFor="card_cvv"
+            >
+              {mergedTranslations.cvv}
+            </label>
+            <Input
+              format="###"
+              mask="_"
+              control={control}
+              allowEmptyFormatting={true}
+              {...register('card_cvv')}
+              error={errors.card_cvv}
+            />
+            <div className="group relative flex items-center justify-start text-gray-600 cursor-pointer mt-2 transition-all hover:text-secondary">
+              <span className="text-xs underline">
+                {mergedTranslations.cvvTooltip}
+              </span>
+              <Icon name="cvc" size={16} className="leading-none ml-2" />
+              <div className="hidden group-hover:block absolute right-0 bottom-5 w-[11rem] lg:w-[21rem] lg:left-auto lg:right-auto border-2">
+                <Image src="/cvv.jpg" alt="Cvv" width={385} height={264} />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div id="ucs-permission"></div>
+      </div>
+    </div>
+  );
+};

package/src/components/card-selection-section.tsx

@@ -1,5 +1,4 @@
 import { setDeletionModalId, setDeletionModalVisible } from '../redux/reducer';
-import React from 'react';
 import { ErrorText } from './error-text';
 import { CardLabel } from './card-label';
 import { DeleteIcon } from './delete-icon';

package/src/components/installment-section.tsx

@@ -1,19 +1,17 @@
 import SavedCardInstallments from './installments';
-import React from 'react';
+import { InstallmentSectionProps } from '../types';
 
 export const InstallmentSection = ({
   title,
-  selectedCard,
   installmentOptions,
   translations,
   errors
-}) => (
+}: InstallmentSectionProps) => (
   <div className="border-solid border-gray-400 bg-white">
     <div className="px-4 py-2">
       <span className="text-black-800 text-lg font-medium">{title}</span>
     </div>
     <SavedCardInstallments
-      selectedCard={selectedCard}
       installmentOptions={installmentOptions}
       translations={translations}
       error={errors}

package/src/components/installments.tsx

@@ -12,14 +12,12 @@ const defaultTranslations = {
 };
 
 type SavedCardInstallmentsProps = {
-  selectedCard: SavedCard;
   installmentOptions: any[];
   translations?: InstallmentTexts;
   error: any;
 };
 
 const SavedCardInstallments = ({
-  selectedCard,
   installmentOptions = [],
   translations,
   error
@@ -30,7 +28,6 @@ const SavedCardInstallments = ({
 
   useEffect(() => {
     if (
-      selectedCard &&
       installmentOptions.length > 0 &&
       installmentOptions[0]?.pk !== installmentOption
     ) {
@@ -40,7 +37,7 @@ const SavedCardInstallments = ({
       });
       setInstallmentOption(firstOptionPk);
     }
-  }, [installmentOptions, installmentOption, setInstallment, selectedCard]);
+  }, [installmentOptions, installmentOption, setInstallment]);
 
   if (installmentOptions.length === 0) {
     return (

package/src/index.tsx

@@ -1,5 +1,11 @@
 import savedCardReducer from './redux/reducer';
 import savedCardMiddleware from './redux/middleware';
 import SavedCardOption from './views/saved-card-option';
+import IyzicoSavedCardOption from './views/iyzico-saved-card-option';
 
-export { savedCardReducer, savedCardMiddleware, SavedCardOption };
+export {
+  savedCardReducer,
+  savedCardMiddleware,
+  SavedCardOption,
+  IyzicoSavedCardOption
+};

package/src/redux/api.ts

@@ -21,20 +21,49 @@ interface GetResponse<T> {
   results: T[];
 }
 
-type SetSavedCardRequest = {
+type DefaultSetSavedCardRequest = {
   card: SavedCard;
 };
 
+type IyzicoSetSavedCardRequest = {
+  card: string;
+};
+
+type SetSavedCardRequest =
+  | DefaultSetSavedCardRequest
+  | IyzicoSetSavedCardRequest;
+
 type DeleteSavedCardRequest = number;
 
 type SetInstallmentRequest = {
   installment: string;
 };
 
-type CompleteSavedCardRequest = {
+type DefaultCompleteSavedCardRequest = {
   agreement: boolean;
 };
 
+type IyzicoCompleteSavedCardRequest =
+  | {
+      agreement: boolean;
+      register_consumer_card: boolean;
+      consumer_token: string;
+      card_token: string;
+    }
+  | {
+      agreement: boolean;
+      card_holder: string;
+      card_number: string;
+      card_cvv: string;
+      card_month: string;
+      card_year: string;
+      register_consumer_card: boolean;
+    };
+
+type CompleteSavedCardRequest =
+  | DefaultCompleteSavedCardRequest
+  | IyzicoCompleteSavedCardRequest;
+
 export const savedCardApi = api.injectEndpoints({
   endpoints: (build) => ({
     getSavedCards: build.query<GetResponse<SavedCard>, void>({
@@ -71,7 +100,7 @@ export const savedCardApi = api.injectEndpoints({
         ),
         method: 'POST',
         body: {
-          card: card.token
+          card: typeof card === 'string' ? card : card.token
         }
       }),
       async onQueryStarted({ card }, { dispatch, queryFulfilled }) {
@@ -106,7 +135,7 @@ export const savedCardApi = api.injectEndpoints({
       CheckoutResponse,
       CompleteSavedCardRequest
     >({
-      query: ({ agreement }) => ({
+      query: (body) => ({
         url: buildClientRequestUrl(
           `/orders/checkout?page=CompleteSavedCardRequest`,
           {
@@ -114,9 +143,7 @@ export const savedCardApi = api.injectEndpoints({
           }
         ),
         method: 'POST',
-        body: {
-          agreement
-        }
+        body
       }),
       async onQueryStarted(arg, { dispatch, queryFulfilled }) {
         dispatch(setPaymentStepBusy(true));

package/src/redux/middleware.ts

@@ -1,22 +1,27 @@
 import { Middleware } from '@reduxjs/toolkit';
-import { setCards } from './reducer';
+import { setCards, setUcs } from './reducer';
 
 const savedCardMiddleware: Middleware = ({ dispatch }) => {
   return (next) => (action) => {
     const result = next(action);
 
     const savedCardContext = result.payload?.context_list?.find(
-      (context) =>
-        context.page_slug === 'savedcardselectionpage' &&
-        context.page_context.cards
+      (context) => context.page_slug === 'savedcardselectionpage'
     );
 
-    if (savedCardContext) {
+    if (savedCardContext && savedCardContext.page_context?.cards) {
       const cards = JSON.parse(
         JSON.stringify(savedCardContext.page_context.cards)
       );
 
       dispatch(setCards(cards));
+    } else if (savedCardContext && savedCardContext.page_context?.ucs) {
+      const ucs = JSON.parse(JSON.stringify(savedCardContext.page_context.ucs));
+
+      const match = ucs.script.match(/<script\b[^>]*>([\s\S]*?)<\/script>/);
+      ucs.script = match ? match[1] : ucs.script;
+
+      dispatch(setUcs(ucs));
     }
 
     return result;

package/src/redux/reducer.ts

@@ -7,12 +7,20 @@ export type SavedCard = {
   token: string;
 };
 
+export type IyzicoUcs = {
+  maskedGsmNumber?: string;
+  script?: string;
+  scriptType?: string;
+  ucsToken?: string;
+};
+
 export interface SavedCardState {
   cards?: Array<SavedCard>;
   deletion: {
     id: number;
     isModalVisible: boolean;
   };
+  ucs?: IyzicoUcs;
 }
 
 const initialState: SavedCardState = {
@@ -35,11 +43,22 @@ const savedCardSlice = createSlice({
     },
     setDeletionModalVisible(state, { payload }) {
       state.deletion.isModalVisible = payload;
+    },
+    setUcs(state, action: { payload: IyzicoUcs }) {
+      state.ucs = action.payload;
+    },
+    resetUcs() {
+      return initialState;
     }
   }
 });
 
-export const { setCards, setDeletionModalId, setDeletionModalVisible } =
-  savedCardSlice.actions;
+export const {
+  setCards,
+  setDeletionModalId,
+  setDeletionModalVisible,
+  setUcs,
+  resetUcs
+} = savedCardSlice.actions;
 
 export default savedCardSlice.reducer;

package/src/types/index.ts

@@ -1,4 +1,5 @@
 import { ReactElement } from 'react';
+import { Control, FieldErrors } from 'react-hook-form';
 
 export type InstallmentTexts = {
   title?: string;
@@ -15,6 +16,9 @@ export type DeletePopupTexts = {
 
 export type ErrorTexts = {
   required?: string;
+  cardNumberLength?: string;
+  cvvLength?: string;
+  cardHolderMatches?: string;
 };
 
 export type SavedCardOptionTexts = {
@@ -25,6 +29,28 @@ export type SavedCardOptionTexts = {
   errors?: ErrorTexts;
 };
 
+export type IyzicoSavedCardOptionTexts = {
+  title?: string;
+  button?: string;
+  installment?: InstallmentTexts;
+  errors?: ErrorTexts & {
+    saveCardRequired?: string;
+  };
+  label?: {
+    cardHolder?: string;
+    cardNumber?: string;
+    expiryDate?: string;
+    cvv?: string;
+  };
+  placeholder?: {
+    cardHolder?: string;
+    cardMonth?: string;
+    cardYear?: string;
+  };
+  savedCardsTitle?: string;
+  paymentErrorMessage?: string;
+};
+
 export type CardSelectionSectionProps = {
   title: string;
   cards: any[];
@@ -37,15 +63,34 @@ export type CardSelectionSectionProps = {
 
 export type InstallmentSectionProps = {
   title: string;
-  selectedCard: any;
   installmentOptions: any;
   translations: InstallmentTexts;
   errors: any;
+  setFormValue?: any;
 };
 
-export type AgreementAndSubmitProps = {
-  agreementCheckbox: ReactElement | undefined;
+export interface AgreementAndSubmitProps {
+  agreementCheckbox?: ReactElement;
+  control: Control<any>;
+  errors: FieldErrors;
+  buttonText: string;
+  formError?: {
+    non_field_errors?: string;
+    status?: string;
+    [key: string]: any;
+  };
+}
+
+export type CardFormSectionProps = {
+  register: any;
   control: any;
   errors: any;
-  buttonText: string;
+  months: Array<{ label: string; value: string }>;
+  years: Array<{ label: string; value: string }>;
+  translations?: IyzicoSavedCardOptionTexts['label'];
+  setFormValue?: any;
+};
+
+export type IyzicoSavedCardsProps = {
+  title?: string;
 };

package/src/views/iyzico-saved-card-option.tsx

@@ -0,0 +1,440 @@
+'use client';
+
+import * as yup from 'yup';
+import { ObjectSchema } from 'yup';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useForm } from 'react-hook-form';
+import {
+  FormHTMLAttributes,
+  HTMLAttributes,
+  ReactElement,
+  useEffect,
+  useMemo,
+  useState
+} from 'react';
+import { useAppSelector } from '@akinon/next/redux/hooks';
+import {
+  useCompleteSavedCardMutation,
+  useSetSavedCardMutation
+} from '../redux/api';
+
+import {
+  AgreementAndSubmitProps,
+  CardFormSectionProps,
+  ErrorTexts,
+  InstallmentSectionProps,
+  IyzicoSavedCardOptionTexts,
+  IyzicoSavedCardsProps
+} from '../types';
+import { InstallmentSection } from '../components/installment-section';
+import { AgreementAndSubmit } from '../components/agreement-and-submit';
+import { CardFormSection } from '../components/card-form-section';
+import Script from 'next/script';
+
+type IyzicoSavedCardOptionProps = {
+  texts?: IyzicoSavedCardOptionTexts;
+  agreementCheckbox?: ReactElement;
+  customFormSchema?: {
+    'new-card'?: ObjectSchema<any>;
+    'existing-card'?: ObjectSchema<any>;
+  };
+  customRender?: {
+    cardFormSection?: (props: CardFormSectionProps) => ReactElement;
+    savedCardsSection?: (props: IyzicoSavedCardsProps) => ReactElement;
+    installmentSection?: (props: InstallmentSectionProps) => ReactElement;
+    agreementAndSubmit?: (props: AgreementAndSubmitProps) => ReactElement;
+  };
+  formWrapperClassName?: string;
+  cardSelectionWrapperClassName?: string;
+  installmentWrapperClassName?: string;
+  formProps?: FormHTMLAttributes<HTMLFormElement>;
+  cardSelectionWrapperProps?: HTMLAttributes<HTMLDivElement>;
+  installmentWrapperProps?: HTMLAttributes<HTMLDivElement>;
+};
+
+const defaultTranslations: IyzicoSavedCardOptionTexts = {
+  title: 'Pay with Iyzico',
+  button: 'Complete Payment',
+  installment: {
+    title: 'Installment Options'
+  },
+  errors: {
+    required: 'This field is required',
+    cardNumberLength: 'Card number must be 16 digits long.',
+    cvvLength: 'CVV must be 3 digits long.',
+    cardHolderMatches: 'Please enter a valid name',
+    saveCardRequired: 'Please select the Save My Card option'
+  },
+  label: {
+    cardHolder: 'Cardholder Name',
+    cardNumber: 'Card Number',
+    expiryDate: 'Expiration Date',
+    cvv: 'CVV'
+  },
+  placeholder: {
+    cardHolder: 'Name on Card',
+    cardMonth: 'Month',
+    cardYear: 'Year'
+  },
+  savedCardsTitle: 'Select from your saved cards:',
+  paymentErrorMessage: 'An error occurred while processing your payment'
+};
+
+const mergeTranslations = (
+  customTranslations: IyzicoSavedCardOptionTexts,
+  defaultTranslations: IyzicoSavedCardOptionTexts
+) => {
+  return {
+    ...defaultTranslations,
+    ...customTranslations,
+    installment: {
+      ...defaultTranslations.installment,
+      ...customTranslations.installment
+    },
+    errors: {
+      ...defaultTranslations.errors,
+      ...customTranslations.errors
+    },
+    label: {
+      ...defaultTranslations.label,
+      ...customTranslations.label
+    },
+    placeholder: {
+      ...defaultTranslations.placeholder,
+      ...customTranslations.placeholder
+    }
+  };
+};
+
+const createFormSchema = (
+  errors: ErrorTexts,
+  type: 'existing-card' | 'new-card'
+) => {
+  const baseSchema = {
+    agreement: yup
+      .boolean()
+      .oneOf([true], errors?.required ?? defaultTranslations.errors.required)
+  };
+
+  if (type === 'new-card') {
+    return yup.object().shape({
+      ...baseSchema,
+      card_holder: yup
+        .string()
+        .required(errors?.required ?? defaultTranslations.errors.required)
+        .matches(
+          /^[a-zA-ZğüşöçıİĞÜŞÖÇ\s]+$/,
+          errors?.cardHolderMatches ??
+            defaultTranslations.errors.cardHolderMatches
+        ),
+      card_number: yup
+        .string()
+        .transform((value: string) => value.replace(/_/g, '').replace(/ /g, ''))
+        .length(
+          16,
+          errors?.cardNumberLength ??
+            defaultTranslations.errors.cardNumberLength
+        )
+        .required(errors?.required ?? defaultTranslations.errors.required),
+      card_month: yup
+        .string()
+        .required(errors?.required ?? defaultTranslations.errors.required),
+      card_year: yup
+        .string()
+        .required(errors?.required ?? defaultTranslations.errors.required),
+      card_cvv: yup
+        .string()
+        .transform((value: string) => value.replace(/_/g, '').replace(/ /g, ''))
+        .length(3, errors?.cvvLength ?? defaultTranslations.errors.cvvLength)
+        .required(errors?.required ?? defaultTranslations.errors.required)
+    });
+  }
+
+  return yup.object().shape(baseSchema);
+};
+
+const IyzicoSavedCardOption = ({
+  texts = defaultTranslations,
+  agreementCheckbox,
+  customFormSchema,
+  customRender,
+  formWrapperClassName = 'flex flex-wrap w-full',
+  cardSelectionWrapperClassName = 'w-full flex flex-col xl:w-6/10',
+  installmentWrapperClassName = 'w-full xl:w-4/10 xl:border-l xl:border-t-0',
+  formProps = {},
+  cardSelectionWrapperProps = {},
+  installmentWrapperProps = {}
+}: IyzicoSavedCardOptionProps) => {
+  const mergedTexts = useMemo(
+    () => mergeTranslations(texts, defaultTranslations),
+    [texts]
+  );
+  const [completeSavedCard] = useCompleteSavedCardMutation();
+  const [setSavedCard] = useSetSavedCardMutation();
+  const installmentOptions = useAppSelector(
+    (state) => state.checkout.installmentOptions
+  );
+  const ucs = useAppSelector((state) => state.savedCard.ucs);
+  const [type, setType] = useState<'new-card' | 'existing-card'>('new-card');
+  const [months, setMonths] = useState([]);
+  const [years, setYears] = useState([]);
+  const [formError, setFormError] = useState(null);
+
+  const getFormSchema = () => {
+    if (customFormSchema?.[type]) {
+      return customFormSchema[type];
+    }
+    return createFormSchema(mergedTexts.errors, type);
+  };
+
+  const {
+    register,
+    handleSubmit,
+    control,
+    formState: { errors },
+    setValue: setFormValue
+  } = useForm({
+    resolver: yupResolver(getFormSchema())
+  });
+
+  const onSubmit = async (data) => {
+    if (!window.iyziUcsInit) {
+      return;
+    }
+
+    setFormError(null);
+
+    try {
+      if (type === 'existing-card') {
+        const res = await completeSavedCard({
+          agreement: data.agreement,
+          register_consumer_card:
+            window.universalCardStorage.registerConsumerCard,
+          consumer_token: window.universalCardStorage.consumerToken,
+          card_token: window.universalCardStorage.cardToken
+        });
+
+        if ('data' in res && res.data?.errors) {
+          setFormError(res.data.errors);
+        }
+      } else {
+        if (!window.universalCardStorage?.registerConsumerCard) {
+          setFormError({
+            register_consumer_card: mergedTexts.errors?.saveCardRequired
+          });
+          return;
+        }
+
+        const res = await completeSavedCard({
+          agreement: data.agreement,
+          card_holder: data.card_holder,
+          card_number: data.card_number.replaceAll(' ', ''),
+          card_month: data.card_month,
+          card_year: data.card_year,
+          card_cvv: data.card_cvv,
+          register_consumer_card:
+            window.universalCardStorage.registerConsumerCard
+        });
+
+        if ('data' in res && res.data?.errors) {
+          setFormError(res.data.errors);
+        }
+      }
+    } catch (error) {
+      console.error('Error completing saved card:', error);
+      setFormError({
+        non_field_errors:
+          mergedTexts.paymentErrorMessage ??
+          defaultTranslations.paymentErrorMessage
+      });
+    }
+  };
+
+  const ucsScript = ucs?.script && (
+    <Script
+      id="saved_card"
+      strategy="afterInteractive"
+      dangerouslySetInnerHTML={{ __html: ucs.script }}
+    />
+  );
+
+  useEffect(() => {
+    window.iyziUcsInit?.createTag();
+
+    const monthsList = [
+      {
+        label:
+          mergedTexts.placeholder?.cardMonth ??
+          defaultTranslations.placeholder.cardMonth,
+        value: ''
+      }
+    ];
+    const yearsList = [
+      {
+        label:
+          mergedTexts.placeholder?.cardYear ??
+          defaultTranslations.placeholder.cardYear,
+        value: ''
+      }
+    ];
+    const date = new Date();
+    const currentYear = date.getFullYear();
+
+    for (let i = 1; i <= 12; i++) {
+      monthsList.push({ label: i.toString(), value: i.toString() });
+    }
+
+    for (let i = currentYear; i < currentYear + 13; i++) {
+      yearsList.push({ label: i.toString(), value: i.toString() });
+    }
+
+    setMonths(monthsList);
+    setYears(yearsList);
+
+    if (window.iyziUcsInit?.ucsToken) {
+      setSavedCard({
+        card: window.iyziUcsInit.ucsToken
+      });
+    }
+  }, []);
+
+  useEffect(() => {
+    if (window.iyziUcsInit?.scriptType === 'CONSUMER_WITH_CARD_EXIST') {
+      if (
+        !window.universalCardStorage?.consumerToken ||
+        window.universalCardStorage?.cardToken
+      ) {
+        setType('existing-card');
+      } else {
+        setType('new-card');
+      }
+    } else {
+      setType('new-card');
+    }
+
+    const checkInterval = setInterval(() => {
+      if (window.iyziUcsInit?.scriptType === 'CONSUMER_WITH_CARD_EXIST') {
+        if (
+          !window.universalCardStorage?.consumerToken ||
+          window.universalCardStorage?.cardToken
+        ) {
+          setType('existing-card');
+        } else {
+          setType('new-card');
+        }
+      }
+    }, 500);
+
+    return () => clearInterval(checkInterval);
+  }, [type]);
+
+  return (
+    <>
+      <form
+        className={formWrapperClassName}
+        onSubmit={handleSubmit(onSubmit)}
+        {...formProps}
+      >
+        <div
+          className={cardSelectionWrapperClassName}
+          {...cardSelectionWrapperProps}
+        >
+          {mergedTexts.title && (
+            <div className="border-solid border-gray-400 px-4 py-2">
+              <span className="text-black-800 text-lg font-medium">
+                {mergedTexts.title}
+              </span>
+            </div>
+          )}
+
+          {window.iyziUcsInit?.scriptType === 'CONSUMER_WITH_CARD_EXIST' && (
+            <>
+              {customRender?.savedCardsSection ? (
+                customRender.savedCardsSection({
+                  title: mergedTexts.savedCardsTitle
+                })
+              ) : (
+                <div>
+                  <h3 className="text-sm font-medium text-gray-800 mb-3 px-4 sm:px-6">
+                    {mergedTexts.savedCardsTitle}
+                  </h3>
+                  <div id="ucs-cards" className="mb-3 px-4 sm:px-6"></div>
+                </div>
+              )}
+            </>
+          )}
+
+          {type === 'new-card' && (
+            <>
+              {customRender?.cardFormSection ? (
+                customRender.cardFormSection({
+                  register,
+                  control,
+                  errors,
+                  months,
+                  years,
+                  translations: mergedTexts.label,
+                  setFormValue
+                })
+              ) : (
+                <CardFormSection
+                  register={register}
+                  control={control}
+                  errors={errors}
+                  months={months}
+                  years={years}
+                  translations={mergedTexts.label}
+                />
+              )}
+            </>
+          )}
+        </div>
+
+        <div
+          className={installmentWrapperClassName}
+          {...installmentWrapperProps}
+        >
+          {customRender?.installmentSection ? (
+            customRender.installmentSection({
+              title: mergedTexts.installment?.title,
+              installmentOptions,
+              translations: mergedTexts.installment,
+              errors: errors.installment,
+              setFormValue
+            })
+          ) : (
+            <InstallmentSection
+              title={mergedTexts.installment?.title}
+              installmentOptions={installmentOptions}
+              translations={mergedTexts.installment}
+              errors={errors.installment}
+            />
+          )}
+
+          <div className="flex flex-col text-xs">
+            {customRender?.agreementAndSubmit ? (
+              customRender.agreementAndSubmit({
+                agreementCheckbox,
+                control,
+                errors,
+                buttonText: mergedTexts.button,
+                formError
+              })
+            ) : (
+              <AgreementAndSubmit
+                agreementCheckbox={agreementCheckbox}
+                control={control}
+                errors={errors}
+                buttonText={mergedTexts.button}
+                formError={formError}
+              />
+            )}
+          </div>
+        </div>
+      </form>
+      {ucsScript}
+    </>
+  );
+};
+
+export default IyzicoSavedCardOption;

package/src/views/saved-card-option.tsx

@@ -183,7 +183,6 @@ const SavedCardOption = ({
           {customRender?.installmentSection ? (
             customRender.installmentSection({
               title: mergedTexts.installment?.title,
-              selectedCard,
               installmentOptions,
               translations: mergedTexts.installment,
               errors: errors.installment
@@ -191,7 +190,6 @@ const SavedCardOption = ({
           ) : (
             <InstallmentSection
               title={mergedTexts.installment?.title}
-              selectedCard={selectedCard}
               installmentOptions={installmentOptions}
               translations={mergedTexts.installment}
               errors={errors.installment}