@akinon/pz-masterpass 1.92.0 → 1.93.0-rc.47

package/CHANGELOG.md

@@ -1,9 +1,28 @@
 # @akinon/pz-masterpass
 
+## 1.93.0-rc.47
+
+## 1.93.0-rc.46
+
+### Minor Changes
+
+- d8be48fb: ZERO-3422: Update fetch method to use dynamic request method in wallet complete redirection middleware
+- ad0bec92: ZERO-3364 :Update readme file for masterpass
+- 16aff543: ZERO-3431: Add test script for redirect utility in package.json
+- 64699d3ff: ZERO-2761: Fix invalid import for plugin module
+- e974d8e8: ZERO-3406: Fix rc build
+- b31333ed: ZERO-3357 :Add components with renderer properties for customizable UI elements in pz-masterpass
+- 7eb51ca9: ZERO-3424 :Update package versions
+- 7727ae55: ZERO-3073: Refactor basket page to use server-side data fetching and simplify component structure
+- 8b1d24eb: ZERO-3422: Update fetch method to use dynamic request method in wallet complete redirection middleware
+- 33377cfd: ZERO-3267: Refactor import statement for ROUTES in error-page component
+
 ## 1.92.0
 
 ## 1.91.0
 
+> > > > > > > origin/ZERO-3418
+
 ## 1.90.0
 
 ## 1.89.0

package/README.md

@@ -12,10 +12,14 @@ npx @akinon/projectzero@latest --plugins
 
 ## Available Props
 
-### Masterpass Provider
+## Masterpass Provider
 
 ##### File Path: src/app/[commerce]/[locale]/[currency]/orders/checkout/page.tsx
 
+### Usage Examples
+
+##### Default Usage
+
 ```javascript
 <PluginModule
   component={Component.MasterpassProvider}
@@ -29,7 +33,7 @@ npx @akinon/projectzero@latest --plugins
 </PluginModule>
 ```
 
-### Additional Params
+##### Customized Usage with Additional Params
 
 ##### To add extra parameters, it can be added by passing additional Params property to the Masterpass Provider.
 
@@ -51,8 +55,30 @@ npx @akinon/projectzero@latest --plugins
 
 ### Delete Confirmation Modal
 
+#### Props
+
+| Props | Type | Required | Description |
+| --- | --- | --- | --- |
+| translations | typeof defaultTranslations | Optional | Used to customize the default texts. |
+| renderer | RendererProps | Optional | Renderer functions that can be used to customize all subcomponents. |
+
+#### RendererProps
+
+| Props | Type | Description |
+| --- | --- | --- |
+| open | boolean | It is information whether the modal is open or not. |
+| setOpen | (open: boolean) => void | Used to manage modal on/off operation. |
+| onConfirm | () => void | This is the function that will perform the deletion operation. |
+| onCancel | () => void | This is the function that will be run if the user cancels the deletion process. |
+| loading | boolean | Indicates the loading status during the deletion process. |
+| error | string / null | Error message to be displayed if an error occurs during deletion. |
+
 ##### File Path: src/app/[commerce]/[locale]/[currency]/orders/checkout/page.tsx
 
+### Usage Examples
+
+##### Default Usage
+
 ```javascript
 <PluginModule
   component={Component.MasterpassDeleteConfirmationModal}
@@ -66,10 +92,70 @@ npx @akinon/projectzero@latest --plugins
 />
 ```
 
+##### Customized Usage with Renderer
+
+```javascript
+<PluginModule
+  component={Component.MasterpassDeleteConfirmationModal}
+  props={{
+    renderer: {
+      Content: ({ open, setOpen, onConfirm, onCancel, loading, error }) => (
+        <Modal
+          open={open}
+          setOpen={setOpen}
+          className="w-full sm:w-[28rem]"
+          portalId="masterpass-remove-card-modal"
+        >
+          <div className="flex flex-col items-center p-5">
+            <div className="text-xs mb-3">
+              Are you sure you want to delete your card?
+            </div>
+            <Button onClick={onConfirm} className="bg-red-600 text-black">
+              {loading ? 'Deletion...' : 'Delete'}
+            </Button>
+            <Button appearance="outlined" onClick={onCancel}>
+              Cancel
+            </Button>
+            {error && (
+              <p className="text-red-500 text-sm mt-2 text-center">
+                🚨 {error}
+              </p>
+            )}
+          </div>
+        </Modal>
+      )
+    }
+  }}
+/>
+```
+
 ### OTP Modal
 
