@akinon/next 1.18.0 → 1.19.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @akinon/next
 
+## 1.19.1
+
+## 1.19.0
+
+### Minor Changes
+
+- 846e3200: ZERO-2287: Add pz-masterpass plugin
+
 ## 1.18.0
 
 ### Minor Changes

package/components/plugin-module.tsx

@@ -15,6 +15,7 @@ enum Plugin {
   Otp = 'pz-otp',
   BKMExpress = 'pz-bkm',
   CreditPayment = 'pz-credit-payment',
+  Masterpass = 'pz-masterpass',
   B2B = 'pz-b2b'
 }
 
@@ -28,6 +29,12 @@ export enum Component {
   Otp = 'Otp',
   BKMExpress = 'BKMOption',
   CreditPayment = 'CreditPayment',
+  MasterpassProvider = 'MasterpassProvider',
+  MasterpassCardList = 'MasterpassCardList',
+  MasterpassCardRegistration = 'MasterpassCardRegistration',
+  MasterpassDeleteConfirmationModal = 'MasterpassDeleteConfirmationModal',
+  MasterpassOtpModal = 'MasterpassOtpModal',
+  MasterpassLinkModal = 'MasterpassLinkModal',
   MyQuotationsB2B = 'AccountMyQuotations',
   BasketB2B = 'BasketB2b'
 }
