FTA Card SDK Overview

The FTA Card SDK allows you to securely display card details in your application. It provides a customizable card component that shows credit/debit card information with proper security measures.

The SDK handles authentication, data decryption, and secure display of sensitive card information with a toggle to show/hide card details for enhanced security.

Flow

1. Initialize the Card component with required authentication
2. SDK decrypts and validates the authentication key
3. Card details are fetched securely from backend
4. Card is displayed with masked sensitive information
5. Users can toggle visibility of card details

Installation

npm install @fintech-automation/card-webview

Development running Locally

1. Install dependencies:

npm install

2. Start the dev server:

npm run serve

3. Build production package:

npm run build

Usage

import React from 'react';
import { Card } from '@fintech-automation/card-webview';

export default function App() {
  return (
    <div className="h-[315px] w-[500px]">
      <Card
        authenticationKey="YOUR_AUTHENTICATION_KEY"
        businessName="Your Business Name"
        businessLogoUrl="https://yourbusiness.com/logo.png"
        businessFontsize="16px"
        backgroundImageUrl="https://yourbusiness.com/background.jpg"
        primaryColor="#595E63"
        primaryFontcolor="#ffffff"
        secondaryColor="#323538"
        secondaryFontcolor="#FFFFFF"
      />
    </div>
  );
}

API Document

| Property | Description | Type | Required | Default | | ----------------------- | ------------------------------------------------------------ | --------- | ------------ | ----------- | | authenticationKey | The token returned by Generate iFrame Token API. | string | true | - | | templateWithBalance | Whether to show balance template | boolean | false | false | | backgroundImageUrl | Background image URL for card | string | false | - | | businessName | Your business name | string | false | - | | businessLogoUrl | Business logo URL | string | false | - | | primaryColor | Background color of the primary container | string | false | #595e63 | | primaryFontcolor | Primary font color | string | false | #ffffffcc | | secondaryColor | Secondary color (bottom section) | string | false | #323538 | | secondaryFontcolor | Secondary font color | string | false | #ffffff |

Security Features

• Secure authentication via encrypted keys
• Sensitive card data masked by default
• Toggle visibility for PAN, CVV and expiration date
• HTTPS requirement in production environments
• Activity tracking for security monitoring

Card Data Display

The Card component displays the following card information:

• Card number (PAN) - masked by default with show/hide toggle
• Expiration date - masked by default with show/hide toggle
• CVV - masked by default with show/hide toggle
• Card network logo (Visa/Mastercard)
• Business name and logo

License

This repository includes the FinTech Card iFrame SDK, which is licensed under a Commercial License Agreement. See COMMERCIAL-LICENSE.md for full terms.

Use of this SDK requires explicit permission from FinTech Automation.