+#### Props
+
+| Props | Type | Required | Description |
+| --- | --- | --- | --- |
+| translations | { [key: string]: string } | Optional | Translation object to customize all texts. Overrides default texts. |
+| renderer | RendererProps | Optional | Renderer functions that can be used to customize all subcomponents. |
+
+#### RendererProps
+
+| Props | Type | Description |
+| --- | --- | --- |
+| open | boolean | It is information whether the modal is open or not. |
+| setOpen | (open: boolean) => void | Used to manage modal on/off operation. |
+| onSubmit | (data: { otp_code: string }) => void | Sends the OTP code entered by the user. |
+| loading | boolean | Indicates the loading status during validation. |
+| error | string / null | Error message to be displayed if there is an error. |
+| resendSms | () => void | Function triggered when the user requests SMS again. |
+| resendSmsFetching | boolean | Indicates the loading status during the resending process. |
+| targetDate | number | When the countdown will end (as a timestamp). |
+| otpRef | string / null | Transaction reference number, if applicable. |
+
 ##### File Path: src/app/[commerce]/[locale]/[currency]/orders/checkout/page.tsx
 
+##### Default Usage
+
 ```javascript
 <PluginModule
   component={Component.MasterpassOtpModal}
@@ -86,10 +172,127 @@ npx @akinon/projectzero@latest --plugins
 />
 ```
 
+##### Customized Usage with Renderer
+
+```javascript
+<PluginModule
+  component={Component.MasterpassOtpModal}
+  props={{
+    renderer: {
+      Content: ({
+        open,
+        setOpen,
+        onSubmit,
+        loading,
+        error,
+        resendSms,
+        resendSmsFetching,
+        targetDate,
+        otpRef
+      }) => {
+        const [code, setCode] = useState('');
+        const [remainingSeconds, setRemainingSeconds] = useState(
+          Math.ceil((targetDate - Date.now()) / 1000)
+        );
+        useEffect(() => {
+          if (!targetDate) return;
+          const interval = setInterval(() => {
+            const secondsLeft = Math.ceil((targetDate - Date.now()) / 1000);
+            setRemainingSeconds(secondsLeft);
+            if (secondsLeft <= 0) {
+              clearInterval(interval);
+            }
+          }, 1000);
+          return () => clearInterval(interval);
+        }, [targetDate]);
+        return (
+          <Modal
+            open={open}
+            setOpen={setOpen}
+            className="w-full sm:w-[28rem]"
+            portalId="otp-masterpass"
+          >
+            <div className="px-6 py-4">
+              <h2 className="text-center text-xl text-primary-600 font-semibold">
+                Verification Required
+              </h2>
+              <form
+                onSubmit={(e) => {
+                  e.preventDefault();
+                  onSubmit({ otp_code: code });
+                }}
+                className="flex flex-col items-center mt-4"
+              >
+                <label
+                  htmlFor="otp_code"
+                  className="text-sm mb-1 text-gray-700"
+                >
+                  SMS Code
+                </label>
+                <input
+                  id="otp_code"
+                  maxLength={6}
+                  value={code}
+                  onChange={(e) => setCode(e.target.value)}
+                  placeholder="••••••"
+                  className="border p-2 rounded w-full max-w-[200px] text-center tracking-widest"
+                />
+                <Button
+                  type="submit"
+                  className="mt-4 px-4 py-2 bg-blue-600 text-black rounded"
+                >
+                  Verify
+                </Button>
+                {error && <p className="mt-2 text-xs text-red-500">{error}</p>}
+              </form>
+              <div className="mt-2 flex justify-center text-sm text-gray-600">
+                {remainingSeconds > 0
+                  ? `Time remaining: ${remainingSeconds} seconds`
+                  : 'Time is up'}
+              </div>
+              <div className="mt-2 flex justify-center">
+                <Button
+                  onClick={resendSms}
+                  disabled={loading}
+                  className="mt-4 text-sm underline text-secondary-500"
+                >
+                  {resendSmsFetching ? 'Code sent' : 'Resend SMS code'}
+                </Button>
+              </div>
+            </div>
+          </Modal>
+        );
+      }
+    }
+  }}
+/>
+```
+
 ### Link Modal
 
