@akinon/next 1.59.0-rc.0 → 1.59.0-rc.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @akinon/next
 
+## 1.59.0-rc.2
+
+### Minor Changes
+
+- c873740: ZERO-2903: add types
+- 034b813: ZERO-2903: create saved card plugin
+
+## 1.59.0-rc.1
+
+### Minor Changes
+
+- 907813c: ZERO-2934: add payment-gateway/<gateway> redirect in middleware
+
 ## 1.59.0-rc.0
 
 ### Minor Changes

package/components/plugin-module.tsx

@@ -19,7 +19,8 @@ enum Plugin {
   Masterpass = 'pz-masterpass',
   B2B = 'pz-b2b',
   Akifast = 'pz-akifast',
-  MultiBasket = 'pz-multi-basket'
+  MultiBasket = 'pz-multi-basket',
+  SavedCard = 'pz-saved-card'
 }
 
 export enum Component {
@@ -43,7 +44,8 @@ export enum Component {
   BasketB2B = 'BasketB2b',
   AkifastQuickLoginButton = 'QuickLoginButton',
   AkifastCheckoutButton = 'CheckoutButton',
-  MultiBasket = 'MultiBasket'
+  MultiBasket = 'MultiBasket',
+  SavedCard = 'SavedCardOption'
 }
 
 const PluginComponents = new Map([
@@ -75,7 +77,8 @@ const PluginComponents = new Map([
     Plugin.Akifast,
     [Component.AkifastQuickLoginButton, Component.AkifastCheckoutButton]
   ],
-  [Plugin.MultiBasket, [Component.MultiBasket]]
+  [Plugin.MultiBasket, [Component.MultiBasket]],
+  [Plugin.SavedCard, [Component.SavedCard]]
 ]);
 
 const getPlugin = (component: Component) => {
@@ -138,6 +141,8 @@ export default function PluginModule({
               promise = import(`${'@akinon/pz-akifast'}`);
             } else if (plugin === Plugin.MultiBasket) {
               promise = import(`${'@akinon/pz-multi-basket'}`);
+            } else if (plugin === Plugin.SavedCard) {
+              promise = import(`${'@akinon/pz-saved-card'}`);
             }
           } catch (error) {
             logger.error(error);

package/components/selected-payment-option-view.tsx

@@ -17,7 +17,8 @@ const paymentTypeToView = {
   loyalty_money: 'loyalty',
   masterpass: 'credit-card',
   pay_on_delivery: 'pay-on-delivery',
-  redirection: 'redirection'
+  redirection: 'redirection',
+  saved_card: 'saved-card'
   // Add other mappings as needed
 };
 

package/data/client/checkout.ts

@@ -57,6 +57,7 @@ export interface CompleteCreditCardParams {
   card_month: string;
   card_year: string;
   use_three_d?: boolean;
+  save?: boolean;
 }
 
 interface GetContractResponse {
@@ -228,7 +229,8 @@ export const checkoutApi = api.injectEndpoints({
         card_number,
         card_month,
         card_year,
-        use_three_d = true
+        use_three_d = true,
+        save = undefined
       }) => {
         const paymentOption =
           store.getState().checkout?.preOrder?.payment_option;
@@ -242,20 +244,26 @@ export const checkoutApi = api.injectEndpoints({
           };
         }
 
+        const body: Record<string, string> = {
+          agreement: '1',
+          use_three_d: use_three_d ? '1' : '0',
+          card_cvv,
+          card_holder,
+          card_month,
+          card_number,
+          card_year
+        };
+
+        if (save !== undefined) {
+          body.save = save ? '1' : '0';
+        }
+
         return {
           url: buildClientRequestUrl(checkout.completeCreditCardPayment, {
             useFormData: true
           }),
           method: 'POST',
-          body: {
-            agreement: '1',
-            use_three_d: use_three_d ? '1' : '0',
-            card_cvv,
-            card_holder,
-            card_month,
-            card_number,
-            card_year
-          }
+          body
         };
       },
       async onQueryStarted(args, { dispatch, queryFulfilled }) {

package/hooks/use-payment-options.ts

@@ -19,7 +19,8 @@ export const usePaymentOptions = () => {
     bkm_express: 'pz-bkm',
     credit_payment: 'pz-credit-payment',
     masterpass: 'pz-masterpass',
-    gpay: 'pz-gpay'
+    gpay: 'pz-gpay',
+    saved_card: 'pz-saved-card'
   };
 
   const isInitialTypeIncluded = (type: string) => initialTypes.has(type);

package/middlewares/default.ts

@@ -9,6 +9,7 @@ import {
   withOauthLogin,
   withPrettyUrl,
   withRedirectionPayment,
+  withSavedCardRedirection,
   withThreeDRedirection,
   withUrlRedirection
 } from '.';
@@ -140,6 +141,14 @@ const withPzDefault =
       );
     }
 
+    if (req.nextUrl.pathname.includes('/orders/saved-card-redirect')) {
+      return NextResponse.rewrite(
+        new URL(
+          `${encodeURI(Settings.commerceUrl)}/orders/saved-card-redirect/`
+        )
+      );
+    }
+
     // If commerce redirects to /orders/checkout/ without locale
     if (
       req.nextUrl.pathname.match(new RegExp('^/orders/checkout/$')) &&
@@ -157,6 +166,25 @@ const withPzDefault =
       return NextResponse.redirect(redirectUrlWithLocale, 303);
     }
 
+    // Dynamically handle any payment gateway without specifying names
+    const paymentGatewayRegex = new RegExp('^/payment-gateway/([^/]+)/$');
+    const gatewayMatch = req.nextUrl.pathname.match(paymentGatewayRegex);
+
+    if (
+      gatewayMatch && // Check if the URL matches the /payment-gateway/<gateway> pattern
+      getUrlPathWithLocale(
+        `/payment-gateway/${gatewayMatch[1]}/`,
+        req.cookies.get('pz-locale')?.value
+      ) !== req.nextUrl.pathname
+    ) {
+      const redirectUrlWithLocale = `${url.origin}${getUrlPathWithLocale(
+        `/payment-gateway/${gatewayMatch[1]}/`,
+        req.cookies.get('pz-locale')?.value
+      )}?${req.nextUrl.searchParams.toString()}`;
+
+      return NextResponse.redirect(redirectUrlWithLocale);
+    }
+
     if (req.nextUrl.pathname.startsWith('/orders/checkout-provider/')) {
       try {
         const data = await req.json();
@@ -204,128 +232,141 @@ const withPzDefault =
                   withUrlRedirection(
                     withCompleteGpay(
                       withCompleteMasterpass(
-                        async (req: PzNextRequest, event: NextFetchEvent) => {
-                          let middlewareResult: NextResponse | void =
-                            NextResponse.next();
-
-                          try {
-                            const { locale, prettyUrl, currency } =
-                              req.middlewareParams.rewrites;
-                            const { defaultLocaleValue } =
-                              Settings.localization;
-                            const url = req.nextUrl.clone();
-                            const pathnameWithoutLocale = url.pathname.replace(
-                              urlLocaleMatcherRegex,
-                              ''
-                            );
-
-                            middlewareResult = (await middleware(
-                              req,
-                              event
-                            )) as NextResponse | void;
-
-                            let customRewriteUrlDiff = '';
-
-                            if (
-                              middlewareResult instanceof NextResponse &&
-                              middlewareResult.headers.get(
-                                'pz-override-response'
-                              ) &&
-                              middlewareResult.headers.get(
-                                'x-middleware-rewrite'
-                              )
-                            ) {
-                              const rewriteUrl = new URL(
-                                middlewareResult.headers.get(
-                                  'x-middleware-rewrite'
-                                )
-                              );
-                              const originalUrl = new URL(req.url);
-                              customRewriteUrlDiff =
-                                rewriteUrl.pathname.replace(
-                                  originalUrl.pathname,
-                                  ''
-                                );
-                            }
+                        withSavedCardRedirection(
+                          async (req: PzNextRequest, event: NextFetchEvent) => {
+                            let middlewareResult: NextResponse | void =
+                              NextResponse.next();
 
-                            url.basePath = `/${commerceUrl}`;
-                            url.pathname = `/${
-                              locale.length ? `${locale}/` : ''
-                            }${currency}/${customRewriteUrlDiff}${
-                              prettyUrl ?? pathnameWithoutLocale
-                            }`.replace(/\/+/g, '/');
-
-                            if (
-                              !req.middlewareParams.found &&
-                              Settings.customNotFoundEnabled
-                            ) {
-                              let pathname = url.pathname
-                                .replace(/\/+$/, '')
-                                .split('/');
-                              url.pathname = url.pathname.replace(
-                                pathname.pop(),
-                                'pz-not-found'
+                            try {
+                              const { locale, prettyUrl, currency } =
+                                req.middlewareParams.rewrites;
+                              const { defaultLocaleValue } =
+                                Settings.localization;
+                              const url = req.nextUrl.clone();
+                              const pathnameWithoutLocale = url.pathname.replace(
+                                urlLocaleMatcherRegex,
+                                ''
                               );
-                            }
 
-                            if (
-                              Settings.usePrettyUrlRoute &&
-                              url.searchParams.toString().length > 0 &&
-                              !Object.entries(ROUTES).find(([, value]) =>
-                                new RegExp(`^${value}/?$`).test(
-                                  pathnameWithoutLocale
-                                )
-                              )
-                            ) {
-                              url.pathname =
-                                url.pathname +
-                                `searchparams|${url.searchParams.toString()}`;
-                            }
+                              middlewareResult = (await middleware(
+                                req,
+                                event
+                              )) as NextResponse | void;
 
-                            Settings.rewrites.forEach((rewrite) => {
-                              url.pathname = url.pathname.replace(
-                                rewrite.source,
-                                rewrite.destination
-                              );
-                            });
+                              let customRewriteUrlDiff = '';
 
-                            // if middleware.ts has a return value for current url
-                            if (middlewareResult instanceof NextResponse) {
-                              // pz-override-response header is used to prevent 404 page for custom responses.
                               if (
+                                middlewareResult instanceof NextResponse &&
                                 middlewareResult.headers.get(
                                   'pz-override-response'
-                                ) !== 'true'
-                              ) {
-                                middlewareResult.headers.set(
-                                  'x-middleware-rewrite',
-                                  url.href
-                                );
-                              } else if (
-                                middlewareResult.headers.get(
-                                  'x-middleware-rewrite'
                                 ) &&
                                 middlewareResult.headers.get(
-                                  'pz-override-response'
-                                ) === 'true'
+                                  'x-middleware-rewrite'
+                                )
                               ) {
-                                middlewareResult = NextResponse.rewrite(url);
+                                const rewriteUrl = new URL(
+                                  middlewareResult.headers.get(
+                                    'x-middleware-rewrite'
+                                  )
+                                );
+                                const originalUrl = new URL(req.url);
+                                customRewriteUrlDiff =
+                                  rewriteUrl.pathname.replace(
+                                    originalUrl.pathname,
+                                    ''
+                                  );
                               }
-                            } else {
-                              // if middleware.ts doesn't have a return value.
-                              // e.g. NextResponse.next() doesn't exist in middleware.ts
 
-                              middlewareResult = NextResponse.rewrite(url);
-                            }
+                              url.basePath = `/${commerceUrl}`;
+                              url.pathname = `/${
+                                locale.length ? `${locale}/` : ''
+                              }${currency}/${customRewriteUrlDiff}${
+                                prettyUrl ?? pathnameWithoutLocale
+                              }`.replace(/\/+/g, '/');
+
+                              if (
+                                !req.middlewareParams.found &&
+                                Settings.customNotFoundEnabled
+                              ) {
+                                let pathname = url.pathname
+                                  .replace(/\/+$/, '')
+                                  .split('/');
+                                url.pathname = url.pathname.replace(
+                                  pathname.pop(),
+                                  'pz-not-found'
+                                );
+                              }
 
-                            if (
-                              !url.pathname.startsWith(`/${currency}/orders`)
-                            ) {
+                              if (
+                                Settings.usePrettyUrlRoute &&
+                                url.searchParams.toString().length > 0 &&
+                                !Object.entries(ROUTES).find(([, value]) =>
+                                  new RegExp(`^${value}/?$`).test(
+                                    pathnameWithoutLocale
+                                  )
+                                )
+                              ) {
+                                url.pathname =
+                                  url.pathname +
+                                  `searchparams|${url.searchParams.toString()}`;
+                              }
+
+                              Settings.rewrites.forEach((rewrite) => {
+                                url.pathname = url.pathname.replace(
+                                  rewrite.source,
+                                  rewrite.destination
+                                );
+                              });
+
+                              // if middleware.ts has a return value for current url
+                              if (middlewareResult instanceof NextResponse) {
+                                // pz-override-response header is used to prevent 404 page for custom responses.
+                                if (
+                                  middlewareResult.headers.get(
+                                    'pz-override-response'
+                                  ) !== 'true'
+                                ) {
+                                  middlewareResult.headers.set(
+                                    'x-middleware-rewrite',
+                                    url.href
+                                  );
+                                } else if (
+                                  middlewareResult.headers.get(
+                                    'x-middleware-rewrite'
+                                  ) &&
+                                  middlewareResult.headers.get(
+                                    'pz-override-response'
+                                  ) === 'true'
+                                ) {
+                                  middlewareResult = NextResponse.rewrite(url);
+                                }
+                              } else {
+                                // if middleware.ts doesn't have a return value.
+                                // e.g. NextResponse.next() doesn't exist in middleware.ts
+
+                                middlewareResult = NextResponse.rewrite(url);
+                              }
+
+                              if (
+                                !url.pathname.startsWith(`/${currency}/orders`)
+                              ) {
+                                middlewareResult.cookies.set(
+                                  'pz-locale',
+                                  locale?.length > 0
+                                    ? locale
+                                    : defaultLocaleValue,
+                                  {
+                                    sameSite: 'none',
+                                    secure: true,
+                                    expires: new Date(
+                                      Date.now() + 1000 * 60 * 60 * 24 * 7
+                                    ) // 7 days
+                                  }
+                                );
+                              }
                               middlewareResult.cookies.set(
-                                'pz-locale',
-                                locale?.length > 0
-                                  ? locale
-                                  : defaultLocaleValue,
+                                'pz-currency',
+                                currency,
                                 {
                                   sameSite: 'none',
                                   secure: true,
@@ -334,76 +375,65 @@ const withPzDefault =
                                   ) // 7 days
                                 }
                               );
-                            }
-                            middlewareResult.cookies.set(
-                              'pz-currency',
-                              currency,
-                              {
-                                sameSite: 'none',
-                                secure: true,
-                                expires: new Date(
-                                  Date.now() + 1000 * 60 * 60 * 24 * 7
-                                ) // 7 days
-                              }
-                            );
-
-                            if (
-                              req.cookies.get('pz-locale') &&
-                              req.cookies.get('pz-locale').value !== locale
-                            ) {
-                              logger.debug('Locale changed', {
-                                locale,
-                                oldLocale: req.cookies.get('pz-locale')?.value,
-                                ip
-                              });
-                            }
-
-                            middlewareResult.headers.set(
-                              'pz-url',
-                              req.nextUrl.toString()
-                            );
 
-                            if (req.cookies.get('pz-set-currency')) {
-                              middlewareResult.cookies.delete(
-                                'pz-set-currency'
-                              );
-                            }
+                              if (
+                                req.cookies.get('pz-locale') &&
+                                req.cookies.get('pz-locale').value !== locale
+                              ) {
+                                logger.debug('Locale changed', {
+                                  locale,
+                                  oldLocale: req.cookies.get('pz-locale')?.value,
+                                  ip
+                                });
+                              }
 
-                            if (process.env.ACC_APP_VERSION) {
                               middlewareResult.headers.set(
-                                'acc-app-version',
-                                process.env.ACC_APP_VERSION
+                                'pz-url',
+                                req.nextUrl.toString()
                               );
-                            }
 
-                            // Set CSRF token if not set
-                            try {
-                              const url = `${Settings.commerceUrl}${user.csrfToken}`;
+                              if (req.cookies.get('pz-set-currency')) {
+                                middlewareResult.cookies.delete(
+                                  'pz-set-currency'
+                                );
+                              }
 
-                              if (!req.cookies.get('csrftoken')) {
-                                const { csrf_token } = await (
-                                  await fetch(url)
-                                ).json();
-                                middlewareResult.cookies.set(
-                                  'csrftoken',
-                                  csrf_token
+                              if (process.env.ACC_APP_VERSION) {
+                                middlewareResult.headers.set(
+                                  'acc-app-version',
+                                  process.env.ACC_APP_VERSION
                                 );
                               }
+
+                              // Set CSRF token if not set
+                              try {
+                                const url = `${Settings.commerceUrl}${user.csrfToken}`;
+
+                                if (!req.cookies.get('csrftoken')) {
+                                  const { csrf_token } = await (
+                                    await fetch(url)
+                                  ).json();
+                                  middlewareResult.cookies.set(
+                                    'csrftoken',
+                                    csrf_token
+                                  );
+                                }
+                              } catch (error) {
+                                logger.error('CSRF Error', {
+                                  error,
+                                  ip
+                                });
+                              }
                             } catch (error) {
-                              logger.error('CSRF Error', {
+                              logger.error('withPzDefault Error', {
                                 error,
                                 ip
                               });
                             }
-                          } catch (error) {
-                            logger.error('withPzDefault Error', {
-                              error,
-                              ip
-                            });
-                          }
 
-                          return middlewareResult;
-                        }
+                            return middlewareResult;
+                          }
+                        )
                       )
                     )
                   )

package/middlewares/index.ts

@@ -8,6 +8,7 @@ import withUrlRedirection from './url-redirection';
 import withCompleteGpay from './complete-gpay';
 import withCompleteMasterpass from './complete-masterpass';
 import withCheckoutProvider from './checkout-provider';
+import withSavedCardRedirection from './saved-card-redirection';
 import { NextRequest } from 'next/server';
 
 export {
@@ -20,7 +21,8 @@ export {
   withUrlRedirection,
   withCompleteGpay,
   withCompleteMasterpass,
-  withCheckoutProvider
+  withCheckoutProvider,
+  withSavedCardRedirection
 };
 
 export interface PzNextRequest extends NextRequest {

package/middlewares/saved-card-redirection.ts

@@ -0,0 +1,179 @@
+import { NextFetchEvent, NextMiddleware, NextResponse } from 'next/server';
+import Settings from 'settings';
+import { Buffer } from 'buffer';
+import logger from '../utils/log';
+import { getUrlPathWithLocale } from '../utils/localization';
+import { PzNextRequest } from '.';
+
+const streamToString = async (stream: ReadableStream<Uint8Array> | null) => {
+  if (stream) {
+    const chunks = [];
+    let result = '';
+
+    try {
+      for await (const chunk of stream as any) {
+        chunks.push(Buffer.from(chunk));
+      }
+
+      result = Buffer.concat(chunks).toString('utf-8');
+    } catch (error) {
+      logger.error('Error while reading body stream', {
+        middleware: 'saved-card-redirection',
+        error
+      });
+    }
+
+    return result;
+  }
+  return null;
+};
+
+const withSavedCardRedirection =
+  (middleware: NextMiddleware) =>
+  async (req: PzNextRequest, event: NextFetchEvent) => {
+    const url = req.nextUrl.clone();
+    const ip = req.headers.get('x-forwarded-for') ?? '';
+    const sessionId = req.cookies.get('osessionid');
+
+    if (url.search.indexOf('SavedCardThreeDSecurePage') === -1) {
+      return middleware(req, event);
+    }
+
+    const requestUrl = `${Settings.commerceUrl}/orders/checkout/${url.search}`;
+    const requestHeaders = {
+      'X-Requested-With': 'XMLHttpRequest',
+      'Content-Type': 'application/x-www-form-urlencoded',
+      Cookie: `osessionid=${req.cookies.get('osessionid')?.value ?? ''}`,
+      'x-currency': req.cookies.get('pz-currency')?.value ?? '',
+      'x-forwarded-for': ip
+    };
+
+    try {
+      const body = await streamToString(req.body);
+
+      if (!sessionId) {
+        logger.warn(
+          'Make sure that the SESSION_COOKIE_SAMESITE environment variable is set to None in Commerce.',
+          {
+            middleware: 'saved-card-redirection',
+            ip
+          }
+        );
+
+        return NextResponse.redirect(
+          `${url.origin}${getUrlPathWithLocale(
+            '/orders/checkout/',
+            req.cookies.get('pz-locale')?.value
+          )}`,
+          303
+        );
+      }
+
+      const request = await fetch(requestUrl, {
+        method: 'POST',
+        headers: requestHeaders,
+        body
+      });
+
+      logger.info('Complete 3D payment request', {
+        requestUrl,
+        status: request.status,
+        requestHeaders,
+        ip
+      });
+
+      const response = await request.json();
+
+      const { context_list: contextList, errors } = response;
+      const redirectionContext = contextList?.find(
+        (context) => context.page_context?.redirect_url
+      );
+      const redirectUrl = redirectionContext?.page_context?.redirect_url;
+
+      if (errors && Object.keys(errors).length) {
+        logger.error('Error while completing 3D payment', {
+          middleware: 'saved-card-redirection',
+          errors,
+          requestHeaders,
+          ip
+        });
+
+        return NextResponse.redirect(
+          `${url.origin}${getUrlPathWithLocale(
+            '/orders/checkout/',
+            req.cookies.get('pz-locale')?.value
+          )}`,
+          {
+            status: 303,
+            headers: {
+              'Set-Cookie': `pz-pos-error=${JSON.stringify(errors)}; path=/;`
+            }
+          }
+        );
+      }
+
+      logger.info('Order success page context list', {
+        middleware: 'saved-card-redirection',
+        contextList,
+        ip
+      });
+
+      if (!redirectUrl) {
+        logger.warn(
+          'No redirection url for order success page found in page_context. Redirecting to checkout page.',
+          {
+            middleware: 'saved-card-redirection',
+            requestHeaders,
+            response: JSON.stringify(response),
+            ip
+          }
+        );
+
+        const redirectUrlWithLocale = `${url.origin}${getUrlPathWithLocale(
+          '/orders/checkout/',
+          req.cookies.get('pz-locale')?.value
+        )}`;
+
+        return NextResponse.redirect(redirectUrlWithLocale, 303);
+      }
+
+      const redirectUrlWithLocale = `${url.origin}${getUrlPathWithLocale(
+        redirectUrl,
+        req.cookies.get('pz-locale')?.value
+      )}`;
+
+      logger.info('Redirecting to order success page', {
+        middleware: 'saved-card-redirection',
+        redirectUrlWithLocale,
+        ip
+      });
+
+      // Using POST method while redirecting causes an error,
+      // So we use 303 status code to change the method to GET
+      const nextResponse = NextResponse.redirect(redirectUrlWithLocale, 303);
+
+      nextResponse.headers.set(
+        'Set-Cookie',
+        request.headers.get('set-cookie') ?? ''
+      );
+
+      return nextResponse;
+    } catch (error) {
+      logger.error('Error while completing 3D payment', {
+        middleware: 'saved-card-redirection',
+        error,
+        requestHeaders,
+        ip
+      });
+
+      return NextResponse.redirect(
+        `${url.origin}${getUrlPathWithLocale(
+          '/orders/checkout/',
+          req.cookies.get('pz-locale')?.value
+        )}`,
+        303
+      );
+    }
+  };
+
+export default withSavedCardRedirection;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@akinon/next",
   "description": "Core package for Project Zero Next",
-  "version": "1.59.0-rc.0",
+  "version": "1.59.0-rc.2",
   "private": false,
   "license": "MIT",
   "bin": {
@@ -30,7 +30,7 @@
     "set-cookie-parser": "2.6.0"
   },
   "devDependencies": {
-    "@akinon/eslint-plugin-projectzero": "1.59.0-rc.0",
+    "@akinon/eslint-plugin-projectzero": "1.59.0-rc.2",
     "@types/react-redux": "7.1.30",
     "@types/set-cookie-parser": "2.4.7",
     "@typescript-eslint/eslint-plugin": "6.7.4",

package/plugins.d.ts

@@ -23,3 +23,8 @@ declare module '@akinon/pz-otp/src/redux/reducer' {
   export const showPopup: any;
   export const hidePopup: any;
 }
+
+declare module '@akinon/pz-saved-card' {
+  export const savedCardReducer: any;
+  export const SavedCardOption: any;
+}

package/plugins.js

@@ -12,5 +12,6 @@ module.exports = [
   'pz-b2b',
   'pz-akifast',
   'pz-multi-basket',
-  'pz-tabby-extension'
+  'pz-tabby-extension',
+  'pz-saved-card'
 ];

package/redux/middlewares/checkout.ts

@@ -3,9 +3,12 @@
 import { Middleware } from '@reduxjs/toolkit';
 import {
   setAddressList,
+  setAttributeBasedShippingOptions,
   setBankAccounts,
   setCanGuestPurchase,
   setCardType,
+  setCreditPaymentOptions,
+  setDataSourceShippingOptions,
   setDeliveryOptions,
   setErrors,
   setHasGiftBox,
@@ -16,15 +19,12 @@ import {
   setPreOrder,
   setRetailStores,
   setShippingOptions,
-  setDataSourceShippingOptions,
-  setShippingStepCompleted,
-  setCreditPaymentOptions,
-  setAttributeBasedShippingOptions
+  setShippingStepCompleted
 } from '../../redux/reducers/checkout';
 import { RootState, TypedDispatch } from 'redux/store';
 import { checkoutApi } from '../../data/client/checkout';
 import { CheckoutContext, PreOrder } from '../../types';
-import { getCookie, setCookie } from '../../utils';
+import { getCookie } from '../../utils';
 import settings from 'settings';
 import { LocaleUrlStrategy } from '../../localization';
 import { showMobile3dIframe } from '../../utils/mobile-3d-iframe';
@@ -169,7 +169,11 @@ export const preOrderMiddleware: Middleware = ({
       dispatch(apiEndpoints.setPaymentOption.initiate(paymentOptions[0].pk));
     }
 
-    if (!preOrder.installment && installmentOptions.length > 0) {
+    if (
+      !preOrder.installment &&
+      preOrder.payment_option.payment_type !== 'saved_card' &&
+      installmentOptions.length > 0
+    ) {
       dispatch(
         apiEndpoints.setInstallmentOption.initiate(installmentOptions[0].pk)
       );

package/redux/reducers/index.ts

@@ -7,6 +7,7 @@ import { api } from '../../data/client/api';
 // Plugin reducers
 import { masterpassReducer } from '@akinon/pz-masterpass';
 import { otpReducer } from '@akinon/pz-otp';
+import { savedCardReducer } from '@akinon/pz-saved-card';
 
 const reducers = {
   [api.reducerPath]: api.reducer,
@@ -15,7 +16,8 @@ const reducers = {
   config: configReducer,
   header: headerReducer,
   masterpass: masterpassReducer,
-  otp: otpReducer
+  otp: otpReducer,
+  savedCard: savedCardReducer
 };
 
 export default reducers;