# Saved Card

Provides a secure and user-friendly interface to let customers store, select, and reuse previously saved credit cards during the checkout process. Supports custom rendering, form validation, and installment selection.

## <mark style="color:red;">**Installation Method**</mark>

You can use the following command to install the extension with the latest plugins:

```bash
npx @akinon/projectzero@latest --plugins
```

### <mark style="color:red;">**Props**</mark>

<table><thead><tr><th width="150.78515625">Prop</th><th width="190.62109375">Type</th><th width="89.33984375">Required</th><th>Description</th></tr></thead><tbody><tr><td>texts</td><td>SavedCardOptionTexts</td><td>No</td><td>Translations and text content used throughout the component, such as titles, button text, error messages, and installment labels.</td></tr><tr><td>agreementCheckbox</td><td>ReactElement</td><td>No</td><td>A custom checkbox element that is rendered before submitting the form (e.g., terms and conditions checkbox).</td></tr><tr><td>customRender</td><td>{ cardSelectionSection, installmentSection, agreementAndSubmit }</td><td>No</td><td>An object that allows partial or full customization of internal sections by providing custom render functions.</td></tr><tr><td>formWrapperClassName</td><td>string</td><td>No</td><td>CSS class applied to the wrapper &#x3C;form> element.</td></tr><tr><td>cardSelectionWrapperClassName</td><td>string</td><td>No</td><td>CSS class applied to the card selection section wrapper.</td></tr><tr><td>installmentWrapperClassName</td><td>string</td><td>No</td><td>CSS class applied to the installment and submit section wrapper.</td></tr><tr><td>formProps</td><td>React.FormHTMLAttributes&#x3C;HTMLFormElement></td><td>No</td><td>Native HTML form props to apply to the wrapper &#x3C;form> element.</td></tr><tr><td>cardSelectionWrapperProps</td><td>React.HTMLAttributes&#x3C;HTMLDivElement></td><td>No</td><td>Props applied to the card selection wrapper &#x3C;div>.</td></tr><tr><td>installmentWrapperProps</td><td>React.HTMLAttributes&#x3C;HTMLDivElement></td><td>No</td><td>Props applied to the installment wrapper &#x3C;div>.</td></tr></tbody></table>

### <mark style="color:red;">**SavedCardOptionTexts**</mark>

<table><thead><tr><th width="134.40234375">Field</th><th width="165.51171875">Type</th><th>Description</th></tr></thead><tbody><tr><td>title</td><td>string</td><td>Title displayed above the card selection.</td></tr><tr><td>button</td><td>string</td><td>Submit button text.</td></tr><tr><td>installment</td><td>InstallmentTexts</td><td>Labels and headings for the installment section.</td></tr><tr><td>deletePopup</td><td>DeletePopupTexts</td><td>Translations for delete confirmation popup.</td></tr><tr><td>errors</td><td>ErrorTexts</td><td>Error messages used in form validation.</td></tr></tbody></table>

### <mark style="color:red;">**CustomRender**</mark>

#### **cardSelectionSection Props**

<table><thead><tr><th width="182.05859375" align="center">Prop</th><th width="176.87890625" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td align="center">title</td><td align="center">string</td><td>Section title shown above the card list.</td></tr><tr><td align="center">cards</td><td align="center">any</td><td>Array of saved card objects fetched from state.</td></tr><tr><td align="center">selectedCard</td><td align="center">any</td><td>The currently selected card object.</td></tr><tr><td align="center">onSelect</td><td align="center">(card: any) => void</td><td>Function to call when a card is selected.</td></tr><tr><td align="center">register</td><td align="center">any</td><td>react-hook-form's register function for form integration.</td></tr><tr><td align="center">errors</td><td align="center">any</td><td>Object containing field errors.</td></tr><tr><td align="center">dispatch</td><td align="center">any</td><td>Redux dispatch function, passed for optional state updates.</td></tr></tbody></table>

#### **installmentSection Props**

<table><thead><tr><th width="180.015625" align="center">Prop</th><th width="173.37890625" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td align="center">title</td><td align="center">string</td><td>Title for the installment section.</td></tr><tr><td align="center">selectedCard</td><td align="center">any</td><td>Currently selected card object.</td></tr><tr><td align="center">installmentOptions</td><td align="center">any</td><td>List of available installment options for the selected card.</td></tr><tr><td align="center">translations</td><td align="center">InstallmentTexts</td><td>Label texts (like "Per Month", "Total").</td></tr><tr><td align="center">errors</td><td align="center">any</td><td>Validation errors related to installment selection.</td></tr></tbody></table>

#### **agreementAndSubmit Props**