+#### Props
+
+| Props | Type | Required | Description |
+| --- | --- | --- | --- |
+| translations | { [key: string]: string } | Optional | Translation object to customize all texts. Overrides default texts. |
+| renderer | RendererProps | Optional | Renderer functions that can be used to customize all subcomponents. |
+
+#### RendererProps
+
+| Props | Type | Description |
+| --- | --- | --- |
+| open | boolean | It is information whether the modal is open or not. |
+| setOpen | (open: boolean) => void | Used to manage modal on/off operation. |
+| onClick | () => void | It is the function that is called when the user clicks the "Use" button. |
+| loading | boolean | This is the loading status that will be displayed during the API request. |
+| error | string | If there is an error in the API response, a message is displayed in this field. |
+
 ##### File Path: src/app/[commerce]/[locale]/[currency]/orders/checkout/page.tsx
 
+### Usage Examples
+
+##### Default Usage
+
 ```javascript
 <PluginModule
   component={Component.MasterpassLinkModal}
@@ -103,10 +306,67 @@ npx @akinon/projectzero@latest --plugins
 />
 ```
 
+##### Customized Usage with Renderer
+
+```javascript
+<PluginModule
+  component={Component.MasterpassLinkModal}
+  props={{
+    renderer: {
+      Content: ({ open, setOpen, onClick, loading, error }) => (
+        <Modal
+          open={open}
+          setOpen={setOpen}
+          className="w-full sm:w-[28rem]"
+          portalId="masterpass-check-user"
+        >
+          <div className="p-10">
+            <p className="text-sm text-center">
+              You have cards registered to your Masterpass account. Do you want
+              to use your cards?
+            </p>
+            <Button
+              onClick={onClick}
+              disabled={loading}
+              className="bg-green-600 text-error w-full py-2 mt-4"
+            >
+              {loading ? 'Loading...' : 'Use'}
+            </Button>
+            {error && <p className="text-error text-sm">{error}</p>}
+          </div>
+        </Modal>
+      )
+    }
+  }}
+/>
+```
+
 ### Card List
 
+#### Props
+
+| Props | Type | Required | Description |
+| --- | --- | --- | --- |
+| className | string | Optional | Gives an additional style class to the component's outer container. |
+| translations | { [key: string]: string } | Optional | Translation object to customize all texts. Overrides default texts. |
+| renderer | RendererProps | Optional | Renderer functions that can be used to customize all subcomponents. |
+
+#### RendererProps
+
+| Props | Type | Description |
+| --- | --- | --- |
+| Header | JSX.Element | Used to customize the title area at the top of the card list. |
+| CardItem | (params: { card, selectedCard, onSelect, DeleteButton }) => JSX.Element | It allows you to fully customize the card element. |
+| Loader | () => JSX.Element | Used to define a custom loader component to be displayed when loading cards. |
+| ErrorFallback | (params: { error: string; onRetry: () => void }) => JSX.Element | Custom widget to be shown if an error occurs while loading cards. |
+| SwitchPaymentButton | (props: { onClick: () => void; label: string }) => JSX.Element | Used to customize the "Pay with a new card" option. |
+
 ##### File Path: src/views/checkout/steps/payment/options/credit-card/index.tsx
 
+### Usage Examples
+
+##### Default Usage
+
 ```javascript
 <PluginModule
   component={Component.MasterpassCardList}
@@ -121,10 +381,127 @@ npx @akinon/projectzero@latest --plugins
 />
 ```
 
