card-display
npm install @fintech-automation/card-webview
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
`javascript
import React from 'react';
import { Card } from '@fintech-automation/card-webview';
export default function App() {
return (
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"
/>
);
}
`
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.