@@ -42,7 +49,18 @@ const PluginComponents = new Map([
   [Plugin.Otp, [Component.Otp]],
   [Plugin.BKMExpress, [Component.BKMExpress]],
   [Plugin.CreditPayment, [Component.CreditPayment]],
-  [Plugin.B2B, [Component.MyQuotationsB2B, Component.BasketB2B]],
+  [
+    Plugin.Masterpass,
+    [
+      Component.MasterpassCardList,
+      Component.MasterpassProvider,
+      Component.MasterpassCardRegistration,
+      Component.MasterpassDeleteConfirmationModal,
+      Component.MasterpassOtpModal,
+      Component.MasterpassLinkModal
+    ]
+  ],
+  [Plugin.B2B, [Component.MyQuotationsB2B, Component.BasketB2B]]
 ]);
 
 const getPlugin = (component: Component) => {
@@ -55,10 +73,12 @@ const getPlugin = (component: Component) => {
 
 export default function PluginModule({
   component,
-  props
+  props,
+  children
 }: {
   component: Component;
   props?: any;
+  children?: React.ReactNode;
 }) {
   const plugin = getPlugin(component);
 
@@ -87,6 +107,8 @@ export default function PluginModule({
               promise = import(`${'@akinon/pz-bkm'}`);
             } else if (plugin === Plugin.CreditPayment) {
               promise = import(`${'@akinon/pz-credit-payment'}`);
+            } else if (plugin === Plugin.Masterpass) {
+              promise = import(`${'@akinon/pz-masterpass'}`);
             } else if (plugin === Plugin.B2B) {
               promise = import(`${'@akinon/pz-b2b'}`);
             }
@@ -100,11 +122,15 @@ export default function PluginModule({
         },
         { ssr: false }
       ),
-    [plugin]
+    [plugin, component]
   );
 
   if (!(plugins as string[]).includes(plugin)) {
-    return null;
+    return <>{children}</>;
+  }
+
+  if (children) {
+    return <Component {...props}>{children}</Component>;
   }
 
   return <Component {...props} />;

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

@@ -50,6 +50,10 @@ export default function SelectedPaymentOptionView() {
               );
             } else if (payment_option.payment_type === 'loyalty_money') {
               promise = import(`views/checkout/steps/payment/options/loyalty`);
+            } else if (payment_option.payment_type === 'masterpass') {
+              promise = import(
+                `views/checkout/steps/payment/options/credit-card`
+              );
             }
             // else if (payment_option.payment_type === 'credit_payment') {
             //   promise = import(`views/checkout/steps/payment/options/credit-payment`);

package/data/client/checkout.ts

@@ -16,7 +16,17 @@ import {
 import { buildClientRequestUrl } from '../../utils';
 import { api } from './api';
 import { checkout } from '../urls';
-import { store } from 'redux/store';
+import { AppDispatch, AppStore, store } from 'redux/store';
+import settings from 'settings';
+import { showMobile3dIframe } from '../../utils/mobile-3d-iframe';
+import {
+  setError,
+  setOtpModalVisible
+} from '@akinon/pz-masterpass/src/redux/reducer';
+import {
+  buildDirectPurchaseForm,
+  buildPurchaseForm
+} from '@akinon/pz-masterpass/src/utils';
 
 interface CheckoutResponse {
   pre_order?: PreOrder;
@@ -38,7 +48,7 @@ interface SetRetailStoreParams {
   billingAddressPk: number;
 }
 
-interface CompleteCreditCardParams {
+export interface CompleteCreditCardParams {
   card_holder: string;
   card_cvv: string;
   card_number: string;
@@ -66,6 +76,83 @@ export interface PayOnDeliveryParams {
   paymentType: string;
 }
 
+const completeMasterpassPayment = async (
+  params: CompleteCreditCardParams,
+  dispatch: AppDispatch,
+  context: CheckoutContext,
+  reduxStore: AppStore
+) => {
+  const state = reduxStore.getState();
+  const { token, order_no } = context.page_context;
+  const { endpoints: apiEndpoints } = checkoutApi;
+  const { preOrder } = state.checkout ?? {};
+
+  const { isDirectPurchase, referenceNo, credentials, msisdn, selectedCard } =
+    state.masterpass ?? {};
+
+  const commonFormValues = {
+    token,
+    orderNo: order_no,
+    referenceNo,
+    merchantId: credentials?.merchant_id ?? null,
+    msisdn,
+    amount: preOrder?.unpaid_amount?.replace('.', '') ?? ''
+  };
+
+  const form = isDirectPurchase
+    ? await buildDirectPurchaseForm(commonFormValues, params)
+    : await buildPurchaseForm({ ...commonFormValues, selectedCard });
+
+  window.MFS?.[
+    state.masterpass.isDirectPurchase ? 'directPurchase' : 'purchase'
+  ]($(form), async (statusCode, response) => {
+    if (response.responseCode == '5009') {
+      // TODO: Handle Digital Loan
+    }
+
+    if (response.responseCode == '5010') {
+      const { isMobileApp } = state.root;
+      const returnUrl = state.masterpass.credentials?.s3d_return_url;
+      const url =
+        response.url3D + '&returnUrl=' + encodeURIComponent(returnUrl);
+      const urlObj = new URL(url, window.location.origin);
+      urlObj.searchParams.set('t', new Date().getTime().toString());
+
+      if (
+        (isMobileApp ||
+          /iPad|iPhone|iPod|Android/i.test(navigator.userAgent)) &&
+        !settings.checkout?.iframeExcludedPaymentOptions?.includes(
+          preOrder?.payment_option?.slug
+        )
+      ) {
+        showMobile3dIframe(urlObj.toString());
+      } else {
+        window.location.href = urlObj.toString();
+      }
+
+      return;
+    }
+
+    if (response.responseCode == '5001') {
+      dispatch(setOtpModalVisible(true));
+      return;
+    }
+
+    if (
+      response.token &&
+      (response.responseCode == '0000' || response.responseCode == '')
+    ) {
+      dispatch(
+        apiEndpoints.completeMasterpassPayment.initiate({ token }) as any
+      );
+    }
+
+    if (response.responseDescription.length) {
+      dispatch(setError(response.responseDescription));
+    }
+  });
+};
+
 export const checkoutApi = api.injectEndpoints({
   endpoints: (build) => ({
     fetchCheckout: build.query<CheckoutResponse, void>({
@@ -101,19 +188,69 @@ export const checkoutApi = api.injectEndpoints({
         card_month,
         card_year,
         use_three_d = true
-      }) => ({
-        url: buildClientRequestUrl(checkout.completeCreditCardPayment, {
+      }) => {
+        const paymentOption =
+          store.getState().checkout?.preOrder?.payment_option;
+
+        if (paymentOption?.payment_type === 'masterpass') {
+          return {
+            url: buildClientRequestUrl(checkout.getMasterpassOrderNo, {
+              useFormData: true
+            }),
+            method: 'POST'
+          };
+        }
+
+        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
+          }
+        };
+      },
+      async onQueryStarted(args, { dispatch, queryFulfilled }) {
+        dispatch(setPaymentStepBusy(true));
+        const { data } = await queryFulfilled;
+        const reduxStore = (await import('redux/store')).store;
+        const completePaymentContext = data?.context_list?.find(
+          (context) => context?.page_name === 'MasterpassCompletePage'
+        );
+
+        if (completePaymentContext) {
+          await completeMasterpassPayment(
+            args,
+            dispatch,
+            completePaymentContext,
+            reduxStore
+          );
+        }
+
+        dispatch(setPaymentStepBusy(false));
+      },
+      invalidatesTags: ['Basket']
+    }),
+    completeMasterpassPayment: build.mutation<
+      CheckoutResponse,
+      {
+        token: string;
+      }
+    >({
+      query: ({ token }) => ({
+        url: buildClientRequestUrl(checkout.completeMasterpassPayment, {
           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
+          token
         }
       }),
       async onQueryStarted(arg, { dispatch, queryFulfilled }) {
@@ -328,7 +465,7 @@ export const checkoutApi = api.injectEndpoints({
         }),
         method: 'POST',
         body: {
-          agreement: true,
+          agreement: true
         }
       }),
       async onQueryStarted(arg, { dispatch, queryFulfilled }) {

package/data/urls.ts

@@ -79,6 +79,8 @@ export const checkout = {
   setPaymentOption: '/orders/checkout/?page=PaymentOptionSelectionPage',
   setBinNumber: '/orders/checkout/?page=BinNumberPage',
   setMasterpassBinNumber: '/orders/checkout/?page=MasterpassBinNumberPage',
+  getMasterpassOrderNo: '/orders/checkout/?page=MasterpassOrderNoPage',
+  completeMasterpassPayment: '/orders/checkout/?page=MasterpassCompletePage',
   setInstallmentOption: '/orders/checkout/?page=InstallmentSelectionPage',
   setMasterPassInstallmentOption:
     '/orders/checkout/?page=MasterpassInstallmentPage',

package/hooks/use-payment-options.ts

@@ -18,6 +18,7 @@ export const usePaymentOptions = () => {
     pay_on_delivery: 'pz-pay-on-delivery',
     bkm_express: 'pz-bkm',
     credit_payment: 'pz-credit-payment',
+    masterpass: 'pz-masterpass'
   };
 
   const isInitialTypeIncluded = (type: string) => initialTypes.has(type);

package/middlewares/complete-masterpass.ts

@@ -0,0 +1,159 @@
+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: 'complete-masterpass',
+        error
+      });
+    }
+
+    return result;
+  }
+  return null;
+};
+
+const withCompleteMasterpass =
+  (middleware: NextMiddleware) =>
+  async (req: PzNextRequest, event: NextFetchEvent) => {
+    const url = req.nextUrl.clone();
+    const ip = req.headers.get('x-forwarded-for') ?? '';
+
+    if (url.search.indexOf('MasterpassCompletePage') === -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 ?? ''
+    };
+
+    try {
+      const body = await streamToString(req.body);
+
+      const request = await fetch(requestUrl, {
+        method: 'POST',
+        headers: requestHeaders,
+        body
+      });
+
+      logger.info('Complete Masterpass 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 Masterpass payment', {
+          middleware: 'complete-masterpass',
+          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: 'complete-masterpass',
+        contextList,
+        ip
+      });
+
+      if (!redirectUrl) {
+        logger.warn(
+          'No redirection url for order success page found in page_context. Redirecting to checkout page.',
+          {
+            middleware: 'complete-masterpass',
+            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: 'complete-masterpass',
+        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 Masterpass payment', {
+        middleware: 'complete-masterpass',
+        error,
+        requestHeaders,
+        ip
+      });
+
+      return NextResponse.redirect(
+        `${url.origin}${getUrlPathWithLocale(
+          '/orders/checkout/',
+          req.cookies.get('pz-locale')?.value
+        )}`,
+        303
+      );
+    }
+  };
+
+export default withCompleteMasterpass;

package/middlewares/default.ts

@@ -3,6 +3,7 @@ import Settings from 'settings';
 import {
   PzNextRequest,
   withCompleteGpay,
+  withCompleteMasterpass,
   withOauthLogin,
   withPrettyUrl,
   withRedirectionPayment,
@@ -124,61 +125,74 @@ const withPzDefault =
               withThreeDRedirection(
                 withUrlRedirection(
                   withCompleteGpay(
-                    async (req: PzNextRequest, event: NextFetchEvent) => {
-                      let middlewareResult: NextResponse | void =
-                        NextResponse.next();
+                    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,
-                          ''
-                        );
-
-                        url.basePath = `/${commerceUrl}`;
-                        url.pathname = `/${
-                          locale.length ? `${locale}/` : ''
-                        }${currency}${prettyUrl ?? pathnameWithoutLocale}`;
-
-                        Settings.rewrites.forEach((rewrite) => {
-                          url.pathname = url.pathname.replace(
-                            rewrite.source,
-                            rewrite.destination
+                        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;
+                          url.basePath = `/${commerceUrl}`;
+                          url.pathname = `/${
+                            locale.length ? `${locale}/` : ''
+                          }${currency}${prettyUrl ?? pathnameWithoutLocale}`;
 
-                        // 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
+                          Settings.rewrites.forEach((rewrite) => {
+                            url.pathname = url.pathname.replace(
+                              rewrite.source,
+                              rewrite.destination
                             );
-                          }
-                        } else {
-                          // if middleware.ts doesn't have a return value.
-                          // e.g. NextResponse.next() doesn't exist in middleware.ts
+                          });
 
-                          middlewareResult = NextResponse.rewrite(url);
-                        }
+                          middlewareResult = (await middleware(
+                            req,
+                            event
+                          )) as NextResponse | void;
 
-                        if (!url.pathname.startsWith(`/${currency}/orders`)) {
+                          // 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 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,
@@ -187,65 +201,63 @@ 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

@@ -6,6 +6,7 @@ import withLocale from './locale';
 import withOauthLogin from './oauth-login';
 import withUrlRedirection from './url-redirection';
 import withCompleteGpay from './complete-gpay';
+import withCompleteMasterpass from './complete-masterpass';
 import { NextRequest } from 'next/server';
 
 export {
@@ -16,7 +17,8 @@ export {
   withLocale,
   withOauthLogin,
   withUrlRedirection,
-  withCompleteGpay
+  withCompleteGpay,
+  withCompleteMasterpass
 };
 
 export interface PzNextRequest extends NextRequest {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@akinon/next",
   "description": "Core package for Project Zero Next",
-  "version": "1.18.0",
+  "version": "1.19.1",
   "private": false,
   "license": "MIT",
   "bin": {
@@ -31,7 +31,7 @@
     "@typescript-eslint/eslint-plugin": "6.7.4",
     "@typescript-eslint/parser": "6.7.4",
     "eslint": "^8.14.0",
-    "@akinon/eslint-plugin-projectzero": "1.18.0",
+    "@akinon/eslint-plugin-projectzero": "1.19.1",
     "eslint-config-prettier": "8.5.0"
   }
 }

package/plugins.d.ts

@@ -0,0 +1,3 @@
+declare module '@akinon/pz-masterpass' {
+  export const masterpassReducer: unknown;
+}

package/plugins.js

@@ -8,5 +8,6 @@ module.exports = [
   'pz-otp',
   'pz-bkm',
   'pz-credit-payment',
+  'pz-masterpass',
   'pz-b2b'
 ];

package/redux/reducers/index.ts

@@ -4,12 +4,16 @@ import configReducer from './config';
 import headerReducer from './header';
 import { api } from '../../data/client/api';
 
+// Plugin reducers
+import { masterpassReducer } from '@akinon/pz-masterpass';
+
 const reducers = {
   [api.reducerPath]: api.reducer,
   root: rootReducer,
   checkout: checkoutReducer,
   config: configReducer,
-  header: headerReducer
+  header: headerReducer,
+  masterpass: masterpassReducer
 };
 
-export default reducers;
+export default reducers;

package/types/commerce/checkout.ts

@@ -117,6 +117,7 @@ export interface CheckoutContext {
     redirect_url?: string;
     context_data?: any;
     balance?: string;
+    [key: string]: any;
   };
 }