+##### Customized Usage with Renderer
+
+```javascript
+<PluginModule
+  component={Component.MasterpassCardList}
+  props={{
+    className: 'px-10',
+    form: {
+      control,
+      register,
+      errors,
+      setFormValue,
+      clearErrors
+    },
+    renderer: {
+      Header: () => (
+        <div className="flex items-center gap-2 mt-4 px-10 text-success">
+          Select a card to pay
+        </div>
+      ),
+      Loader: () => (
+        <div className="flex justify-center items-center p-10">
+          <span className="text-lg font-bold text-error">
+            Loading your cards...
+          </span>
+        </div>
+      ),
+      ErrorFallback: ({ error, onRetry }) => (
+        <div className="text-center p-8">
+          <h2 className="text-red-500 text-xl mb-4">Oops! {error}</h2>
+          <Button onClick={onRetry}>Try Again</Button>
+        </div>
+      ),
+      CardItem: ({ card, onSelect, DeleteButton, selectedCard }) => (
+        <li
+          key={card.UniqueId}
+          className="p-4 cursor-pointer rounded-[10px] border-gray border space-x-5 pl-5 mb-6 md:mb-2.5"
+          onClick={() => onSelect(card)}
+        >
+          <div className="flex justify-between items-center">
+            <div className="flex items-center">
+              <Checkbox
+                key={
+                  selectedCard?.UniqueId === card.UniqueId
+                    ? 'selected'
+                    : 'not-selected'
+                }
+                checked={selectedCard?.UniqueId === card.UniqueId}
+                onChange={() => onSelect(card)}
+                className="mr-2"
+              />
+              <div>
+                <h3 className="font-semibold">{card.Name}</h3>
+                <p className="text-xs text-gray-500">{card.Value1}</p>
+              </div>
+            </div>
+            <DeleteButton cardAliasName={card.Name} />
+          </div>
+        </li>
+      ),
+      SwitchPaymentButton: ({ onClick, label }) => (
+        <div className="px-10">
+          <button
+            onClick={onClick}
+            className="p-4 w-full text-left cursor-pointer rounded-[10px] border-gray border space-x-5 pl-5 mb-6 md:mb-2.5"
+          >
+            {label}
+          </button>
+        </div>
+      )
+    }
+  }}
+/>
+```
+
 ### Card Registration
 
+#### Props
+
+| Props | Type | Required | Description |
+| --- | --- | --- | --- |
+| getValues | () => Record<string, string> | Required | Returns the values ​​of form fields. |
+| className | string | Optional | Gives an additional CSS class to the outer container. |
+| infoModalContent | React.ReactNode | Optional | Body content for the informational modal. |
+| infoModalIcon | React.ReactNode | Optional | Used to override the notification icon. |
+| translations | typeof defaultTranslations | Optional | Can be used to override default texts. |
+| renderer | RendererProps | Optional | Renderer functions that can be used to customize all subcomponents. |
+
+#### RendererProps
+
+| Props | Type | Description |
+| --- | --- | --- |
+| Content | (props: { isChecked, toggle, setIsInfoModalOpen, onChange, onSubmit, loading, error, showGoBackLink?, onClickGoBackLink? }) => JSX.Element | Used to render the main content. |
+| InfoModal | (props: { open: boolean; setOpen: (value: boolean) => void }) => JSX.Element | Can be used to override the notification modal. |
+
 ##### File Path: src/views/checkout/steps/payment/options/credit-card/index.tsx
 
+### Usage Examples
+
+##### Default Usage
+
+```javascript
+<PluginModule
+  component={Component.MasterpassCardRegistration}
+  props={{
+    // Do not remove getValues, it is used to get the form values
+    getValues,
+    translations: {
+      enter_card_name: 'Enter card name',
+      continue: 'Continue',
+      pay_with_my_masterpass_card: 'Pay with my Masterpass card',
+      terms_and_conditions: 'Masterpass terms and conditions',
+      card_registration_consent:
+        'I want to store my card information in the Mastercard infrastructure and use it again in my next purchase.'
+    }
+  }}
+/>
+```
+
+##### Customized Usage with className, infoModalContent, infoModalIcon
+
 ```javascript
 <PluginModule
   component={Component.MasterpassCardRegistration}
@@ -145,3 +522,86 @@ npx @akinon/projectzero@latest --plugins
   }}
 />
 ```
