@akinon/pz-masterpass-rest 1.120.0-rc.5 → 1.120.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/pz-masterpass-rest",
-  "version": "1.120.0-rc.5",
+  "version": "1.120.0",
   "main": "src/index.ts",
   "types": "src/index.d.ts",
   "description": "Modern React-based Masterpass REST API integration package for ProjectZero e-commerce platform",

package/src/components/card-list.tsx

@@ -35,8 +35,8 @@ const CardList: React.FC<CardListProps> = ({
             key={card.uniqueCardNumber}
             className={`border transition-all cursor-pointer ${
               isSelected
-                ? 'border-[#000000] bg-[#000000]/5'
-                : 'border-[#eeeeee] hover:border-[#ebebeb]'
+                ? 'border-primary bg-primary/5'
+                : 'border-gray-200 hover:border-gray-300'
             }`}
             onClick={() => onCardSelect(card)}
           >
@@ -48,13 +48,13 @@ const CardList: React.FC<CardListProps> = ({
                     w-4 h-4 border-2 rounded-full flex items-center justify-center
                     ${
                       isSelected
-                        ? 'border-[#000000] bg-primary'
-                        : 'border-[#ebebeb]'
+                        ? 'border-primary bg-primary'
+                        : 'border-gray-300'
                     }
                   `}
                 >
                   {isSelected && (
-                    <div className="w-2 h-2 bg-[#ffffff] rounded-full"></div>
+                    <div className="w-2 h-2 bg-white rounded-full"></div>
                   )}
                 </div>
 
@@ -64,21 +64,21 @@ const CardList: React.FC<CardListProps> = ({
                   className="w-8 h-6 object-contain"
                 />
                 <div>
-                  <div className="font-medium text-[#4a4f54]">
+                  <div className="font-medium text-gray-900">
                     {card.maskedCardNumber}
                   </div>
-                  <div className="text-sm text-[#c9c9c9]">{card.cardAlias}</div>
+                  <div className="text-sm text-gray-500">{card.cardAlias}</div>
                   <div className="flex items-center space-x-2 mt-1">
                     <span className="text-xs px-2 py-1 bg-gray-100">
                       {card.cardType}
                     </span>
                     {card.isDefaultCard && (
-                      <span className="text-xs px-2 py-1 bg-[#000000]/10 text-[#000000]">
+                      <span className="text-xs px-2 py-1 bg-primary/10 text-primary">
                         {texts.defaultCardText}
                       </span>
                     )}
                     {card.expireSoon && (
-                      <span className="text-xs px-2 py-1 bg-[#d08800]/10 text-[#d08800]">
+                      <span className="text-xs px-2 py-1 bg-warning/10 text-warning">
                         {texts.expiresSoonText}
                       </span>
                     )}
@@ -88,7 +88,7 @@ const CardList: React.FC<CardListProps> = ({
 
               {onRemove && (
                 <button
-                  className="p-2 text-[#d7d7d7] hover:text-[#ff6367] transition-colors disabled:opacity-50 bg-[#f5f5f5] rounded-full"
+                  className="p-2 text-gray-400 hover:text-red-500 transition-colors disabled:opacity-50 bg-gray-100 rounded-full"
                   disabled={removingCardId === card.uniqueCardNumber}
                   onClick={(e) => {
                     e.stopPropagation();
@@ -96,7 +96,7 @@ const CardList: React.FC<CardListProps> = ({
                   }}
                 >
                   {removingCardId === card.uniqueCardNumber ? (
-                    <div className="animate-spin h-5 w-5 border-b-2 border-[#ff6367]"></div>
+                    <div className="animate-spin h-5 w-5 border-b-2 border-red-500"></div>
                   ) : (
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
@@ -108,7 +108,7 @@ const CardList: React.FC<CardListProps> = ({
                       strokeWidth="2"
                       strokeLinecap="round"
                       strokeLinejoin="round"
-                      className="text-[#9d9d9d]"
+                      className="text-gray-600"
                     >
                       <path d="M3 6h18" />
                       <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
@@ -121,17 +121,17 @@ const CardList: React.FC<CardListProps> = ({
 
             {isSelected && cvcRequired && (
               <div
-                className="border-t border-[#eeeeee] p-4 bg-[#f7f7f7]"
+                className="border-t border-gray-200 p-4 bg-gray-50"
                 onClick={(e) => e.stopPropagation()}
               >
                 <div className="flex items-center gap-4">
                   <div className="flex-1">
                     <label
                       htmlFor={`cvc-${card.uniqueCardNumber}`}
-                      className="block text-sm font-medium text-[#686868] mb-2"
+                      className="block text-sm font-medium text-gray-700 mb-2"
                     >
                       {texts.cvcCardLabel}
-                      <span className="text-[#ff6367]"> *</span>
+                      <span className="text-red-500"> *</span>
                     </label>
                     <Input
                       id={`cvc-${card.uniqueCardNumber}`}
@@ -148,7 +148,7 @@ const CardList: React.FC<CardListProps> = ({
                       maxLength={expectedCvcLength}
                       className="w-32"
                     />
-                    <p className="text-xs text-[#c9c9c9] mt-1">
+                    <p className="text-xs text-gray-500 mt-1">
                       {texts.cvcCardHelpText
                         ?.replace('{length}', expectedCvcLength.toString())
                         .replace(
@@ -159,11 +159,11 @@ const CardList: React.FC<CardListProps> = ({
                         )}
                     </p>
                   </div>
-                  <div className="flex items-center text-sm text-[#9d9d9d]">
+                  <div className="flex items-center text-sm text-gray-600">
                     <Icon
                       name="shield-check"
                       size={16}
-                      className="mr-1 text-[#00a63d]"
+                      className="mr-1 text-green-600"
                     />
                     <span>{texts.secureCardText}</span>
                   </div>

package/src/components/confirmation-modal.tsx

@@ -27,7 +27,7 @@ const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
         <div className="flex gap-3 justify-center">
           <Button
             appearance="outlined"
-            className="px-6 py-3 h-auto hover:bg-[#f7f7f7] transition-colors"
+            className="px-6 py-3 h-auto hover:bg-gray-50 transition-colors"
             onClick={onClose}
             disabled={isLoading}
           >

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

@@ -146,17 +146,17 @@ const CreditCardForm: React.FC<CreditCardFormProps> = ({
   const expectedCVVLength = getCvcLength(cardType);
 
   return (
-    <div className="bg-[#ffffff] border border-[#eeeeee] shadow-sm">
-      <div className="flex justify-start items-center border-b border-[#eeeeee] px-4 py-3 sm:px-6 sm:py-4">
+    <div className="bg-white border border-gray-200 shadow-sm">
+      <div className="flex justify-start items-center border-b border-gray-200 px-4 py-3 sm:px-6 sm:py-4">
         <div className="flex items-center gap-2">
-          <Icon name="credit-card" size={20} className="text-[#9d9d9d]" />
-          <span className="text-[#181818] text-lg font-medium sm:text-xl">
+          <Icon name="credit-card" size={20} className="text-gray-600" />
+          <span className="text-black-800 text-lg font-medium sm:text-xl">
             {texts.creditCardInfoTitle}
           </span>
           {isBinChecking && (
             <div className="flex items-center gap-2 ml-auto">
               <LoaderSpinner className="w-4 h-4" />
-              <span className="text-sm text-[#2d2d2d]">
+              <span className="text-sm text-gray-500">
                 {texts.checkingCardText}
               </span>
             </div>
@@ -169,7 +169,7 @@ const CreditCardForm: React.FC<CreditCardFormProps> = ({
           <div className="space-y-2">
             <label
               htmlFor="cardNumber"
-              className="block text-sm font-medium text-[#686868]"
+              className="block text-sm font-medium text-gray-700"
             >
               {texts.cardNumberLabel}
             </label>
@@ -194,7 +194,7 @@ const CreditCardForm: React.FC<CreditCardFormProps> = ({
                     errors.cardNumber && '-translate-y-full'
                   )}
                 >
-                  <span className="flex text-sm font-medium text-[#9d9d9d] bg-[#f5f5f5] px-2 py-1">
+                  <span className="flex text-sm font-medium text-gray-600 bg-gray-100 px-2 py-1">
                     <img
                       src={
                         getCardIcon(watchedCardNumber.replace(/\D/g, '')).src
@@ -211,7 +211,7 @@ const CreditCardForm: React.FC<CreditCardFormProps> = ({
           <div className="space-y-2">
             <label
               htmlFor="cardholderName"
-              className="block text-sm font-medium text-[#686868]"
+              className="block text-sm font-medium text-gray-700"
             >
               {texts.cardholderNameLabel}
             </label>
@@ -228,7 +228,7 @@ const CreditCardForm: React.FC<CreditCardFormProps> = ({
             <div className="space-y-2">
               <label
                 htmlFor="expiryDate"
-                className="block text-sm font-medium text-[#686868]"
+                className="block text-sm font-medium text-gray-700"
               >
                 {texts.expiryDateLabel}
               </label>
@@ -248,7 +248,7 @@ const CreditCardForm: React.FC<CreditCardFormProps> = ({
             <div className="space-y-2">
               <label
                 htmlFor="cvv"
-                className="block text-sm font-medium text-[#686868]"
+                className="block text-sm font-medium text-gray-700"
               >
                 {texts.cvcLabel}
               </label>
@@ -278,18 +278,18 @@ const CreditCardForm: React.FC<CreditCardFormProps> = ({
                   {...register('saveCard')}
                   id="saveCard"
                   type="checkbox"
-                  className="h-4 w-4 mt-0.5 text-[#000000] focus:ring-primary border-[#ebebeb]"
+                  className="h-4 w-4 mt-0.5 text-primary focus:ring-primary border-gray-300"
                 />
                 <label
                   htmlFor="saveCard"
-                  className="text-sm font-medium text-[#686868] cursor-pointer"
+                  className="text-sm font-medium text-gray-700 cursor-pointer"
                 >
                   {texts.saveCardTermsPrefix}{' '}
                   <a
                     href="https://www.masterpassturkiye.com/terms-and-conditions"
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="text-[#000000] underline hover:text-[#181818]"
+                    className="text-primary underline hover:text-primary-dark"
                   >
                     {texts.saveCardTermsLink}
                   </a>
@@ -301,7 +301,7 @@ const CreditCardForm: React.FC<CreditCardFormProps> = ({
                   <div className="space-y-2 pt-2">
                     <label
                       htmlFor="cardAlias"
-                      className="block text-sm font-medium text-[#686868]"
+                      className="block text-sm font-medium text-gray-700"
                     >
                       {texts.cardAliasLabel}
                     </label>
@@ -320,7 +320,7 @@ const CreditCardForm: React.FC<CreditCardFormProps> = ({
           )}
 
           {watchedSaveCard && (
-            <div className="flex flex-col sm:flex-row gap-3 pt-6 border-t border-[#eeeeee]">
+            <div className="flex flex-col sm:flex-row gap-3 pt-6 border-t border-gray-200">
               <Button
                 type="submit"
                 className="flex-1 group inline-flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed"

package/src/components/installment-list.tsx

@@ -13,11 +13,11 @@ const InstallmentList: React.FC<InstallmentListProps> = ({
   texts
 }) => {
   return (
-    <div className="bg-white border border-[#eeeeee] shadow-sm">
-      <div className="border-b border-[#eeeeee] px-4 py-3 sm:px-6 sm:py-4">
+    <div className="bg-white border border-gray-200 shadow-sm">
+      <div className="border-b border-gray-200 px-4 py-3 sm:px-6 sm:py-4">
         <div className="flex items-center gap-2">
           <Icon name="credit-card" size={20} className="text-gray-600" />
-          <span className="text-[#181818] text-lg font-medium sm:text-xl">
+          <span className="text-black-800 text-lg font-medium sm:text-xl">
             {texts.installmentOptionsText}
           </span>
         </div>
@@ -26,10 +26,10 @@ const InstallmentList: React.FC<InstallmentListProps> = ({
       <div className="p-4 sm:p-6">
         {/* Card Type Display */}
         {cardType && (
-          <div className="mb-4 p-3 bg-[#f7f7f7] border border-[#eeeeee]">
+          <div className="mb-4 p-3 bg-gray-50 border border-gray-200">
             <div className="flex items-center gap-2">
               <Icon name="credit-card" size={16} className="text-gray-600" />
-              <span className="text-sm font-medium text-[#686868]">
+              <span className="text-sm font-medium text-gray-700">
                 {texts.cardTypeLabel}
               </span>
               <img
@@ -55,8 +55,8 @@ const InstallmentList: React.FC<InstallmentListProps> = ({
                   relative flex items-center justify-between p-3 border transition-all cursor-pointer
                   ${
                     isSelected
-                      ? 'border-[#000000] bg-[#000000]/5'
-                      : 'border-[#eeeeee] hover:border-[#ebebeb]'
+                      ? 'border-primary bg-primary/5'
+                      : 'border-gray-200 hover:border-gray-300'
                   }
                 `}
               >
@@ -66,13 +66,13 @@ const InstallmentList: React.FC<InstallmentListProps> = ({
                     w-4 h-4 border-2 rounded-full flex items-center justify-center
                     ${
                       isSelected
-                        ? 'border-[#000000] bg-[#000000]'
-                        : 'border-[#ebebeb]'
+                        ? 'border-primary bg-primary'
+                        : 'border-gray-300'
                     }
                   `}
                 >
                   {isSelected && (
-                    <div className="w-2 h-2 bg-[#ffffff] rounded-full"></div>
+                    <div className="w-2 h-2 bg-white rounded-full"></div>
                   )}
                 </div>
 
@@ -80,7 +80,7 @@ const InstallmentList: React.FC<InstallmentListProps> = ({
                 <div className="flex-1 ml-3">
                   <div className="flex items-center justify-between">
                     <div>
-                      <span className="font-medium text-[#4a4f54]">
+                      <span className="font-medium text-gray-900">
                         {installment.installment_count === 1
                           ? texts.singlePaymentText
                           : texts.installmentsText?.replace(
@@ -89,17 +89,17 @@ const InstallmentList: React.FC<InstallmentListProps> = ({
                             )}
                       </span>
                       {isNoInterest && (
-                        <span className="text-xs bg-[#84978a] text-[#004e21] px-2 py-1 ml-2">
+                        <span className="text-xs bg-green-100 text-green-700 px-2 py-1 ml-2">
                           {texts.noInterestText}
                         </span>
                       )}
                     </div>
                     <div className="text-right">
-                      <div className="font-semibold text-[#4a4f54]">
+                      <div className="font-semibold text-gray-900">
                         {installment.price_with_accrued_interest}
                       </div>
                       {installment.installment_count > 1 && (
-                        <div className="text-sm text-[#f7f7f7]">
+                        <div className="text-sm text-gray-500">
                           {installment.monthly_price_with_accrued_interest}
                           {texts.perMonthText}
                         </div>
@@ -114,7 +114,7 @@ const InstallmentList: React.FC<InstallmentListProps> = ({
 
         {/* Payment Button */}
         {selectedInstallment && onProceedToPayment && (
-          <div className="pt-4 border-t border-[#eeeeee]">
+          <div className="pt-4 border-t border-gray-200">
             <Button
               onClick={onProceedToPayment}
               disabled={isLoading || paymentLoading}
@@ -122,7 +122,7 @@ const InstallmentList: React.FC<InstallmentListProps> = ({
             >
               {paymentLoading ? (
                 <div className="flex items-center justify-center">
-                  <div className="animate-spin h-4 w-4 border-b-2 border-[#ffffff]"></div>
+                  <div className="animate-spin h-4 w-4 border-b-2 border-white"></div>
                   <span className="ml-2">{texts.processingPaymentText}</span>
                 </div>
               ) : (

package/src/components/masterpass-security-info.tsx

@@ -11,14 +11,18 @@ const MasterpassSecurityInfo: React.FC<MasterpassSecurityInfoProps> = ({
 }) => {
   return (
     <div className="flex flex-col items-center gap-2">
-      <img src={mpBlackLogo.src} alt="Masterpass" className="h-6" />
-      <p className="text-xs text-center text-[#9d9d9d]">
+      <img
+        src={mpBlackLogo.src}
+        alt="Masterpass"
+        className="h-6"
+      />
+      <p className="text-xs text-center text-gray-600">
         {texts.masterpassSecurityPrefix}{' '}
         <a
           href="https://www.mastercard.com.tr/tr-tr/tuketiciler/odeme-secenekleri/masterpass.html"
           target="_blank"
           rel="noopener noreferrer"
-          className="text-[#000000] underline hover:text-[#181818] font-medium"
+          className="text-primary underline hover:text-primary-dark font-medium"
         >
           {texts.masterpassSecurityLink}
         </a>

package/src/components/otp-modal.tsx

@@ -204,21 +204,15 @@ const OTPModal: React.FC<OTPModalProps> = ({
     >
       <div className="px-6">
         {getTitle() && (
-          <h3 className="text-center mt-4 text-lg font-semibold">
-            {getTitle()}
-          </h3>
+          <h3 className="text-center mt-4 text-lg font-semibold">{getTitle()}</h3>
         )}
-        <p className="text-center mt-2 text-sm text-gray-600">
-          {getDescription()}
-        </p>
+        <p className="text-center mt-2 text-sm text-gray-600">{getDescription()}</p>
         <div className="flex flex-col gap-3 p-5 w-3/4 m-auto">
           <Input
             type="text"
             value={otp}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-              setOtp(
-                e.target.value.replace(/\D/g, '').slice(0, getMaxLength())
-              );
+              setOtp(e.target.value.replace(/\D/g, '').slice(0, getMaxLength()));
               setError(null);
             }}
             maxLength={getMaxLength()}
@@ -228,9 +222,7 @@ const OTPModal: React.FC<OTPModalProps> = ({
             placeholder={getPlaceholder()}
           />
           {getHelperText() && (
-            <p className="text-xs text-gray-500 text-center">
-              {getHelperText()}
-            </p>
+            <p className="text-xs text-gray-500 text-center">{getHelperText()}</p>
           )}
           {error && <p className="text-error text-xs text-center">{error}</p>}
           <Button

package/src/components/payment-method-selector.tsx

@@ -11,12 +11,12 @@ const PaymentMethodSelector: React.FC<PaymentMethodSelectorProps> = ({
   const hasStoredCards = cards && cards.length > 0;
 
   return (
-    <div className="bg-white border border-[#eeeeee] shadow-sm">
-      <div className="border-b border-[#eeeeee] px-4 py-3 sm:px-6 sm:py-4">
-        <h3 className="text-lg font-medium text-[#4a4f54]">
+    <div className="bg-white border border-gray-200 shadow-sm">
+      <div className="border-b border-gray-200 px-4 py-3 sm:px-6 sm:py-4">
+        <h3 className="text-lg font-medium text-gray-900">
           {texts.paymentMethodTitle}
         </h3>
-        <p className="text-sm text-[#c9c9c9] mt-1">
+        <p className="text-sm text-gray-500 mt-1">
           {texts.paymentMethodDescription}
         </p>
       </div>
@@ -31,7 +31,7 @@ const PaymentMethodSelector: React.FC<PaymentMethodSelectorProps> = ({
         >
           {hasStoredCards && (
             <div
-              className="flex items-center p-4 border border-[#eeeeee] hover:border-[#000000] transition-colors cursor-pointer"
+              className="flex items-center p-4 border border-gray-200 hover:border-primary transition-colors cursor-pointer"
               onClick={() => onMethodChange('stored_card')}
             >
               <div
@@ -39,26 +39,26 @@ const PaymentMethodSelector: React.FC<PaymentMethodSelectorProps> = ({
                   w-4 h-4 border-2 rounded-full flex items-center justify-center mr-3
                   ${
                     selectedMethod === 'stored_card'
-                      ? 'border-[#000000] bg-[#000000]'
-                      : 'border-[#ebebeb]'
+                      ? 'border-primary bg-primary'
+                      : 'border-gray-300'
                   }
                 `}
               >
                 {selectedMethod === 'stored_card' && (
-                  <div className="w-2 h-2 bg-[#ffffff] rounded-full"></div>
+                  <div className="w-2 h-2 bg-white rounded-full"></div>
                 )}
               </div>
               <div className="flex items-center">
                 <Icon
                   name="credit-card"
                   size={20}
-                  className="text-[#9d9d9d] mr-3"
+                  className="text-gray-600 mr-3"
                 />
                 <div>
-                  <div className="font-medium text-[#4a4f54]">
+                  <div className="font-medium text-gray-900">
                     {texts.savedCardsText}
                   </div>
-                  <div className="text-sm text-[#c9c9c9]">
+                  <div className="text-sm text-gray-500">
                     {texts.savedCardsDescription.replace(
                       '{count}',
                       cards.length.toString()
@@ -70,7 +70,7 @@ const PaymentMethodSelector: React.FC<PaymentMethodSelectorProps> = ({
           )}
 
           <div
-            className="flex items-center p-4 border border-[#eeeeee] hover:border-[#000000] transition-colors cursor-pointer"
+            className="flex items-center p-4 border border-gray-200 hover:border-primary transition-colors cursor-pointer"
             onClick={() => onMethodChange('new_card')}
           >
             <div
@@ -78,22 +78,22 @@ const PaymentMethodSelector: React.FC<PaymentMethodSelectorProps> = ({
                 w-4 h-4 border-2 rounded-full flex items-center justify-center mr-3
                 ${
                   selectedMethod === 'new_card'
-                    ? 'border-[#000000] bg-[#000000]'
-                    : 'border-[#ebebeb]'
+                    ? 'border-primary bg-primary'
+                    : 'border-gray-300'
                 }
               `}
             >
               {selectedMethod === 'new_card' && (
-                <div className="w-2 h-2 bg-[#ffffff] rounded-full"></div>
+                <div className="w-2 h-2 bg-white rounded-full"></div>
               )}
             </div>
             <div className="flex items-center">
-              <Icon name="plus" size={20} className="text-[#9d9d9d] mr-3" />
+              <Icon name="plus" size={20} className="text-gray-600 mr-3" />
               <div>
-                <div className="font-medium text-[#4a4f54]">
+                <div className="font-medium text-gray-900">
                   {texts.newCardText}
                 </div>
-                <div className="text-sm text-[#c9c9c9]">
+                <div className="text-sm text-gray-500">
                   {texts.newCardDescription}
                 </div>
               </div>
@@ -102,12 +102,12 @@ const PaymentMethodSelector: React.FC<PaymentMethodSelectorProps> = ({
         </div>
 
         {!hasStoredCards && (
-          <div className="flex items-center justify-center p-8 text-[#c9c9c9]">
+          <div className="flex items-center justify-center p-8 text-gray-500">
             <div className="text-center">
               <Icon
                 name="credit-card"
                 size={24}
-                className="mx-auto mb-2 text-[#d7d7d7]"
+                className="mx-auto mb-2 text-gray-400"
               />
               <p className="text-sm">{texts.noPaymentMethodsText}</p>
             </div>

package/src/hooks/useMasterpassAccount.ts

@@ -126,10 +126,7 @@ export const useMasterpassAccount = () => {
     dispatch(resetState());
   }, [dispatch]);
 
-  const refreshToken = async (options?: {
-    three_d?: boolean;
-    skipReset?: boolean;
-  }) => {
+  const refreshToken = async (options?: { three_d?: boolean; skipReset?: boolean }) => {
     if (options?.three_d !== false && !options?.skipReset) {
       resetData();
     }
@@ -221,12 +218,8 @@ export const useMasterpassAccount = () => {
             informationModalData: {
               type: 'warning',
               title: texts?.sessionExpiredTitle || 'Session Expired',
-              message:
-                texts?.sessionExpiredMessage ||
-                'Your session has expired due to inactivity. Please restart the process to continue.',
-              secondaryMessage:
-                texts?.sessionExpiredSecondaryMessage ||
-                'For security reasons, verification codes are only valid for a limited time.',
+              message: texts?.sessionExpiredMessage || 'Your session has expired due to inactivity. Please restart the process to continue.',
+              secondaryMessage: texts?.sessionExpiredSecondaryMessage || 'For security reasons, verification codes are only valid for a limited time.',
               buttonText: texts?.sessionExpiredButton || 'Start Again'
             }
           })
@@ -366,8 +359,8 @@ export const useMasterpassAccount = () => {
           cvv: finalCardData.cvv,
           accountAliasName: finalCardData.cardAlias,
           userId: activeTokenData.UserId,
-          isMsisdnValidatedByMerchant:
-            activeTokenData.IsMsisdnValidated === 'True'
+          isMsisdnValidatedByMerchant: activeTokenData.IsMsisdnValidated === 'True',
+          authenticationMethod: activeTokenData.AuthenticationMethod
         });
 
         const result = await handleMasterpassResponse(response);
@@ -414,6 +407,7 @@ export const useMasterpassAccount = () => {
     [
       tokenData?.AccountKey,
       tokenData?.UserId,
+      tokenData?.AuthenticationMethod,
       newCardFormData,
       refreshAccountData,
       refreshToken,

package/src/types/account.types.ts

@@ -138,6 +138,7 @@ export interface AddCardRequest {
   accountAliasName: string;
   userId: string;
   isMsisdnValidatedByMerchant: boolean;
+  authenticationMethod: string;
 }
 
 export interface AddCard3DSecureResult {