<table><thead><tr><th width="178.14453125" align="center">Prop</th><th width="143.96875" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td align="center">agreementCheckbox</td><td align="center">ReactElement</td><td>undefined</td></tr><tr><td align="center">control</td><td align="center">any</td><td>react-hook-form control object, required for binding form state.</td></tr><tr><td align="center">errors</td><td align="center">any</td><td>Object containing validation errors.</td></tr><tr><td align="center">buttonText</td><td align="center">string</td><td>Submit button label (e.g., "Pay Now", "Continue").</td></tr></tbody></table>

## <mark style="color:red;">**Usage Examples**</mark>

**File Path:**

```bash
views/checkout/steps/payment/options/saved-card.tsx
```

### <mark style="color:red;">**Default Usage**</mark>

```javascript
import PluginModule, { Component } from '@akinon/next/components/plugin-module';

const SavedCard = () => {
 return (
   <PluginModule
     component={Component.SavedCard}
     props={{
       texts: {
         title: 'Pay with Saved Card',
         button: 'Pay Now'
       }
     }}
   />
 );
};

export default SavedCard;
```

### <mark style="color:red;">CustomRender Usage</mark>

```javascript
import {
 CardSelectionSectionProps,
 InstallmentSectionProps
} from '@akinon/pz-saved-card/src/types';
import React, { useEffect, useState } from 'react';
import { Image } from '@akinon/next/components';
import { cardImages } from '@akinon/pz-saved-card/src/views/saved-card-option';
import clsx from 'clsx';
import { twMerge } from 'tailwind-merge';
import { useSetSavedCardInstallmentOptionMutation } from '@akinon/pz-saved-card/src/redux/api';
import { getPosError } from '@akinon/next/utils';
import { useAppSelector } from '@akinon/next/redux/hooks';
import { RootState } from '@theme/redux/store';
import { useLocalization } from '@akinon/next/hooks';
import { SwiperPagination, SwiperReact, SwiperSlide } from '@theme/components';
import PluginModule, { Component } from '@akinon/next/components/plugin-module';

const getCreditCardType = (maskedCardNumber: string): string => {
 const cardNumber = maskedCardNumber.replace(/\D/g, '');

 if (/^4/.test(cardNumber)) {
   return 'visa';
 } else if (/^5[1-5]/.test(cardNumber) || /^2[2-7]/.test(cardNumber)) {
   return 'mastercard';
 } else if (/^3[47]/.test(cardNumber)) {
   return 'amex';
 } else if (/^9/.test(cardNumber)) {
   return 'troy';
 } else {
   return 'other';
 }
};

function maskCreditCard(cardNumber: string, value: string): string {
 const cleanNumber = cardNumber.replace(/\D/g, '');

 const lastFourDigits = cleanNumber.slice(-4);

 let cardType = 'Unknown';
 if (cleanNumber.startsWith('4')) {
   cardType = 'Visa';
 } else if (cleanNumber.startsWith('5') || cleanNumber.startsWith('2')) {
   cardType = 'Mastercard';
 } else if (cleanNumber.startsWith('3')) {
   cardType = 'American Express';
 } else if (cleanNumber.startsWith('6')) {
   cardType = 'Discover';
 }

 if (value == 'lastFourDigits') return `* ${lastFourDigits}`;
 if ((value = 'cardType')) return cardType;
}

const SavedCard = () => {
 const [viewCounter, setViewCounter] = useState(3);
 const [formError, setFormError] = useState(null);

 const handleViewMore = () => {
   viewCounter === 3 ? setViewCounter(99) : setViewCounter(3);
 };

 useEffect(() => {
   const posErrors = getPosError();

   if (posErrors) {
     setFormError(posErrors);
   }
 }, []);

 return (
   <PluginModule
     component={Component.SavedCard}
     props={{
       texts: {
         title: 'Pay with Saved Card',
         button: 'Pay Now'
       },
       formProps: {
         id: 'paymentForm'
       },
       cardSelectionWrapperClassName: 'w-full',
       installmentWrapperClassName: '',
       customRender: {
         cardSelectionSection: ({
           cards,
           onSelect,
           selectedCard,
           register,
           errors
         }: CardSelectionSectionProps) => {
           if (cards?.length === 0) {
             return (
               <div className="flex items-center gap-2.5 px-[1.875rem] py-2">
                 <span
                   id="saved-card-error"
                   className="text-sm font-bold text-gray-620"
                 >
                   No Card Added yet.
                 </span>
               </div>
             );
           }

           return (
             <div className="relative ms-[30px]">
               <SwiperReact
                 modules={[SwiperPagination]}
                 pagination={{
                   el: '.swiper-pagination',
                   type: 'bullets',
                   clickable: true,
                   bulletClass: 'swiper-pagination-bullet bg-black',
                   bulletActiveClass:
                     'swiper-pagination-bullet-active !bg-white !w-[16px] md:!w-[70px] !rounded-[10px]'
                 }}
                 slidesPerView={'auto'}
                 spaceBetween={16}
               >
                 {cards.slice(0, viewCounter).map((card) => (
                   <SwiperSlide key={card.token} className="!w-auto">
                     <li
                       className={clsx(
                         'relative flex h-[91px] min-w-[137px] cursor-pointer flex-col justify-between rounded-xl border border-gray-380 bg-white p-3.5',
                         {
                           'border-primary': selectedCard?.token === card.token
                         }
                       )}
                       onClick={() => onSelect(card)}
                     >
                       <div className="flex justify-between">
                         <input
                           name="card"
                           type="radio"
                           checked={selectedCard?.token === card.token}
                           value={card.token}
                           id={card.token}
                           onChange={() => {}}
                           {...register('card')}
                           className={twMerge(
                             'h-4 w-4 appearance-none rounded-full border border-primary ring-1 ring-transparent transition-all',
                             'checked:border-4 checked:border-primary-foreground checked:bg-primary checked:ring-primary'
                           )}
                         />
                         <Image
                           width={35}
                           height={24}
                           src={
                             cardImages[
                               getCreditCardType(card.masked_card_number)
                             ].src
                           }
                           alt={card.name}
                           className="object-contain"
                         />
                       </div>
                       <label className="flex flex-col">
                         <p className="text-xs font-semibold text-gray-620">
                           {maskCreditCard(
                             card.masked_card_number,
                             'cardType'
                           )}
                         </p>
                         <p className="text-end text-base font-semibold">
                           {maskCreditCard(
                             card.masked_card_number,
                             'lastFourDigits'
                           )}
                         </p>
                       </label>
                     </li>
                   </SwiperSlide>
                 ))}
               </SwiperReact>

               {cards && cards?.length > 3 && (
                 <p
                   className="mt-5 cursor-pointer text-base font-medium text-primary underline"
                   onClick={handleViewMore}
                 >
                   {viewCounter == 3 ? 'View All' : 'View Less'}
                 </p>
               )}
               {errors.card && (
                 <div className="mt-3 w-full px-1 text-start text-xs text-error-650">
                   {errors.card?.message}
                 </div>
               )}
               {formError?.non_field_errors && (
                 <div
                   className="mt-3 w-full px-1 text-start text-xs text-error"
                   data-testid="checkout-form-error"
                 >
                   {formError.non_field_errors}
                 </div>
               )}
               {formError?.status && (
                 <div
                   className="mt-3 w-full px-1 text-start text-xs text-error"
                   data-testid="checkout-form-error"
                 >
                   {formError.status}
                 </div>
               )}
             </div>
           );
         },
         installmentSection: ({
           selectedCard,
           installmentOptions
         }: InstallmentSectionProps) => {
           const [selectedCardToken, setSelectedCardToken] = useState(null);
           const [setInstallment] = useSetSavedCardInstallmentOptionMutation();
           const { currency } = useLocalization();
           const { basket } = useAppSelector(
             (state: RootState) => state.checkout.preOrder
           );

           const sendBankaciRequest = async (saved_card) => {
             const basket_id = basket?.pk;
             const basket_modified_date = basket?.modified_date;
             const bankaci_req = {
               basket_id: basket_id,
               basket_modified_date: basket_modified_date,
               masked_card_number: saved_card.masked_card_number,
               card_token: saved_card.token,
               currency: currency
             };
             const bankaci_response = await fetch('/api/bankaci/saved_card', {
               method: 'POST',
               headers: {
                 'Content-Type': 'application/json'
               },
               body: JSON.stringify(bankaci_req)
             });
             if (bankaci_response.status !== 200) {
               return;
             }
             const bankaci_json = await bankaci_response.json();

             return bankaci_json;
           };

           useEffect(() => {
             if (
               selectedCard &&
               installmentOptions.length > 0 &&
               selectedCardToken !== selectedCard?.token
             ) {
               sendBankaciRequest(selectedCard).finally(() => {
                 const firstOptionPk = installmentOptions[0].pk;
                 setInstallment({
                   installment: firstOptionPk
                 });
                 setSelectedCardToken(selectedCard?.token);
               });
             }
           }, [installmentOptions, setInstallment, selectedCard]);
           return <></>;
         },
         agreementAndSubmit: () => (
           <div className="mt-4 lg:hidden">
             <button
               className="hidden"
               id="checkout-saved-card-place-order"
             ></button>
           </div>
         )
       }
     }}
   />
 );
};

export default SavedCard;

```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.akinon.com/technical-guides/project-zero/next.js/plugins/saved-card.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.