+
+##### Customized Usage with Renderer
+
+```javascript
+<PluginModule
+  component={Component.MasterpassCardRegistration}
+  props={{
+    // Do not remove getValues, it is used to get the form values
+    getValues,
+    renderer: {
+      InfoModal: ({ open, setOpen }) => (
+        <Modal
+          open={open}
+          setOpen={setOpen}
+          portalId="masterpass-info-modal"
+        >
+          masterpass information
+        </Modal>
+      ),
+      Content: ({
+        isChecked,
+        toggle,
+        setIsInfoModalOpen,
+        onChange,
+        onSubmit,
+        loading,
+        error,
+        showGoBackLink,
+        onClickGoBackLink
+      }) => (
+        <div className="bg-[#F8F8F8] mx-10 mb-5 px-2 py-1">
+          <div className="flex items-center gap-2 pb-4 mb-4">
+            <Checkbox checked={isChecked} onChange={toggle} />
+            <h1>Masterpass</h1>
+            <div>
+              <Icon
+                name="info"
+                size={15}
+                className="fill-[#000000] cursor-pointer"
+                onClick={() => {
+                  setIsInfoModalOpen(true);
+                }}
+              />
+            </div>
+          </div>
+          <p className="text-xs">
+            I want to store my card information in the Mastercard infrastructure and use it again in my next purchase.
+          </p>
+          {isChecked && (
+            <>
+              <Input
+                label="Give your card a name"
+                onChange={(e) =>
+                  onChange((e.target as HTMLInputElement).value)
+                }
+                className="mt-2"
+              />
+              <Button
+                onClick={onSubmit}
+                className="bg-green-600 text-black w-full mt-3"
+              >
+                {loading ? 'Loading...' : 'Save'}
+              </Button>
+              {error && (
+                <p className="text-xs text-red-600 mt-2">🚨 {error}</p>
+              )}
+            </>
+          )}
+          {showGoBackLink && (
+            <div>
+              <button
+                onClick={onClickGoBackLink}
+                className="text-xs text-red-600 underline mt-3"
+              >
+                I want to pay with my card registered to Masterpass.
+              </button>
+            </div>
+          )}
+        </div>
+      )
+    }
+  }}
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/pz-masterpass",
-  "version": "1.92.0",
+  "version": "1.93.0-rc.47",
   "license": "MIT",
   "main": "src/index.ts",
   "types": "src/index.d.ts",

package/src/views/card-list/index.tsx

@@ -48,6 +48,25 @@ const defaultTranslations = {
   security_code_info: 'What’s CVC?'
 };
 
+interface RendererProps {
+  Header?: () => JSX.Element;
+  CardItem?: (params: {
+    card: any;
+    selectedCard: any;
+    onSelect: (card: any) => Promise<void>;
+    DeleteButton?: React.FC<{ cardAliasName: string; onDelete: () => void }>;
+  }) => JSX.Element;
+  Loader?: () => JSX.Element;
+  ErrorFallback?: (params: {
+    error: string;
+    onRetry: () => void;
+  }) => JSX.Element;
+  SwitchPaymentButton?: (props: {
+    onClick: () => void;
+    label: string;
+  }) => JSX.Element;
+}
+
 export interface MasterpassCardListProps {
   className?: string;
   translations?: typeof defaultTranslations;
@@ -58,12 +77,14 @@ export interface MasterpassCardListProps {
     register: UseFormRegister<any>;
     setFormValue: UseFormSetValue<any>;
   };
+  renderer?: RendererProps;
 }
 
 export const MasterpassCardList = ({
   className,
   translations,
-  form
+  form,
+  renderer
 }: MasterpassCardListProps) => {
   const { preOrder } = useAppSelector((state) => state.checkout);
   const { accountStatus, isDirectPurchase, selectedCard, cvcRequired } =
@@ -73,7 +94,28 @@ export const MasterpassCardList = ({
   const { DeleteButton } = useDeleteCard();
   const dispatch = useAppDispatch();
 
-  const switchPaymentButton = (
+  const onSelectCard = async (card: any) => {
+    if (selectedCard?.UniqueId !== card.UniqueId) {
+      await setMasterpassBinNumber(card.Value1.substring(0, 6)).unwrap();
+      dispatch(setSelectedCard(card));
+      dispatch(setCvcRequired(false));
+      if (form) {
+        form.setFormValue('card_cvv', '');
+        form.clearErrors('card_cvv');
+      }
+    }
+  };
+
+  const switchPaymentButton = renderer?.SwitchPaymentButton ? (
+    renderer.SwitchPaymentButton({
+      onClick: () => {
+        dispatch(setIsDirectPurchase(true));
+        dispatch(setInstallmentOptions([]));
+      },
+      label:
+        translations?.pay_with_new_card ?? defaultTranslations.pay_with_new_card
+    })
+  ) : (
     <a
       href="#"
       className="text-xs underline"
@@ -92,7 +134,9 @@ export const MasterpassCardList = ({
   }
 
   if (loading) {
-    return (
+    return renderer?.Loader ? (
+      renderer.Loader()
+    ) : (
       <div className="p-5">
         <LoaderSpinner className="w-8 h-8" />
       </div>
@@ -100,18 +144,14 @@ export const MasterpassCardList = ({
   }
 
   if (error && !isDirectPurchase) {
-    return (
+    return renderer?.ErrorFallback ? (
+      renderer.ErrorFallback({ error, onRetry: refreshCards })
+    ) : (
       <div className="flex flex-col items-center">
         <div className="p-5">{error}</div>
-        <Button
-          className="w-48 mb-5"
-          onClick={() => {
-            refreshCards();
-          }}
-        >
+        <Button className="w-48 mb-5" onClick={refreshCards}>
           {translations?.retryFetchCards ?? defaultTranslations.retryFetchCards}
         </Button>
-
         {switchPaymentButton}
       </div>
     );
@@ -126,38 +166,75 @@ export const MasterpassCardList = ({
   }
 
   return (
-    <div className={twMerge('w-full', className)}>
-      <Image
-        className="mb-4"
-        width={140}
-        height={25}
-        src={masterpassLogo.src}
-        alt="Masterpass Logo"
-      />
-      <p className="text-xs">
-        {translations?.title ?? defaultTranslations.title}
-      </p>
-      <ul className="mt-4 text-xs">
+    <div className="w-full">
+      {renderer?.Header ? (
+        renderer.Header()
+      ) : (
+        <>
+          <Image
+            className="mb-4"
+            width={140}
+            height={25}
+            src={masterpassLogo.src}
+            alt="Masterpass Logo"
+          />
+          <p className="text-xs">
+            {translations?.title ?? defaultTranslations.title}
+          </p>
+        </>
+      )}
+
+      <ul className={twMerge('mt-4 text-xs', className)}>
         {cards?.map((card) => {
-          return (
+          const cvcField =
+            selectedCard?.UniqueId === card.UniqueId && form && cvcRequired ? (
+              <div
+                className={twMerge(
+                  clsx('flex items-center justify-start mt-2', {
+                    'items-baseline': form.errors.card_cvv
+                  })
+                )}
+              >
+                <label
+                  className="text-xs text-black-400 mr-1.5"
+                  htmlFor="card_cvv"
+                >
+                  {translations?.security_code ??
+                    defaultTranslations.security_code}
+                </label>
+                <Input
+                  format="###"
+                  mask="_"
+                  control={form.control}
+                  allowEmptyFormatting={true}
+                  {...form.register('card_cvv')}
+                  error={form.errors.card_cvv}
+                />
+                <div className="group relative flex items-center justify-start text-gray-600 cursor-pointer ml-2 transition-all hover:text-secondary">
+                  <span className="text-xs underline">
+                    {translations?.security_code_info ??
+                      defaultTranslations.security_code_info}
+                  </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={262} />
+                  </div>
+                </div>
+              </div>
+            ) : null;
+
+          return renderer?.CardItem ? (
+            renderer.CardItem({
+              card,
+              selectedCard,
+              onSelect: onSelectCard,
+              DeleteButton
+            })
+          ) : (
             <li
               key={card.UniqueId}
               className="p-4 mb-2 border-2 border-gray-200 flex flex-col space-x-2 cursor-pointer"
-              onClick={async () => {
-                if (selectedCard?.UniqueId !== card.UniqueId) {
-                  await setMasterpassBinNumber(
-                    card.Value1.substring(0, 6)
-                  ).unwrap();
-
-                  dispatch(setSelectedCard(card));
-                  dispatch(setCvcRequired(false));
-
-                  if (form) {
-                    form.setFormValue('card_cvv', '');
-                    form.clearErrors('card_cvv');
-                  }
-                }
-              }}
+              onClick={() => onSelectCard(card)}
             >
               <div className="flex justify-between items-center">
                 <input
@@ -183,49 +260,9 @@ export const MasterpassCardList = ({
                     alt={card.Name}
                   />
                 </label>
-
                 <DeleteButton cardAliasName={card.Name} />
               </div>
-              {selectedCard?.UniqueId === card.UniqueId && form && cvcRequired && (
-                <div
-                  className={twMerge(
-                    clsx('flex items-center justify-start mt-2', {
-                      'items-baseline': form.errors.card_cvv
-                    })
-                  )}
-                >
-                  <label
-                    className="text-xs text-black-400 mr-1.5"
-                    htmlFor="card_cvv"
-                  >
-                    {translations?.security_code ??
-                      defaultTranslations.security_code}
-                  </label>
-                  <Input
-                    format="###"
-                    mask="_"
-                    control={form.control}
-                    allowEmptyFormatting={true}
-                    {...form.register('card_cvv')}
-                    error={form.errors.card_cvv}
-                  />
-                  <div className="group relative flex items-center justify-start text-gray-600 cursor-pointer ml-2 transition-all hover:text-secondary">
-                    <span className="text-xs underline">
-                      {translations?.security_code_info ??
-                        defaultTranslations.security_code_info}
-                    </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={262}
-                      />
-                    </div>
-                  </div>
-                </div>
-              )}
+              {cvcField}
             </li>
           );
         })}

package/src/views/card-registration/index.tsx

@@ -32,13 +32,31 @@ export const MasterpassCardRegistration = ({
   className,
   infoModalContent,
   infoModalIcon,
-  translations
+  translations,
+  renderer = {}
 }: {
   getValues: () => Record<string, string | number | boolean>;
   className?: string;
   infoModalContent?: React.ReactNode;
   infoModalIcon?: React.ReactNode;
   translations?: typeof defaultTranslations;
+  renderer?: {
+    Content?: (props: {
+      isChecked: boolean;
+      toggle: () => void;
+      setIsInfoModalOpen: (value: boolean) => void;
+      onChange: (value: string) => void;
+      onSubmit: () => void;
+      loading: boolean;
+      error: string | null;
+      showGoBackLink?: boolean;
+      onClickGoBackLink?: () => void;
+    }) => JSX.Element;
+    InfoModal?: (props: {
+      open: boolean;
+      setOpen: (value: boolean) => void;
+    }) => JSX.Element;
+  };
 }) => {
   const { preOrder } = useAppSelector((state: RootState) => state.checkout);
   const { msisdn, token, language, otp, isDirectPurchase, accountStatus } =
@@ -168,13 +186,56 @@ export const MasterpassCardRegistration = ({
     return null;
   }
 
+  if (renderer.Content) {
+    return (
+      <>
+        {renderer.InfoModal ? (
+          <renderer.InfoModal
+            open={isInfoModalOpen}
+            setOpen={setIsInfoModalOpen}
+          />
+        ) : (
+          <InfoModal
+            open={isInfoModalOpen}
+            setOpen={setIsInfoModalOpen}
+            content={infoModalContent}
+          />
+        )}
+
+        <renderer.Content
+          isChecked={isAgreementChecked}
+          toggle={() => setIsAgreementChecked(!isAgreementChecked)}
+          setIsInfoModalOpen={setIsInfoModalOpen}
+          onChange={(value) => setAccountAliasName(value)}
+          onSubmit={registerCard}
+          loading={isBusy}
+          error={formError}
+          showGoBackLink={
+            accountStatus !== MasterpassStatus.NoAccount && cards?.length > 0
+          }
+          onClickGoBackLink={() => {
+            dispatch(setIsDirectPurchase(false));
+            dispatch(setInstallmentOptions([]));
+          }}
+        />
+      </>
+    );
+  }
+
   return (
     <div className={twMerge('w-full', className)}>
-      <InfoModal
-        open={isInfoModalOpen}
-        setOpen={setIsInfoModalOpen}
-        content={infoModalContent}
-      />
+      {renderer.InfoModal ? (
+        <renderer.InfoModal
+          open={isInfoModalOpen}
+          setOpen={setIsInfoModalOpen}
+        />
+      ) : (
+        <InfoModal
+          open={isInfoModalOpen}
+          setOpen={setIsInfoModalOpen}
+          content={infoModalContent}
+        />
+      )}
 
       <div className="border border-[#ddd]">
         <div className="p-4">

package/src/views/delete-confirmation-modal/index.tsx

@@ -15,15 +15,39 @@ const defaultTranslations = {
 
 export interface MasterpassDeleteConfirmationModalProps {
   translations?: typeof defaultTranslations;
+  renderer?: {
+    Content?: (props: {
+      open: boolean;
+      setOpen: (open: boolean) => void;
+      onConfirm: () => void;
+      onCancel: () => void;
+      loading: boolean;
+      error: string | null;
+    }) => JSX.Element;
+  };
 }
 
 export const MasterpassDeleteConfirmationModal = ({
-  translations
+  translations,
+  renderer = {}
 }: MasterpassDeleteConfirmationModalProps) => {
   const { deletion } = useAppSelector((state) => state.masterpass);
   const { deleteCard, isLoading, error } = useDeleteCard();
   const dispatch = useAppDispatch();
 
+  if (renderer.Content) {
+    return (
+      <renderer.Content
+        open={deletion.isModalVisible}
+        setOpen={() => dispatch(setDeletionModalVisible(false))}
+        onConfirm={deleteCard}
+        onCancel={() => dispatch(setDeletionModalVisible(false))}
+        loading={isLoading}
+        error={error}
+      />
+    );
+  }
+
   return (
     <Modal
       portalId="masterpass-remove-card-modal"

package/src/views/link-modal/index.tsx

@@ -21,10 +21,20 @@ const defaultTranslations = {
 
 export interface MasterpassLinkModalProps {
   translations?: typeof defaultTranslations;
+  renderer?: {
+    Content?: (props: {
+      open: boolean;
+      setOpen: (open: boolean) => void;
+      onClick: () => void;
+      loading: boolean;
+      error: string | null;
+    }) => JSX.Element;
+  };
 }
 
 export const MasterpassLinkModal = ({
-  translations
+  translations,
+  renderer = {}
 }: MasterpassLinkModalProps) => {
   const { msisdn, token, accountStatus, otp, language } = useAppSelector(
     (state) => state.masterpass
@@ -93,6 +103,18 @@ export const MasterpassLinkModal = ({
     }
   }, [otp.response]);
 
+  if (renderer.Content) {
+    return (
+      <renderer.Content
+        open={isOpen}
+        setOpen={setIsOpen}
+        onClick={onLinkButtonClick}
+        loading={isLoading}
+        error={error}
+      />
+    );
+  }
+
   return (
     <Modal
       portalId="masterpass-check-user"

package/src/views/otp-modal/index.tsx

@@ -17,10 +17,24 @@ export interface MasterpassOtpModalProps {
   translations?: {
     5001?: string;
   } & OtpFormProps['translations'];
+  renderer?: {
+    Content?: (props: {
+      open: boolean;
+      setOpen: (open: boolean) => void;
+      onSubmit: (data: { otp_code: string }) => void;
+      loading: boolean;
+      error: string | null;
+      resendSms: () => void;
+      resendSmsFetching: boolean;
+      targetDate: number;
+      otpRef: string | null;
+    }) => JSX.Element;
+  };
 }
 
 export const MasterpassOtpModal = ({
-  translations
+  translations,
+  renderer = {}
 }: MasterpassOtpModalProps) => {
   const { token, otp, language } = useAppSelector((state) => state.masterpass);
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -111,6 +125,22 @@ export const MasterpassOtpModal = ({
     }
   }, [isModalOpen]);
 
+  if (renderer.Content) {
+    return (
+      <renderer.Content
+        open={isModalOpen}
+        setOpen={handleModalVisibility}
+        onSubmit={onFormSubmit}
+        loading={isBusy}
+        error={otpError}
+        resendSms={resendSms}
+        resendSmsFetching={isBusy}
+        targetDate={otpTime}
+        otpRef={otpRef}
+      />
+    );
+  }
+
   return (
     <Modal
       portalId="otp-masterpass"